/* hv-native.css — "THE CONTRAST THEATER" for #native-studio.
   Companion to js/hv-native.js. The stage is injected by JS as the first
   child of .home-native-layout and replaces the static .home-native-core and
   .home-native-network decoration (hidden only once .hv4-live is set, so the
   no-JS page keeps its original markup). Controls + readout are untouched
   and remain driven by home-page.js.

   Grounds: the ghosted legacy window stays on paper tones, deliberately
   grey and fussy; the machine-operable panel is an ink instrument. Rust is
   reserved for live machine activity: beams, ticks, results, counters,
   packets, lamps. Type floor 13 px; the two task counters are 17 px mono —
   the counter pair (1 vs 47…) is the argument. */

.home-native-studio.hv4-live .home-native-core,
.home-native-studio.hv4-live .home-native-network {
    display: none;
}

/* Let the untouched control buttons fill the taller column beside the stage. */
.home-native-studio.hv4-live .home-native-controls {
    grid-auto-rows: minmax(5.5rem, 1fr);
}

.hv4-stage {
    grid-column: 1 / 3;
    position: relative;
    display: grid;
    grid-template-columns: minmax(13rem, .34fr) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
    min-height: 24rem;
    pointer-events: none;
}

/* ---------- panel keys ---------- */

.hv4-key {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--home-muted);
}

.hv4-key i {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border: 1px solid currentColor;
}

.hv4-key--new {
    color: var(--home-muted-light);
}

.hv4-key--new i {
    border-color: var(--home-rust-light);
    background: var(--home-rust);
    border-radius: 50%;
}

.hv4-run .hv4-key--new i {
    animation: hv4-pulse 2.8s ease-in-out infinite;
}

@keyframes hv4-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(189, 67, 33, .38); }
    55% { box-shadow: 0 0 0 .34rem rgba(189, 67, 33, 0); }
}

/* ---------- task counters — the argument ---------- */

.hv4-count {
    margin: 0;
    font-family: var(--home-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.hv4-count--old {
    order: -1;
    min-height: 1.6rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--home-line);
    font-size: 1rem;
    color: var(--home-muted);
}

/* keep the key line above the counter strip, mirroring the ink panel */
.hv4-old > .hv4-key { order: -2; }

.hv4-count--old b {
    font-weight: 700;
    color: var(--home-ink);
}

.hv4-count--old.hv4-pop2 b {
    color: var(--home-rust-dark);
}

.hv4-count--new {
    color: var(--home-muted-light);
}

.hv4-count--new b {
    display: inline-block;
    min-width: 1.4em;
    font-weight: 700;
    color: var(--home-rust-light);
}

.hv4-count--new.hv4-pop {
    animation: hv4-countpop .4s var(--home-ease);
}

@keyframes hv4-countpop {
    30% { transform: translateY(-1.5px); }
}

/* ---------- LEFT · the old world, actually suffering ---------- */

.hv4-old {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    padding: 1.05rem 1.1rem;
    border: 1px dashed var(--home-line);
    background: color-mix(in srgb, var(--home-white) 30%, transparent);
    overflow: hidden;
    transition: opacity .6s var(--home-ease);
}

.hv4-win {
    position: relative;
    flex: 1;
    min-height: 11.5rem;
    border: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--home-white) 62%, transparent);
    opacity: .8;
    filter: grayscale(.45);
    overflow: hidden;
    transition: filter .6s ease, opacity .6s ease;
}

.hv4-retired .hv4-win {
    opacity: .5;
    filter: grayscale(.9);
}

.hv4-win.hv4-shake {
    animation: hv4-shake .3s linear;
}

@keyframes hv4-shake {
    20% { transform: translateX(-2px); }
    45% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
}

.hv4-winbar {
    display: flex;
    align-items: center;
    gap: .38rem;
    padding: .42rem .6rem;
    border-bottom: 1px solid var(--home-line);
}

.hv4-winbar i {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--home-line);
}

.hv4-winbar span {
    margin-left: .35rem;
    font-family: var(--home-mono);
    font-size: .8125rem;
    color: var(--home-muted);
}

.hv4-menus {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .55rem;
    padding: .32rem .6rem;
    border-bottom: 1px solid var(--home-line);
    font-size: .8125rem;
    color: var(--home-muted);
}

