/* uv-runs.css — "THE RESHAPE, REPLAYED" for the recorded-run visuals
   ([data-run-root] .ua3-run-visual) on the UI-Anima page.
   Companion to js/uv-runs.js.

   Each run panel's static before-arrow-after visual becomes a looping
   mini-performance: the source page is observed, the quoted ask lights,
   the after-design materializes out of the source blocks, connection
   threads snap from the reshaped elements back to their source anchors,
   the counter ticks to the run's real numbers, and the fidelity meter
   fills — to 100% for hn and cnn, and honestly to 58% for yt, where
   unverified actions stay dashed and unavailable.

   ui-anima-page.js keeps owning tabs and [hidden]; this layer only
   appends a stage inside each .ua3-run-visual and hides the original
   children while .uv4-live is set. Original markup remains the no-JS /
   forced-colors fallback.

   Type floor 13px. Light editorial ground; jade = verified, amber =
   unverified/held, rust = the ask and the one warm accent. */

/* ---------- host takeover ---------- */

.ua3-run-visual.uv4-live {
    position: relative;
    display: block;
    min-height: 0;
}

.ua3-run-visual.uv4-live > :not(.uv4-stage) { display: none; }

.ua3-run-visual.uv4-live > .uv4-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    background: var(--ua3-white, #fffdf8);
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-mono, "Geist Mono", "SFMono-Regular", Consolas, monospace);
    pointer-events: none;
}

/* ---------- head: run tag + live status ---------- */

.uv4-stage .uv4-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
}

.uv4-stage .uv4-runtag {
    flex: none;
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.uv4-stage .uv4-status {
    min-width: 0;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
.uv4-stage .uv4-status--ok { color: var(--ua3-jade, #28543f); }
.uv4-stage .uv4-status--held { color: var(--ua3-amber, #6d4a00); }

/* ---------- the ask: quoted prompt fragments ---------- */

.uv4-stage .uv4-ask {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    background: var(--ua3-white, #fffdf8);
    transition: background 0.35s ease;
}

.uv4-stage .uv4-ask > span {
    flex: none;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: color 0.35s ease;
}

.uv4-stage .uv4-ask q {
    min-width: 0;
    color: var(--ua3-muted, #57534b);
    font-family: var(--ua3-font, "Geist", "Segoe UI", Arial, sans-serif);
    font-size: 0.8125rem;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.35s ease;
}

.uv4-stage .uv4-ask.uv4-ask-on { background: var(--ua3-paper-2, #ebe7dd); }
.uv4-stage .uv4-ask.uv4-ask-on > span { color: var(--ua3-rust, #a73a1e); }
.uv4-stage .uv4-ask.uv4-ask-on q { color: var(--ua3-ink, #191917); }

/* ---------- canvas: two pages + thread web ---------- */

.uv4-stage .uv4-canvas {
    position: relative;
    height: 19.5rem;
    overflow: hidden;
    background: var(--ua3-paper-2, #ebe7dd);
}
.uv4-stage.uv4-m-compact .uv4-canvas { height: 24rem; }

.uv4-stage .uv4-page {
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.uv4-stage .uv4-plabel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    display: block;
    line-height: 19px;
    padding: 0 0.5rem;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid rgba(25, 25, 23, 0.15);
}

.uv4-stage .uv4-src {
    background: #e6e2d7;
    border: 1px solid #a9a396;
}

.uv4-stage .uv4-out {
    border: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    box-shadow: 0 1px 0 rgba(25, 25, 23, 0.08);
}
.uv4-scene--hn .uv4-out { background: #fdfbf4; }
.uv4-scene--cnn .uv4-out { background: #f7f1e2; }
.uv4-scene--yt .uv4-out { background: #16181d; border-color: #101216; }
.uv4-scene--yt .uv4-out .uv4-plabel {
    color: #a7adb8;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* scanline over the source while observing */
.uv4-stage .uv4-scan {
    position: absolute;
    z-index: 2;
    left: 2%;
    right: 2%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(167, 58, 30, 0.75), transparent);
    opacity: 0;
}

/* soft sheen over the settled after-page */
.uv4-stage .uv4-sheen {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 253, 0.55), transparent);
    opacity: 0;
}

/* ---------- source blocks ---------- */

.uv4-stage .uv4-bel {
    position: absolute;
    background: #f3f0e7;
    border: 1px solid #ada79a;
    transition: opacity 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

.uv4-stage .uv4-bel::before,
.uv4-stage .uv4-bel::after { transition: opacity 0.5s ease; }

/* dense link-list row */
.uv4-stage .uv4-bel--row::before {
    content: "";
    position: absolute;
    left: 2.5%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: #b7b0a0;
}
.uv4-stage .uv4-bel--row::after {
    content: "";
    position: absolute;
    left: 9%;
    right: 5%;
    top: 30%;
    height: 42%;
    background:
        linear-gradient(#b3ac9b, #b3ac9b) 0 0 / 100% 3px no-repeat,
        linear-gradient(#cfc8b7, #cfc8b7) 0 100% / 58% 3px no-repeat;
}

/* cluttered news tile */
.uv4-stage .uv4-bel--tile::before {
    content: "";
    position: absolute;
    left: 8%;
    top: 10%;
    width: 38%;
    height: 20%;
    min-height: 6px;
    background: #cbc4b3;
}
.uv4-stage .uv4-bel--tile::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 40%;
    bottom: 12%;
    background: repeating-linear-gradient(to bottom, #c0b9a8 0 3px, transparent 3px 8px);
}

/* shouting banner on the news wall */
.uv4-stage .uv4-bel--hot { background: #eacfc2; border-color: #c08a70; }
.uv4-stage .uv4-bel--hot::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 32%;
    height: 36%;
    background: repeating-linear-gradient(to right, #c69a84 0 14px, transparent 14px 20px);
}

/* video result row */
.uv4-stage .uv4-bel--vid::before {
    content: "";
    position: absolute;
    left: 2.5%;
    top: 12%;
    width: 22%;
    height: 76%;
    background: #c9c2b1;
    border: 1px solid #a9a294;
}
.uv4-stage .uv4-bel--vid::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 5%;
    top: 22%;
    height: 56%;
    background:
        linear-gradient(#b3ac9b, #b3ac9b) 0 0 / 88% 3px no-repeat,
        linear-gradient(#cfc8b7, #cfc8b7) 0 55% / 68% 3px no-repeat,
        linear-gradient(#cfc8b7, #cfc8b7) 0 100% / 40% 3px no-repeat;
}

/* hollowed anchor once its content has moved into the reshaped view */
.uv4-stage .uv4-bel.uv4-left {
    background: transparent;
    border-style: dashed;
    opacity: 0.62;
}
.uv4-stage .uv4-bel.uv4-left::before,
.uv4-stage .uv4-bel.uv4-left::after { opacity: 0.3; }

/* ---------- reshaped elements ---------- */

.uv4-stage .uv4-ael {
    position: absolute;
    opacity: 0;
    transform-origin: 0 0;
    will-change: transform, opacity;
    transition: transform 0.68s cubic-bezier(0.22, 0.72, 0.24, 1), opacity 0.38s ease;
}
.uv4-stage .uv4-ael.uv4-in { opacity: 1; }

/* connected: a jade plug tab on the edge facing the source */
.uv4-stage .uv4-ael.uv4-plug { box-shadow: inset 3px 0 0 var(--ua3-jade, #28543f); }
.uv4-stage.uv4-m-compact .uv4-ael.uv4-plug { box-shadow: inset 0 3px 0 var(--ua3-jade, #28543f); }
.uv4-scene--yt .uv4-ael.uv4-plug { box-shadow: inset 3px 0 0 #6fbf95; }
.uv4-scene--yt.uv4-m-compact .uv4-ael.uv4-plug { box-shadow: inset 0 3px 0 #6fbf95; }

.uv4-stage .uv4-kick {
    display: block;
    flex: none;
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
}

.uv4-stage .uv4-serif-title {
    display: block;
    flex: none;
    color: var(--ua3-ink, #191917);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    overflow: hidden;
}
.uv4-stage .uv4-dcap em {
    float: left;
    font-style: normal;
    font-size: 1.75rem;
    line-height: 0.78;
    padding: 2px 4px 0 0;
}

.uv4-stage .uv4-lines {
    display: block;
    flex: 1 1 auto;
    min-height: 9px;
    background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 9px);
    opacity: 0.32;
}
.uv4-stage .uv4-lines--short { width: 84%; flex-grow: 0; height: 21px; }

/* hn — gallery catalog */
.uv4-stage .uv4-hn-hero {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: #fffdf6;
    border: 1px solid rgba(25, 25, 23, 0.4);
}
.uv4-stage .uv4-himg {
    display: block;
    flex: 1 1 auto;
    min-height: 16px;
    border: 1px solid rgba(25, 25, 23, 0.4);
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1px), rgba(25, 25, 23, 0.25) 50%, transparent calc(50% + 1px)),
        #efe9da;
}
.uv4-stage .uv4-hn-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    background: #fffdf6;
    border: 1px solid rgba(25, 25, 23, 0.24);
}
.uv4-stage .uv4-cimg {
    display: block;
    flex: none;
    height: 30%;
    min-height: 10px;
    border: 1px solid rgba(25, 25, 23, 0.22);
    background: #efe9da;
}

/* cnn — broadsheet */
.uv4-stage .uv4-cnn-mast {
    display: flex;
    align-items: center;
    justify-content: center;
    border-block: 3px double var(--ua3-ink, #191917);
    background: transparent;
}
.uv4-stage .uv4-cnn-mast b {
    color: var(--ua3-ink, #191917);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    white-space: nowrap;
    overflow: hidden;
}
.uv4-stage .uv4-cnn-lead {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 8px;
    border-top: 1px solid rgba(25, 25, 23, 0.5);
    background: transparent;
}
.uv4-stage .uv4-cnn-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 7px;
    border-top: 2px solid var(--ua3-ink, #191917);
    background: transparent;
}
.uv4-stage .uv4-colhead {
    display: block;
    flex: none;
    width: 46%;
    height: 5px;
    background: var(--ua3-ink, #191917);
}

/* yt — dark discovery gallery */
.uv4-stage .uv4-yt-feat,
.uv4-stage .uv4-yt-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    background: #1d2026;
    border: 1px solid #2a2e36;
    transition: transform 0.68s cubic-bezier(0.22, 0.72, 0.24, 1), opacity 0.38s ease,
        border-color 0.45s ease, border-style 0.45s ease;
}
.uv4-stage .uv4-vthumb {
    display: block;
    position: relative;
    flex: 1 1 auto;
    min-height: 16px;
    background: linear-gradient(135deg, #2c3038 58%, #4a2724);
    border: 1px solid #343943;
    transition: opacity 0.45s ease;
}
.uv4-stage .uv4-vtag {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 1px 6px;
    background: var(--ua3-rust-bright, #d4512e);
    color: #fffdf8;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.uv4-stage .uv4-yt-title {
    display: block;
    flex: none;
    color: #fffdf8;
    font-family: var(--ua3-font, "Geist", "Segoe UI", Arial, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uv4-stage .uv4-vline {
    display: block;
    flex: none;
    width: 88%;
    height: 8px;
    background: #e8e6df;
}
.uv4-stage .uv4-vmeta {
    display: block;
    flex: none;
    width: 58%;
    height: 5px;
    background: #444a55;
}
.uv4-stage .uv4-chip {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 10px;
    height: 10px;
}
.uv4-stage .uv4-chip--ok { background: #6fbf95; }
.uv4-stage .uv4-chip--bad {
    background: transparent;
    border: 1.5px dashed #e7c66e;
}

/* held: the card that could not be verified — dimmed, dashed, dignified */
.uv4-stage .uv4-ael.uv4-held { border: 1px dashed #8a7132; }
.uv4-stage .uv4-ael.uv4-held .uv4-vthumb { opacity: 0.48; }
.uv4-stage .uv4-ael.uv4-held .uv4-vline { background: #7d838f; }

.uv4-stage .uv4-yt-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px dashed #e7c66e;
    background: rgba(231, 198, 110, 0.07);
    color: #e7c66e;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- thread web ---------- */

.uv4-stage svg.uv4-web {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.uv4-web .uv4-thread {
    fill: none;
    stroke: var(--ua3-jade, #28543f);
    stroke-width: 1.6;
    opacity: 0.85;
}

.uv4-web .uv4-node {
    fill: var(--ua3-white, #fffdf8);
    stroke: var(--ua3-jade, #28543f);
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.uv4-web .uv4-node.uv4-node-on { opacity: 1; }

.uv4-web .uv4-pulse { fill: #3f7a5c; stroke: none; opacity: 0; }

.uv4-web .uv4-probe {
    fill: none;
    stroke: var(--ua3-amber, #6d4a00);
    stroke-width: 1.6;
    stroke-dasharray: 4 4;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.uv4-web .uv4-probe-end {
    fill: none;
    stroke: var(--ua3-amber, #6d4a00);
    stroke-width: 1.4;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.uv4-web .uv4-probe.uv4-probe-on,
.uv4-web .uv4-probe-end.uv4-probe-on { opacity: 0.9; }

/* ---------- deck: the run's real numbers ---------- */

.uv4-stage .uv4-deck {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    border-top: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    background: var(--ua3-white, #fffdf8);
}

.uv4-stage .uv4-cell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.5rem 0.7rem 0.6rem;
    border-right: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
}
.uv4-stage .uv4-cell:last-child { border-right: 0; }

.uv4-stage .uv4-cell > span {
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uv4-stage .uv4-cell > b {
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", "Segoe UI", Arial, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.uv4-stage .uv4-cell > b small {
    margin-left: 0.35rem;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.uv4-stage .uv4-mrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.uv4-stage .uv4-meter {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    min-width: 0;
    border: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    background: var(--ua3-paper-2, #ebe7dd);
}
.uv4-stage .uv4-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    background: var(--ua3-jade, #28543f);
}
.uv4-stage .uv4-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -2px;
    background: var(--ua3-ink, #191917);
}
.uv4-stage .uv4-rest {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: repeating-linear-gradient(135deg, rgba(109, 74, 0, 0.38) 0 3px, transparent 3px 7px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.uv4-stage .uv4-rest.uv4-rest-on { opacity: 1; }

.uv4-stage .uv4-pval {
    flex: none;
    min-width: 3.2ch;
    color: var(--ua3-ink, #191917);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: right;
}

/* ---------- compact composition (<460px host) ---------- */

.uv4-stage.uv4-m-compact .uv4-head { padding: 0.45rem 0.6rem; }
.uv4-stage.uv4-m-compact .uv4-ask { padding: 0.4rem 0.6rem; }
.uv4-stage.uv4-m-compact .uv4-deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.uv4-stage.uv4-m-compact .uv4-cell { padding: 0.45rem 0.6rem 0.55rem; }
.uv4-stage.uv4-m-compact .uv4-cell--meter {
    grid-column: 1 / -1;
    grid-row: 2;
    border-right: 0;
    border-top: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
}
.uv4-stage.uv4-m-compact .uv4-cell:first-child { border-right: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18)); }
.uv4-stage.uv4-m-compact .uv4-serif-title { font-size: 0.875rem; }
.uv4-stage.uv4-m-compact .uv4-dcap em { font-size: 1.5rem; }

/* ---------- reduced motion: instant, information-complete frames ---------- */

@media (prefers-reduced-motion: reduce) {
    .uv4-stage *,
    .uv4-stage *::before,
    .uv4-stage *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- forced colors: hide the stage, restore original markup ---------- */

@media (forced-colors: active) {
    .ua3-run-visual.uv4-live > .uv4-stage { display: none; }
    .ua3-run-visual.uv4-live { display: grid; }
    .ua3-run-visual.uv4-live > section.ua3-run-before { display: grid; }
    .ua3-run-visual.uv4-live > b:not(.uv4-stage) { display: grid; }
    .ua3-run-visual.uv4-live > section.ua3-run-after { display: block; }
}