.hv4-menus span {
    padding: .05rem .3rem;
    transition: background .25s ease, color .25s ease;
}

.hv4-mhot {
    background: var(--home-paper-3) !important;
    color: var(--home-ink) !important;
}

.hv4-winbody {
    position: relative;
    height: calc(100% - 4.1rem);
    padding: .7rem .7rem 0;
}

.hv4-fbtn {
    display: inline-block;
    margin: 0 .4rem .5rem 0;
    padding: .26rem .55rem;
    border: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--home-paper-2) 72%, transparent);
    font-size: .8125rem;
    color: var(--home-muted);
    white-space: nowrap;
}

.hv4-fields {
    margin-top: .3rem;
    display: grid;
    gap: .45rem;
}

.hv4-fields i {
    height: .55rem;
    border: 1px solid color-mix(in srgb, var(--home-line) 55%, transparent);
    background: color-mix(in srgb, var(--home-paper-2) 80%, transparent);
}

.hv4-fields i:nth-child(2) { width: 78%; }
.hv4-fields i:nth-child(3) { width: 56%; }

/* dropdown, submenu, wizard, dialog — the obstacle course */

.hv4-menu,
.hv4-sub {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 7rem;
    padding: .22rem 0;
    border: 1px solid var(--home-line);
    background: var(--home-white);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--home-line) 42%, transparent);
    font-size: .8125rem;
    color: var(--home-muted);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 3;
}

.hv4-menu { left: 4%; top: -4px; }
.hv4-sub { left: 40%; top: 34%; min-width: 6.5rem; z-index: 4; }

.hv4-menu.hv4-open,
.hv4-sub.hv4-open {
    opacity: 1;
    transform: none;
}

.hv4-menu span,
.hv4-sub span {
    padding: .14rem .6rem;
    white-space: nowrap;
}

.hv4-wiz {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(84%, 15rem);
    padding: .6rem .7rem .65rem;
    border: 1px solid var(--home-line);
    background: var(--home-white);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--home-line) 42%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 5;
}

.hv4-wiz.hv4-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.hv4-wiz b {
    display: block;
    font-size: .8125rem;
    font-weight: 650;
    color: var(--home-ink);
}

.hv4-wizstep {
    display: block;
    margin-top: .1rem;
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-style: normal;
    color: var(--home-muted);
}

.hv4-prog {
    display: block;
    height: .5rem;
    margin: .45rem 0 .5rem;
    border: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--home-paper-2) 80%, transparent);
    overflow: hidden;
}

.hv4-prog u {
    display: block;
    height: 100%;
    background: var(--home-muted);
    transform: scaleX(0);
    transform-origin: left center;
}

.hv4-wiz > span {
    display: inline-block;
    margin-right: .4rem;
    padding: .1rem .55rem;
    border: 1px solid var(--home-line);
    font-size: .8125rem;
    color: var(--home-muted);
}

.hv4-dlg {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(76%, 13rem);
    padding: .55rem .65rem;
    border: 1px solid var(--home-line);
    background: var(--home-white);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--home-line) 42%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 6;
}

.hv4-dlg.hv4-dlg-on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.hv4-dlg b {
    display: block;
    font-size: .8125rem;
    font-weight: 650;
    color: var(--home-ink);
}

.hv4-dlg span {
    display: inline-block;
    margin: .42rem .4rem 0 0;
    padding: .12rem .55rem;
    border: 1px solid var(--home-line);
    font-size: .8125rem;
    color: var(--home-muted);
}

.hv4-cursor {
    position: absolute;
    left: 64%;
    top: 60%;
    width: 15px;
    height: 15px;
    opacity: .85;
    z-index: 7;
}

.hv4-cursor path {
    fill: var(--home-ink);
    stroke: var(--home-white);
    stroke-width: 1;
}

.hv4-strike {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right,
        transparent 48.9%, var(--home-muted) 49.6%,
        var(--home-muted) 50.4%, transparent 51.1%);
    opacity: 0;
    z-index: 8;
    pointer-events: none;
    transition: opacity .6s var(--home-ease);
}

.hv4-retired .hv4-strike { opacity: .42; }

.hv4-oldnote {
    margin: 0;
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--home-muted);
}

/* ---------- RIGHT · the native panel, alive ---------- */

.hv4-new {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    padding: 1.05rem 1.15rem .8rem;
    border: 1px solid var(--home-ink);
    background: var(--home-ink);
    color: var(--home-white);
    overflow: hidden;
}

.hv4-topstrip {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 1.6rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--home-line-dark);
}

.hv4-spark {
    flex: 1;
    min-width: 3rem;
    height: 1.35rem;
}

.hv4-spark polyline {
    fill: none;
    stroke: var(--home-rust-light);
    stroke-width: 1.1;
    opacity: .55;
    vector-effect: non-scaling-stroke;
}

.hv4-newgrid {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    gap: clamp(.9rem, 1.8vw, 1.6rem);
    min-height: 0;
}

.hv4-wires {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hv4-wires path { fill: none; }
.hv4-wrail { stroke: #4b4841; stroke-width: 1; }
.hv4-wpk { fill: var(--home-rust-light); }
.hv4-wrailscaf { stroke: var(--home-muted-light); stroke-width: 1; opacity: .8; }
.hv4-wloop { stroke: var(--home-muted-light); stroke-width: 1.2; opacity: .7; }
.hv4-wldot { fill: var(--home-rust-light); }
.hv4-wbeam { stroke: var(--home-rust-light); stroke-width: 1.7; }

/* beams over everything */
.hv4-gbeam { pointer-events: none; }

/* feeds — live supply rails */

.hv4-feeds {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55rem;
}

.hv4-feed {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .6rem;
    border: 1px solid var(--home-line-dark);
    background: #211f1b;
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--home-muted-light);
    white-space: nowrap;
}

.hv4-feed i {
    flex: 0 0 auto;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--home-line-dark);
    transition: background .25s ease, box-shadow .25s ease;
}

.hv4-feed.hv4-lamp i {
    background: var(--home-rust-light);
    box-shadow: 0 0 .45rem rgba(240, 154, 120, .55);
}

/* panel build zone + swap layers */

.hv4-panelwrap {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 15rem;
    /* subtle depth: faint grid texture */
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 250, 241, .028) 0, rgba(255, 250, 241, .028) 1px, transparent 1px, transparent 22px),
        repeating-linear-gradient(90deg, rgba(255, 250, 241, .022) 0, rgba(255, 250, 241, .022) 1px, transparent 1px, transparent 22px);
}

.hv4-lane {
    flex: 0 0 4.3rem;
}

.hv4-art {
    position: absolute;
    inset: 0;
    transition: opacity .4s var(--home-ease), transform .4s var(--home-ease);
}

.hv4-art:empty { visibility: hidden; }

.hv4-art.hv4-out {
    opacity: 0;
    transform: translateY(11px) scale(.98);
}

.hv4-orbit {
    position: absolute;
    inset: -1.15rem -1rem -.55rem -1.05rem;
    pointer-events: none;
    z-index: 3;
}

.hv4-hum {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.hv4-arttitle {
    margin: 0;
    font-size: clamp(1.25rem, 1.6vw, 1.375rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--home-white);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--home-ease), transform .45s var(--home-ease);
}

.hv4-arttitle.hv4-in {
    opacity: 1;
    transform: none;
}

/* endpoint rows — the executing surface */

.hv4-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    min-height: 0;
}

.hv4-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .6rem;
    border: 1px solid var(--home-line-dark);
    background: #1e1d19;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .4s var(--home-ease), transform .4s var(--home-ease),
        border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.hv4-row.hv4-in {
    opacity: 1;
    transform: none;
}

.hv4-row code {
    flex: 0 0 auto;
    font-family: var(--home-mono);
    font-size: .875rem;
    font-weight: 500;
    color: var(--home-white);
    white-space: nowrap;
}

.hv4-res {
    flex: 1;
    min-width: 0;
    font-family: var(--home-mono);
    font-size: .8125rem;
    text-align: right;
    color: var(--home-rust-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv4-sock {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border: 1px solid #6a655b;
    transition: background .25s ease, border-color .25s ease;
}

.hv4-tick {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 700;
    font-style: normal;
    color: var(--home-rust-light);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .3s var(--home-ease), transform .3s var(--home-ease);
}

.hv4-row.hv4-done .hv4-tick {
    opacity: 1;
    transform: scale(1);
}

/* a call lands: soft inner glow */
.hv4-row.hv4-hot {
    border-color: var(--home-rust-light);
    box-shadow: inset 0 0 .9rem rgba(240, 154, 120, .14);
}

.hv4-row.hv4-hot .hv4-sock {
    border-color: var(--home-rust-light);
    background: var(--home-rust);
}

/* software: the fifth row draws itself wireframe-first */

.hv4-row--ext {
    border-style: dashed;
    border-color: transparent;
    background: transparent;
}

.hv4-row--ext.hv4-wire {
    border-color: var(--home-muted-light);
    background: transparent;
    animation: hv4-wiredraw .8s var(--home-ease);
}

.hv4-row--ext.hv4-wire code { color: var(--home-muted-light); }

.hv4-row--ext.hv4-on {
    border-style: solid;
    border-color: var(--home-line-dark);
    background: #1e1d19;
}

@keyframes hv4-wiredraw {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* expertise: the capability block crystallizes */

.hv4-capwrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 0;
}

.hv4-cap {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .6rem .55rem;
    border: 1px solid var(--home-line-dark);
    background: #1e1d19;
    clip-path: polygon(0 12%, 7% 0, 100% 0, 100% 88%, 93% 100%, 0 100%);
    transition: border-color .45s ease, box-shadow .45s ease;
}

.hv4-cap.hv4-cryst {
    border-color: var(--home-rust);
    box-shadow: inset 0 0 1.1rem rgba(240, 154, 120, .1);
}

.hv4-slab {
    height: 1.25rem;
    border: 1px solid var(--home-line-dark);
    background: linear-gradient(90deg, #262420, #2d2a24);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .4s var(--home-ease), transform .4s var(--home-ease), border-color .3s ease;
}

.hv4-slab.hv4-in {
    opacity: 1;
    transform: none;
}

.hv4-slab.hv4-hotslab { border-color: var(--home-rust-light); }

.hv4-caplab {
    margin-top: .3rem;
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--home-muted-light);
    opacity: 0;
    transition: opacity .45s ease;
}

.hv4-caplab.hv4-in { opacity: 1; }

.hv4-handles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55rem;
}

/* handle rows: code + sock + tick on top, result on its own full line */
.hv4-row--h {
    flex-wrap: wrap;
    row-gap: .12rem;
}

.hv4-row--h .hv4-res {
    flex: 0 0 100%;
    order: 5;
    min-height: 1.05rem;
    text-align: left;
}

.hv4-row--h code { flex: 1; }

/* system: compressed rows, room for the scaffold */

.hv4-hum--sys .hv4-arttitle {
    font-size: 1.25rem;
    text-align: center;
}

.hv4-rows--sys {
    margin: .4rem 7% .9rem;
}

.hv4-rows--sys .hv4-row {
    padding: .3rem .55rem;
}

.hv4-stn {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .22rem;
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
    transition: opacity .45s var(--home-ease), transform .45s var(--home-ease);
}

.hv4-stn.hv4-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.hv4-stn i {
    width: .75rem;
    height: .75rem;
    transform: rotate(45deg);
    border: 1.5px solid var(--home-white);
    background: #211f1b;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.hv4-stn.hv4-glow i {
    border-color: var(--home-rust-light);
    box-shadow: 0 0 .5rem rgba(240, 154, 120, .4);
}

.hv4-stn span {
    padding: 0 .28rem;
    background: rgba(25, 25, 23, .9);
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--home-muted-light);
    white-space: nowrap;
}

/* ---------- agents + delivered stack ---------- */

.hv4-actors {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.hv4-ag {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .16rem;
    opacity: 0;
    will-change: transform;
    transition: opacity .5s var(--home-ease);
}

.hv4-ag.hv4-in { opacity: 1; }

.hv4-ag svg {
    width: 24px;
    height: 24px;
}

.hv4-ag svg path {
    fill: rgba(25, 25, 23, .85);
    stroke: var(--home-white);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.hv4-ag svg circle { fill: var(--home-rust-light); }

.hv4-ag span {
    font-family: var(--home-mono);
    font-size: .8125rem;
    color: var(--home-muted-light);
    background: rgba(25, 25, 23, .8);
    padding: 0 .2rem;
    transition: opacity .2s ease;
}

/* depositing: only the glyph touches the stack — never the counter text */
.hv4-ag.hv4-nolab span { opacity: 0; }

.hv4-carry {
    position: absolute;
    top: -3px;
    right: -5px;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--home-rust-light);
    box-shadow: 0 0 .4rem rgba(240, 154, 120, .6);
    opacity: 0;
    transition: opacity .2s ease;
}

.hv4-carry.hv4-carry-on { opacity: 1; }

.hv4-deliv {
    position: absolute;
    right: .3rem;
    bottom: 2.9rem;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    transition: filter .2s ease;
}

.hv4-deliv.hv4-pulse { filter: drop-shadow(0 0 .4rem rgba(240, 154, 120, .5)); }

.hv4-delivn em { font-style: normal; }
.hv4-delivn .hv4-dshort { display: none; }

.hv4-delivn {
    padding: 0 .25rem;
    background: rgba(25, 25, 23, .92);
    font-family: var(--home-mono);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--home-muted-light);
    white-space: nowrap;
}

.hv4-chips {
    display: flex;
    flex-direction: column-reverse;
    gap: .2rem;
}

.hv4-chips i {
    width: 1.7rem;
    height: .32rem;
    border: 1px solid var(--home-line-dark);
    background: #211f1b;
    opacity: .25;
    transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}

.hv4-chips i.hv4-chip-on {
    opacity: 1;
    border-color: var(--home-rust);
    background: #2c211b;
}

/* ---------- ticker ---------- */

.hv4-ticker {
    position: relative;
    z-index: 2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.55rem;
    padding-top: .55rem;
    border-top: 1px solid var(--home-line-dark);
    font-family: var(--home-mono);
    font-size: .8125rem;
    color: var(--home-muted-light);
}

.hv4-ticker b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--home-rust-light);
}

.hv4-tktext {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv4-tktext.hv4-tkin {
    animation: hv4-tk .35s var(--home-ease);
}

@keyframes hv4-tk {
    from { opacity: 0; transform: translateY(5px); }
}

/* ---------- progress thread beside the active control ---------- */

.hv4-thread {
    position: absolute;
    display: none;
    width: 2px;
    background: color-mix(in srgb, var(--home-line) 60%, transparent);
}

.hv4-thread.hv4-thread-on { display: block; }

.hv4-thread u {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--home-rust);
    transform: scaleY(0);
    transform-origin: center top;
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
    .hv4-stage { grid-column: 1 / -1; }
}

@container home-section (max-width: 75rem) {
    .hv4-stage { grid-column: auto; }
}

@container home-section (max-width: 46rem) {
    .hv4-stage {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .hv4-old { min-height: 16rem; }

    .hv4-topstrip { gap: .6rem; }

    .hv4-newgrid {
        flex-direction: column;
        gap: 1rem;
    }

    .hv4-feeds {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: .4rem;
    }

    .hv4-feed { padding: .3rem .5rem; }

    .hv4-lane { display: none; }

    .hv4-panelwrap { min-height: 17rem; }

    .hv4-rows { padding-right: 4.5rem; }

    /* system: the panel must be tall enough for the wrapped rows; the
       delivered strip owns the right edge, above the run station */
    .hv4-stage[data-hv4-state="system"] .hv4-panelwrap { min-height: 21rem; }
    .hv4-stage[data-hv4-state="system"] .hv4-deliv { bottom: 5rem; }

    .hv4-rows--sys { margin: .4rem 7% .9rem; padding-right: 4rem; }

    /* the delivered strip owns the right edge; keep its label narrow */
    .hv4-delivn .hv4-dlong { display: none; }
    .hv4-delivn .hv4-dshort { display: inline; }

    /* tight columns: every row carries its result on a full-width line */
    .hv4-row { flex-wrap: wrap; row-gap: .12rem; }
    .hv4-row .hv4-res { flex: 0 0 100%; order: 5; min-height: 1.05rem; text-align: left; }
    .hv4-row code { flex: 1; }

    .hv4-capwrap {
        flex-wrap: wrap;
        gap: .9rem;
    }

    .hv4-handles { padding-right: 3.2rem; }

    .hv4-deliv { bottom: 2.6rem; }

    .hv4-orbit { inset: -1rem -.75rem -.9rem -.75rem; }
}

/* ---------- reduced motion: composed, instant ---------- */

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

/* ---------- forced colors: fall back to the original static markup ---------- */

@media (forced-colors: active) {
    .hv4-stage { display: none; }

    .home-native-studio.hv4-live .home-native-core { display: flex; }
    .home-native-studio.hv4-live .home-native-network { display: grid; }
}