/* EQUIPMENT WIDTH FIX - REVISION 44 - 2026-09-09 */


    .operations-command-page,
    .operations-command-page * {
        box-sizing: border-box;
    }

    .operations-command-page {
        --ops-blue: #38bdf8;
        --ops-blue-soft: #7dd3fc;
        --ops-green: #86efac;
        --ops-gold: #facc15;
        --ops-red: #f87171;
        --ops-border: rgba(148, 163, 184, .12);
        --ops-surface: rgba(15, 23, 42, .26);
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .operations-command-container {
        width: 100%;
        max-width: 1460px;
        min-width: 0;
        margin: 0 auto;
        padding: 0 30px 48px;
    }


    /* ==========================================================
       BREADCRUMB
       ========================================================== */

    .operations-command-page
    .facility-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 14px;
        font-size: 9px !important;
        line-height: 1.35 !important;
    }

    .operations-command-page
    .facility-breadcrumb a,
    .operations-command-page
    .facility-breadcrumb > span {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    .operations-command-page
    .facility-breadcrumb a {
        color: #8fbaff;
        font-weight: 700;
        text-decoration: none;
    }

    .operations-command-page
    .facility-breadcrumb a:hover {
        color: #bfdbfe;
    }


    /* ==========================================================
       HERO
       ========================================================== */

    .operations-command-hero {
        position: relative;
        display: grid;
        grid-template-columns:
            minmax(0, 1.42fr)
            minmax(350px, .58fr);
        gap: 20px;
        min-width: 0;
        padding: 25px;
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .24);
        border-radius: 16px;
        background:
            radial-gradient(
                circle at 7% 0,
                rgba(56, 189, 248, .18),
                transparent 31%
            ),
            radial-gradient(
                circle at 98% 100%,
                rgba(34, 197, 94, .10),
                transparent 28%
            ),
            linear-gradient(
                125deg,
                rgba(5, 31, 52, .94),
                rgba(15, 23, 42, .56) 57%,
                rgba(5, 43, 48, .58)
            );
        box-shadow:
            inset 0 3px 0 rgba(56, 189, 248, .30),
            0 18px 38px rgba(2, 6, 23, .16);
    }

    .operations-command-hero::before {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                105deg,
                transparent 0 73%,
                rgba(125, 211, 252, .035) 73% 74%,
                transparent 74%
            );
        content: "";
        pointer-events: none;
    }

    .operations-command-hero-main,
    .operations-processing-pulse {
        position: relative;
        z-index: 1;
        min-width: 0;
    }

    .operations-command-hero-main {
        display: flex;
        align-items: flex-start;
        gap: 22px;
    }


    /* hero processing emblem */

    .operations-command-identity {
        position: relative;
        display: flex;
        flex: 0 0 86px;
        width: 86px;
        height: 104px;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        padding: 9px 7px 7px;
        overflow: visible;
        border: 1px solid rgba(125, 211, 252, .32);
        border-radius: 13px 13px 4px 13px;
        background:
            linear-gradient(
                155deg,
                rgba(14, 165, 233, .18),
                rgba(15, 23, 42, .49)
            );
        box-shadow:
            inset 0 0 0 4px rgba(15, 23, 42, .20),
            inset 0 3px 0 rgba(56, 189, 248, .20),
            0 12px 25px rgba(2, 6, 23, .19);
    }

    .operations-engine-emblem {
        position: relative;
        display: block;
        width: 68px;
        height: 73px;
    }

    .operations-engine-emblem > i {
        position: absolute;
        display: block;
        font-style: normal;
    }

    .engine-source {
        top: 18px;
        left: 1px;
        width: 20px;
        height: 35px;
        border: 2px solid #7dd3fc;
        border-radius: 9px 9px 4px 4px;
        background: rgba(14, 165, 233, .07);
    }

    .engine-source::before {
        position: absolute;
        top: -3px;
        left: 4px;
        width: 8px;
        height: 3px;
        border: 1px solid #7dd3fc;
        border-radius: 50%;
        content: "";
    }

    .engine-source::after {
        position: absolute;
        right: 2px;
        bottom: 2px;
        left: 2px;
        height: 57%;
        border-radius: 0 0 2px 2px;
        background:
            linear-gradient(
                180deg,
                rgba(34, 197, 94, .55),
                rgba(21, 128, 61, .72)
            );
        content: "";
    }

    .engine-pipe {
        top: 36px;
        left: 20px;
        width: 17px;
        height: 2px;
        background:
            linear-gradient(
                90deg,
                #38bdf8,
                #7dd3fc
            );
    }

    .engine-pump {
        top: 27px;
        left: 34px;
        width: 20px;
        height: 20px;
        border: 2px solid #7dd3fc;
        border-radius: 50%;
    }

    .engine-pump::before {
        position: absolute;
        inset: 4px;
        border: 1px solid rgba(125, 211, 252, .55);
        border-radius: 50%;
        content: "";
    }

    .engine-meter {
        top: 2px;
        left: 38px;
        display: grid !important;
        width: 23px;
        height: 23px;
        place-items: center;
        border: 2px solid rgba(74, 222, 128, .55);
        border-radius: 50%;
        background: rgba(34, 197, 94, .08);
        color: #86efac;
        font-size: 8px;
        font-weight: 950;
    }

    .engine-event {
        right: 0;
        bottom: 1px;
        width: 25px;
        height: 32px;
        border: 2px solid rgba(251, 191, 36, .52);
        border-radius: 3px;
        background: rgba(245, 158, 11, .07);
    }

    .engine-event > b {
        position: absolute;
        left: 5px;
        width: 11px;
        height: 1px;
        background: rgba(253, 230, 138, .48);
    }

    .engine-event > b:first-child {
        top: 9px;
    }

    .engine-event > b:nth-child(2) {
        top: 15px;
    }

    .engine-event > em {
        position: absolute;
        right: -5px;
        bottom: -5px;
        display: grid;
        width: 16px;
        height: 16px;
        place-items: center;
        border: 2px solid #102238;
        border-radius: 50%;
        background: #22c55e;
        color: #052e16;
        font-size: 7px;
        font-style: normal;
        font-weight: 950;
    }

    .operations-command-identity > small {
        margin-top: 6px;
        color: #86efac;
        font-size: 5px;
        font-weight: 950;
        letter-spacing: .10em;
        white-space: nowrap;
    }


    .operations-command-hero-copy {
        width: 100%;
        min-width: 0;
    }

    .operations-command-eyebrow {
        display: block;
        margin-bottom: 6px;
        color: #7dd3fc;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .11em;
    }

    .operations-command-title-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 13px;
    }

    .operations-command-title-row h1 {
        margin: 0;
        color: #f8fafc;
        font-size: clamp(32px, 3.6vw, 46px);
        line-height: 1.02;
        letter-spacing: -.025em;
        text-shadow:
            0 4px 18px rgba(2, 6, 23, .22);
    }

    .operations-command-status,
    .operations-processing-state,
    .operations-module-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid rgba(148, 163, 184, .17);
        border-radius: 999px;
        background: rgba(148, 163, 184, .06);
        color: #cbd5e1;
        font-size: 8px;
        font-weight: 900;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .operations-command-status {
        min-height: 27px;
        padding: 0 10px;
    }

    .operations-command-status > i,
    .operations-processing-state > i,
    .operations-module-status > i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .operations-status-healthy,
    .operations-state-healthy,
    .operations-command-page
    .operations-status-healthy {
        border-color: rgba(34, 197, 94, .27) !important;
        background: rgba(34, 197, 94, .08) !important;
        color: #86efac !important;
    }

    .operations-status-warning,
    .operations-state-warning,
    .operations-command-page
    .operations-status-warning {
        border-color: rgba(245, 158, 11, .28) !important;
        background: rgba(245, 158, 11, .08) !important;
        color: #fcd34d !important;
    }

    .operations-status-critical,
    .operations-state-critical,
    .operations-command-page
    .operations-status-critical {
        border-color: rgba(248, 113, 113, .28) !important;
        background: rgba(248, 113, 113, .08) !important;
        color: #fca5a5 !important;
    }

    .operations-status-neutral,
    .operations-state-neutral,
    .operations-command-page
    .operations-status-neutral {
        border-color: rgba(148, 163, 184, .18) !important;
        background: rgba(148, 163, 184, .07) !important;
        color: #cbd5e1 !important;
    }

    .operations-command-hero-copy > p {
        max-width: 850px;
        margin: 11px 0 0;
        color: #c1cfdd;
        font-size: 11.5px;
        line-height: 1.58;
    }


    /* hero actions */

    .operations-command-hero-actions {
        display: grid;
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(210px, .92fr);
        gap: 8px;
        width: 100%;
        max-width: 720px;
        margin-top: 14px;
    }

    .operations-processing-action,
    .operations-facility-action {
        position: relative;
        display: grid;
        grid-template-columns:
            40px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 9px;
        min-width: 0;
        min-height: 60px;
        padding: 8px 10px;
        overflow: hidden;
        border-radius: 9px 9px 3px 9px;
        color: inherit;
        text-decoration: none;
        transition:
            transform .16s ease,
            border-color .16s ease,
            background .16s ease;
    }

    .operations-processing-action {
        border: 1px solid rgba(125, 211, 252, .40);
        background:
            linear-gradient(
                145deg,
                rgba(2, 132, 199, .80),
                rgba(3, 105, 161, .67)
            );
        box-shadow:
            inset 0 3px 0 rgba(186, 230, 253, .48),
            0 10px 22px rgba(2, 132, 199, .12);
    }

    .operations-facility-action {
        border: 1px solid rgba(148, 163, 184, .17);
        background:
            linear-gradient(
                145deg,
                rgba(30, 41, 59, .42),
                rgba(15, 23, 42, .34)
            );
    }

    .operations-processing-action:hover,
    .operations-facility-action:hover {
        transform: translateY(-1px);
        color: inherit;
    }

    .operations-processing-action:hover {
        border-color: rgba(186, 230, 253, .62);
    }

    .operations-facility-action:hover {
        border-color: rgba(56, 189, 248, .31);
        background: rgba(14, 165, 233, .06);
    }

    .operations-processing-action-art,
    .operations-facility-action-art {
        position: relative;
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(224, 242, 254, .24);
        border-radius: 8px 8px 3px 8px;
        background:
            linear-gradient(
                145deg,
                rgba(15, 23, 42, .25),
                rgba(14, 116, 144, .20)
            );
    }

    .pa-source,
    .pa-route,
    .pa-event,
    .operations-facility-action-art > i,
    .operations-facility-action-art > b,
    .operations-facility-action-art > em {
        position: absolute;
        display: block;
        font-style: normal;
    }

    .pa-source {
        left: 5px;
        bottom: 6px;
        width: 12px;
        height: 22px;
        border: 2px solid #bae6fd;
        border-radius: 7px 7px 3px 3px;
    }

    .pa-route {
        left: 15px;
        bottom: 15px;
        width: 10px;
        height: 2px;
        background: #bae6fd;
    }

    .pa-event {
        right: 4px;
        bottom: 6px;
        display: grid;
        width: 16px;
        height: 22px;
        place-items: center;
        border: 2px solid #dbeafe;
        border-radius: 3px;
        color: #dbeafe;
        font-size: 9px;
        font-weight: 950;
    }

    .operations-facility-action-art > i {
        left: 5px;
        bottom: 6px;
        width: 17px;
        height: 16px;
        border: 2px solid #7dd3fc;
    }

    .operations-facility-action-art > i::before {
        position: absolute;
        top: -6px;
        left: -2px;
        border-right: 9px solid transparent;
        border-bottom: 6px solid #7dd3fc;
        content: "";
    }

    .operations-facility-action-art > b {
        right: 6px;
        bottom: 6px;
        width: 8px;
        height: 23px;
        border: 2px solid #7dd3fc;
        border-radius: 5px 5px 2px 2px;
    }

    .operations-facility-action-art > em {
        top: 5px;
        left: 11px;
        width: 13px;
        height: 13px;
        border: 2px solid rgba(74, 222, 128, .48);
        border-radius: 50%;
    }

    .operations-command-hero-actions em,
    .operations-command-hero-actions strong,
    .operations-command-hero-actions small {
        display: block;
    }

    .operations-command-hero-actions
    > a > span:nth-child(2) > em {
        margin-bottom: 3px;
        color: #bae6fd;
        font-size: 6px;
        font-style: normal;
        font-weight: 950;
        letter-spacing: .09em;
    }

    .operations-facility-action
    > span:nth-child(2) > em {
        color: #8fbaff !important;
    }

    .operations-command-hero-actions strong {
        color: #f8fafc;
        font-size: 9.5px;
    }

    .operations-command-hero-actions small {
        margin-top: 2px;
        color: #c4d1df;
        font-size: 7.4px;
        line-height: 1.3;
    }

    .operations-command-hero-actions > a > b {
        color: #e0f2fe;
        font-size: 12px;
    }


    /* ==========================================================
       PROCESSING PULSE
       ========================================================== */

    .operations-processing-pulse {
        align-self: stretch;
        padding: 17px;
        border: 1px solid rgba(74, 222, 128, .20);
        border-radius: 12px;
        background:
            linear-gradient(
                155deg,
                rgba(5, 46, 43, .30),
                rgba(15, 23, 42, .44)
            );
        box-shadow:
            inset 0 3px 0 rgba(74, 222, 128, .30);
    }

    .operations-processing-pulse-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .operations-processing-pulse-heading
    > div > span,
    .operations-processing-pulse-heading
    > div > strong {
        display: block;
    }

    .operations-processing-pulse-heading
    > div > span {
        color: #7dd3fc;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .08em;
    }

    .operations-processing-pulse-heading
    > div > strong {
        margin-top: 4px;
        color: #f8fafc;
        font-size: 10px;
    }

    .operations-processing-state {
        min-height: 24px;
        max-width: 160px;
        padding: 0 8px;
        overflow: hidden;
        font-size: 6.5px;
        text-overflow: ellipsis;
    }

    .operations-processing-flow {
        display: grid;
        grid-template-columns:
            42px auto 42px auto 42px auto 42px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 13px 0;
        padding: 10px 8px;
        border: 1px solid rgba(56, 189, 248, .10);
        border-radius: 9px;
        background: rgba(15, 23, 42, .24);
    }

    .operations-processing-flow > span {
        position: relative;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgba(56, 189, 248, .22);
        border-radius: 10px;
        background: rgba(14, 165, 233, .06);
        color: #7dd3fc;
        font-size: 11px;
        font-weight: 950;
    }

    .operations-processing-flow
    > span > small {
        position: absolute;
        right: 0;
        bottom: -11px;
        left: 0;
        color: #8296aa;
        font-size: 5px;
        font-weight: 900;
        text-align: center;
    }

    .operations-processing-flow > em {
        color: rgba(125, 211, 252, .60);
        font-size: 10px;
        font-style: normal;
    }

    .pulse-tank > i {
        width: 17px;
        height: 27px;
        border: 2px solid #7dd3fc;
        border-radius: 8px 8px 3px 3px;
    }

    .pulse-pump > i {
        width: 20px;
        height: 20px;
        border: 2px solid #7dd3fc;
        border-radius: 50%;
    }

    .pulse-meter {
        border-color: rgba(74, 222, 128, .28) !important;
        background: rgba(34, 197, 94, .055) !important;
        color: #86efac !important;
    }

    .pulse-event {
        border-color: rgba(251, 191, 36, .28) !important;
        background: rgba(245, 158, 11, .055) !important;
        color: #fbbf24 !important;
    }

    .operations-processing-pulse-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .operations-processing-pulse-grid > div {
        min-width: 0;
        min-height: 58px;
        padding: 9px 10px;
        border: 1px solid rgba(148, 163, 184, .11);
        border-radius: 8px;
        background: rgba(15, 23, 42, .28);
    }

    .operations-processing-pulse-grid span,
    .operations-processing-pulse-grid strong,
    .operations-processing-pulse-grid small {
        display: block;
    }

    .operations-processing-pulse-grid span {
        color: #7691a7;
        font-size: 6.5px;
        font-weight: 900;
        letter-spacing: .045em;
    }

    .operations-processing-pulse-grid strong {
        margin-top: 5px;
        color: #e2e8f0;
        font-size: 10px;
        overflow-wrap: anywhere;
    }

    .operations-processing-pulse-grid small {
        margin-top: 3px;
        color: #9fb0c4;
        font-size: 7px;
        line-height: 1.3;
    }

    .operations-processing-pulse-grid
    .processed strong,
    .operations-processing-pulse-grid
    .healthy strong {
        color: #86efac;
    }

    .operations-processing-pulse-grid
    .warning strong {
        color: #fcd34d;
    }


    /* ==========================================================
       INSTRUMENT STRIP
       ========================================================== */

    .operations-command-instruments {
        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 1px;
        margin-top: 11px;
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .18);
        border-radius: 10px;
        background: rgba(56, 189, 248, .08);
    }

    .operations-command-instruments
    .instrument {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr) auto;
        gap: 4px 8px;
        min-width: 0;
        min-height: 88px;
        padding: 15px 16px;
        background:
            linear-gradient(
                155deg,
                rgba(14, 165, 233, .08),
                rgba(15, 23, 42, .78)
            );
    }

    .operations-command-instruments
    .instrument > span {
        color: #b5c4d6;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .045em;
    }

    .operations-command-instruments
    .instrument > strong {
        color: #bae6fd;
        font-size: 14px;
        line-height: 1.15;
    }

    .operations-command-instruments
    .instrument > strong > small {
        margin-left: 3px;
        color: #a9b7c8;
        font-size: 7px;
    }

    .operations-command-instruments
    .instrument > small {
        color: #a9b7c8;
        font-size: 8px;
        line-height: 1.35;
    }

    .operations-command-instruments
    .instrument > i {
        grid-column: 1 / -1;
        display: block;
        height: 6px;
        margin-top: 2px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(148, 163, 184, .15);
    }

    .operations-command-instruments
    .instrument > i > b {
        display: block;
        height: 100%;
        border-radius: inherit;
        background:
            linear-gradient(
                90deg,
                #0284c7,
                #38bdf8
            );
    }

    .operations-command-instruments
    .instrument.processing > strong {
        color: #86efac;
    }

    .operations-command-instruments
    .instrument.processing > i > b {
        background:
            linear-gradient(
                90deg,
                #15803d,
                #4ade80
            );
    }

    .operations-command-instruments
    .instrument.storage > strong {
        color: #7dd3fc;
    }

    .operations-command-instruments
    .instrument.equipment > strong {
        color: #dbeafe;
    }

    .operations-command-instruments
    .instrument.warning > strong {
        color: #fcd34d;
    }

    .operations-command-instruments
    .instrument.warning > i > b {
        background:
            linear-gradient(
                90deg,
                #b45309,
                #f59e0b
            );
    }

    .operations-command-instruments
    .instrument.healthy > strong {
        color: #86efac;
    }

    .operations-command-instruments
    .instrument.healthy > i > b {
        background:
            linear-gradient(
                90deg,
                #15803d,
                #4ade80
            );
    }


    /* ==========================================================
       SECTION HEADING
       ========================================================== */

    .operations-command-section-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 22px;
        margin: 26px 0 10px;
    }

    .operations-command-section-heading
    > div > span {
        display: block;
        margin-bottom: 4px;
        color: #38bdf8;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .09em;
    }

    .operations-command-section-heading h2 {
        margin: 0;
        color: #f8fafc;
        font-size: 19px;
    }

    .operations-command-section-heading
    > p {
        max-width: 610px;
        margin: 0;
        color: #b8c7d9;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.5;
        text-align: right;
    }


    /* ==========================================================
       PROCESSING ENGINE
       ========================================================== */

    .operations-processing-engine {
        position: relative;
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            39px
            minmax(0, 1fr)
            39px
            minmax(0, 1fr)
            39px
            minmax(0, 1.08fr);
        gap: 8px;
        align-items: stretch;
        min-width: 0;
        padding: 13px;
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .25);
        border-radius: 17px;
        background:
            radial-gradient(
                circle at 7% 12%,
                rgba(56, 189, 248, .08),
                transparent 24%
            ),
            radial-gradient(
                circle at 94% 90%,
                rgba(245, 158, 11, .065),
                transparent 25%
            ),
            linear-gradient(
                180deg,
                rgba(7, 36, 57, .50),
                rgba(15, 23, 42, .35) 48%,
                rgba(15, 23, 42, .50)
            );
        box-shadow:
            0 22px 50px rgba(2, 6, 23, .18);
    }

    .processing-engine-stage {
        position: relative;
        display: grid;
        grid-template-rows:
            25px 125px minmax(0, 1fr);
        min-width: 0;
        min-height: 325px;
        padding: 12px;
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .20);
        border-radius: 12px 12px 4px 12px;
        background:
            linear-gradient(
                155deg,
                rgba(14, 165, 233, .10),
                rgba(15, 23, 42, .53)
            );
        color: inherit;
        text-decoration: none;
        box-shadow:
            0 13px 28px rgba(2, 6, 23, .16);
        transition:
            transform .16s ease,
            border-color .16s ease,
            background .16s ease;
    }

    .processing-engine-clickable {
        cursor: pointer;
    }

    .processing-engine-clickable:hover {
        z-index: 5;
        transform: translateY(-2px);
        color: inherit;
    }

    .source-stage.processing-engine-clickable:hover,
    .movement-stage.processing-engine-clickable:hover {
        border-color: rgba(125, 211, 252, .48);
        background:
            linear-gradient(
                155deg,
                rgba(14, 165, 233, .15),
                rgba(15, 23, 42, .57)
            );
        box-shadow:
            inset 0 3px 0 rgba(56, 189, 248, .35),
            0 15px 30px rgba(2, 6, 23, .18);
    }

    .measurement-stage.processing-engine-clickable:hover {
        border-color: rgba(74, 222, 128, .48);
        background:
            linear-gradient(
                155deg,
                rgba(34, 197, 94, .13),
                rgba(15, 23, 42, .57)
            );
        box-shadow:
            inset 0 3px 0 rgba(74, 222, 128, .38),
            0 15px 30px rgba(2, 6, 23, .18);
    }

    .processing-event-stage:hover {
        z-index: 6;
        transform: translateY(-3px);
        border-color: rgba(253, 224, 71, .60);
        background:
            linear-gradient(
                155deg,
                rgba(245, 158, 11, .18),
                rgba(15, 23, 42, .59)
            );
        box-shadow:
            inset 0 3px 0 rgba(253, 224, 71, .60),
            0 17px 34px rgba(120, 83, 8, .16);
        color: inherit;
    }

    .movement-stage {
        border-color: rgba(56, 189, 248, .22);
    }

    .measurement-stage {
        border-color: rgba(74, 222, 128, .22);
        background:
            linear-gradient(
                155deg,
                rgba(34, 197, 94, .07),
                rgba(15, 23, 42, .53)
            );
    }

    .processing-event-stage {
        border-color: rgba(251, 191, 36, .34);
        background:
            linear-gradient(
                155deg,
                rgba(245, 158, 11, .12),
                rgba(15, 23, 42, .54)
            );
        box-shadow:
            inset 0 3px 0 rgba(251, 191, 36, .48),
            0 13px 28px rgba(2, 6, 23, .17);
    }

    .processing-engine-number {
        color: #7dd3fc;
        font-size: 9px;
        font-weight: 950;
        letter-spacing: .08em;
    }

    .processing-event-stage
    .processing-engine-number {
        color: #fbbf24;
    }

    .processing-engine-tag {
        position: absolute;
        top: 9px;
        right: 9px;
        max-width: calc(100% - 43px);
        padding: 3px 6px;
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .22);
        border-radius: 999px;
        background: rgba(14, 165, 233, .07);
        color: #7dd3fc;
        font-size: 5.5px;
        font-weight: 950;
        letter-spacing: .045em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .processing-engine-tag.live {
        border-color: rgba(251, 191, 36, .30);
        background: rgba(245, 158, 11, .10);
        color: #fde68a;
    }

    .processing-engine-picture {
        position: relative;
        width: 170px;
        max-width: 100%;
        height: 118px;
        align-self: center;
        justify-self: center;
    }

    .processing-engine-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        padding-top: 9px;
        border-top:
            1px dashed rgba(148, 163, 184, .19);
    }

    .processing-engine-copy > span {
        color: #aebdd0;
        font-size: 6.5px;
        font-weight: 900;
        letter-spacing: .06em;
    }

    .processing-engine-copy h3 {
        margin: 3px 0 0;
        color: #f8fafc;
        font-size: 13px;
        line-height: 1.15;
    }

    .processing-engine-copy > strong {
        display: block;
        margin-top: 7px;
        color: #bae6fd;
        font-size: 18px;
        font-weight: 950;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .processing-event-stage
    .processing-engine-copy > strong {
        color: #fde68a;
    }

    .processing-engine-copy
    > strong > small {
        color: #aebdd0;
        font-size: 7px;
        font-weight: 800;
    }

    .processing-engine-copy p {
        margin: 7px 0 0;
        color: #cbd5e1;
        font-size: 8px;
        font-weight: 600;
        line-height: 1.42;
    }

    .processing-engine-open {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr) auto;
        align-items: center;
        gap: 3px 8px;
        margin-top: auto;
        padding-top: 9px;
        color: #7dd3fc;
        font-size: 7.5px;
        font-style: normal;
        font-weight: 900;
        text-decoration: none;
        transition:
            color .16s ease,
            transform .16s ease;
    }

    .processing-engine-open > small {
        grid-column: 1;
        display: block;
        color: #8ca1b6;
        font-size: 5.8px;
        font-weight: 750;
        line-height: 1.25;
    }

    .processing-engine-open > b {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        color: currentColor;
        font-size: 11px;
        transition: transform .16s ease;
    }

    .processing-engine-open-source,
    .processing-engine-open-route {
        color: #7dd3fc;
    }

    .processing-engine-open-measurement {
        color: #86efac;
    }

    .processing-engine-open-primary {
        color: #fbbf24;
    }

    .processing-engine-clickable:hover
    .processing-engine-open > b,
    .processing-event-stage:hover
    .processing-engine-open > b {
        transform: translateX(3px);
    }

    .processing-event-stage
    .processing-engine-open {
        font-size: 8px;
        font-weight: 950;
    }

    .processing-engine-transfer {
        position: relative;
        display: grid;
        grid-template-rows: 1fr 18px 1fr;
        min-width: 0;
        place-items: center;
        color: #7dd3fc;
    }

    .processing-engine-transfer > span {
        align-self: end;
        margin-bottom: 8px;
        color: #8fb4ce;
        font-size: 5.5px;
        font-weight: 900;
        letter-spacing: .04em;
        text-align: center;
    }

    .processing-engine-transfer > i {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 1px;
        background:
            linear-gradient(
                90deg,
                rgba(56, 189, 248, .10),
                rgba(56, 189, 248, .55),
                rgba(56, 189, 248, .10)
            );
    }

    .processing-engine-transfer > b {
        z-index: 2;
        display: grid;
        width: 18px;
        height: 18px;
        place-items: center;
        border: 1px solid rgba(125, 211, 252, .34);
        border-radius: 50%;
        background: #0d2235;
        color: #7dd3fc;
        font-size: 9px;
    }

    .processing-engine-transfer-event > i {
        background:
            linear-gradient(
                90deg,
                rgba(56, 189, 248, .10),
                rgba(251, 191, 36, .60),
                rgba(251, 191, 36, .12)
            );
    }

    .processing-engine-transfer-event > b {
        border-color: rgba(251, 191, 36, .34);
        color: #fbbf24;
    }


    /* source picture */

    .source-silo,
    .source-level,
    .source-label,
    .movement-source,
    .movement-pipe,
    .movement-pump,
    .movement-valve,
    .measurement-meter,
    .measurement-reading,
    .measurement-signal,
    .event-document,
    .event-volume {
        position: absolute;
        display: block;
    }

    .source-silo {
        top: 10px;
        left: 29px;
        width: 72px;
        height: 92px;
        overflow: hidden;
        border: 3px solid rgba(125, 211, 252, .48);
        border-radius: 36px 36px 9px 9px;
        background:
            linear-gradient(
                90deg,
                rgba(14, 165, 233, .06),
                rgba(125, 211, 252, .13),
                rgba(14, 165, 233, .05)
            );
    }

    .source-silo::before {
        position: absolute;
        top: 8px;
        right: 8px;
        left: 8px;
        height: 1px;
        background: rgba(186, 230, 253, .26);
        box-shadow:
            0 19px 0 rgba(186, 230, 253, .18),
            0 38px 0 rgba(186, 230, 253, .13);
        content: "";
    }

    .source-silo > i {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 61%;
        background:
            linear-gradient(
                180deg,
                rgba(34, 197, 94, .54),
                rgba(21, 128, 61, .76)
            );
    }

    .source-silo > b {
        position: absolute;
        z-index: 2;
        top: 45px;
        right: 0;
        left: 0;
        color: #dcfce7;
        font-size: 8px;
        text-align: center;
    }

    .source-level {
        top: 24px;
        right: 20px;
        width: 19px;
        height: 58px;
        border: 1px solid rgba(74, 222, 128, .32);
        border-radius: 8px;
    }

    .source-level > i {
        position: absolute;
        right: 3px;
        bottom: 3px;
        left: 3px;
        height: 65%;
        border-radius: 5px;
        background: rgba(74, 222, 128, .48);
    }

    .source-label {
        right: 0;
        bottom: 0;
        left: 0;
        color: #86efac;
        font-size: 6px;
        font-weight: 950;
        letter-spacing: .06em;
        text-align: center;
    }


    /* movement picture */

    .movement-source {
        top: 40px;
        left: 6px;
        width: 28px;
        height: 46px;
        border: 2px solid rgba(125, 211, 252, .38);
        border-radius: 14px 14px 4px 4px;
    }

    .movement-pipe {
        top: 61px;
        height: 3px;
        background: rgba(56, 189, 248, .46);
    }

    .movement-pipe.first {
        left: 32px;
        width: 28px;
    }

    .movement-pipe.second {
        left: 96px;
        width: 34px;
    }

    .movement-pump {
        top: 43px;
        left: 58px;
        width: 40px;
        height: 40px;
        border: 3px solid rgba(56, 189, 248, .58);
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                rgba(56, 189, 248, .18),
                rgba(15, 23, 42, .36)
            );
    }

    .movement-pump > i {
        position: absolute;
        inset: 8px;
        border: 2px solid rgba(125, 211, 252, .42);
        border-radius: 50%;
    }

    .movement-pump > b {
        position: absolute;
        top: 6px;
        left: 17px;
        width: 3px;
        height: 25px;
        transform: rotate(38deg);
        background: #7dd3fc;
    }

    .movement-valve {
        top: 47px;
        right: 4px;
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 2px solid rgba(251, 191, 36, .35);
        border-radius: 50%;
        color: #fbbf24;
        font-size: 18px;
    }


    /* measurement picture */

    .measurement-meter {
        top: 24px;
        left: 5px;
        width: 68px;
        height: 68px;
        border: 5px double rgba(74, 222, 128, .54);
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                rgba(34, 197, 94, .12),
                rgba(15, 23, 42, .42)
            );
    }

    .measurement-meter > i {
        position: absolute;
        inset: 9px;
        border: 1px dashed rgba(134, 239, 172, .34);
        border-radius: 50%;
    }

    .measurement-meter > b {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #86efac;
        font-size: 17px;
    }

    .measurement-reading {
        top: 19px;
        right: 4px;
        width: 72px;
        height: 81px;
        border: 2px solid rgba(125, 211, 252, .38);
        border-radius: 5px;
        background: rgba(14, 165, 233, .07);
    }

    .measurement-reading > i {
        position: absolute;
        left: 10px;
        width: 38px;
        height: 2px;
        background: rgba(125, 211, 252, .30);
    }

    .measurement-reading > i:first-child {
        top: 22px;
    }

    .measurement-reading > i:nth-child(2) {
        top: 33px;
    }

    .measurement-reading > strong {
        position: absolute;
        right: 0;
        bottom: 11px;
        left: 0;
        color: #bae6fd;
        font-size: 7px;
        text-align: center;
    }

    .measurement-signal {
        right: -2px;
        bottom: 1px;
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border: 3px solid #0f172a;
        border-radius: 50%;
        background: #22c55e;
        color: #052e16;
        font-size: 10px;
        font-weight: 950;
    }


    /* event picture */

    .event-document {
        top: 8px;
        left: 50%;
        width: 78px;
        height: 96px;
        transform: translateX(-50%) rotate(-2deg);
        border: 3px solid rgba(251, 191, 36, .50);
        border-radius: 5px;
        background:
            linear-gradient(
                145deg,
                rgba(245, 158, 11, .12),
                rgba(15, 23, 42, .42)
            );
        box-shadow:
            7px 7px 0 rgba(245, 158, 11, .055);
    }

    .event-document::before {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 19px;
        height: 18px;
        border-left: 2px solid rgba(251, 191, 36, .40);
        border-bottom: 2px solid rgba(251, 191, 36, .40);
        background: #172b3d;
        clip-path:
            polygon(
                0 0,
                100% 100%,
                0 100%
            );
        content: "";
    }

    .event-document > i {
        position: absolute;
        left: 12px;
        width: 38px;
        height: 2px;
        background: rgba(253, 230, 138, .32);
    }

    .event-document > i:first-child {
        top: 29px;
    }

    .event-document > i:nth-child(2) {
        top: 41px;
    }

    .event-document > i:nth-child(3) {
        top: 53px;
    }

    .event-document > b {
        position: absolute;
        top: 9px;
        left: 11px;
        color: #fde68a;
        font-size: 7px;
        font-weight: 950;
        letter-spacing: .09em;
    }

    .event-document > em {
        position: absolute;
        right: -6px;
        bottom: -6px;
        display: grid;
        width: 29px;
        height: 29px;
        place-items: center;
        border: 4px solid #0f172a;
        border-radius: 50%;
        background: #22c55e;
        color: #052e16;
        font-size: 10px;
        font-style: normal;
        font-weight: 950;
    }

    .event-volume {
        right: 2px;
        bottom: 0;
        padding: 5px 7px;
        border: 1px solid rgba(251, 191, 36, .25);
        border-radius: 6px;
        background: rgba(245, 158, 11, .10);
        color: #fde68a;
        font-size: 8px;
        font-weight: 950;
        text-align: center;
    }

    .event-volume > small {
        display: block;
        margin-top: 2px;
        font-size: 5px;
    }


    /* ==========================================================
       ACCOUNTING HANDOFF
       ========================================================== */

    .operations-accounting-handoff {
        display: grid;
        grid-template-columns:
            240px minmax(0, 1fr) 180px;
        gap: 18px;
        align-items: center;
        margin-top: 11px;
        padding: 15px 17px;
        border-top: 1px solid rgba(74, 222, 128, .20);
        border-bottom: 1px solid rgba(251, 191, 36, .20);
        background:
            linear-gradient(
                90deg,
                rgba(14, 165, 233, .055),
                rgba(34, 197, 94, .055),
                rgba(245, 158, 11, .055)
            );
    }

    .operations-accounting-handoff-art {
        position: relative;
        height: 74px;
    }

    .handoff-event-file,
    .handoff-line,
    .handoff-control,
    .handoff-ledger {
        position: absolute;
        display: block;
    }

    .handoff-event-file {
        top: 5px;
        left: 2px;
        width: 44px;
        height: 59px;
        border: 2px solid rgba(125, 211, 252, .42);
        border-radius: 4px;
        background: rgba(14, 165, 233, .08);
    }

    .handoff-event-file > i {
        position: absolute;
        left: 8px;
        width: 22px;
        height: 2px;
        background: rgba(125, 211, 252, .30);
    }

    .handoff-event-file > i:first-child {
        top: 20px;
    }

    .handoff-event-file > i:nth-child(2) {
        top: 29px;
    }

    .handoff-event-file > i:nth-child(3) {
        top: 38px;
    }

    .handoff-event-file > b {
        position: absolute;
        top: 6px;
        left: 7px;
        color: #7dd3fc;
        font-size: 6px;
    }

    .handoff-line {
        top: 36px;
        left: 46px;
        width: 50px;
        height: 2px;
        background:
            linear-gradient(
                90deg,
                #38bdf8,
                #4ade80
            );
    }

    .handoff-line.gold {
        left: 132px;
        width: 49px;
        background:
            linear-gradient(
                90deg,
                #4ade80,
                #fbbf24
            );
    }

    .handoff-control,
    .handoff-ledger {
        top: 20px;
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 50%;
        font-weight: 950;
    }

    .handoff-control {
        left: 98px;
        border: 1px solid rgba(74, 222, 128, .38);
        background: rgba(34, 197, 94, .09);
        color: #86efac;
    }

    .handoff-ledger {
        left: 184px;
        border: 1px solid rgba(251, 191, 36, .38);
        background: rgba(245, 158, 11, .09);
        color: #fbbf24;
        font-size: 8px;
    }

    .operations-accounting-handoff-copy
    > span {
        display: block;
        color: #38bdf8;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .08em;
    }

    .operations-accounting-handoff-copy h3 {
        margin: 4px 0 0;
        color: #f8fafc;
        font-size: 14px;
    }

    .operations-accounting-handoff-copy p {
        max-width: 720px;
        margin: 6px 0 0;
        color: #aebdd0;
        font-size: 8.5px;
        line-height: 1.45;
    }

    .operations-accounting-handoff > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: 0 12px;
        border: 1px solid rgba(251, 191, 36, .24);
        border-radius: 8px;
        background: rgba(245, 158, 11, .06);
        color: #fde68a;
        font-size: 8px;
        font-weight: 900;
        text-decoration: none;
    }

    .operations-accounting-handoff
    > a > b {
        color: #fbbf24;
        font-size: 13px;
    }


    /* ==========================================================
       SUPPORT SYSTEM CARDS
       ========================================================== */

    .operations-support-grid {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .operations-support-card {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 228px;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .16);
        border-radius: 11px;
        background: rgba(15, 23, 42, .28);
        color: inherit;
        text-decoration: none;
        transition:
            border-color .16s ease,
            background .16s ease,
            transform .16s ease;
    }

    .operations-support-card:hover {
        transform: translateY(-1px);
        border-color: rgba(56, 189, 248, .39);
        background: rgba(15, 23, 42, .36);
        color: inherit;
    }

    .operations-support-card.movement {
        box-shadow:
            inset 0 3px 0 rgba(56, 189, 248, .48);
    }

    .operations-support-card.measurement {
        border-color: rgba(74, 222, 128, .17);
        box-shadow:
            inset 0 3px 0 rgba(74, 222, 128, .42);
    }

    .operations-support-card.assurance {
        border-color: rgba(251, 191, 36, .18);
        box-shadow:
            inset 0 3px 0 rgba(251, 191, 36, .42);
    }

    .support-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 15px 0;
    }

    .support-card-icon {
        position: relative;
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(56, 189, 248, .19);
        border-radius: 8px;
        background: rgba(14, 165, 233, .06);
        color: #7dd3fc;
        font-size: 13px;
        font-weight: 900;
    }

    .storage-icon > i {
        width: 18px;
        height: 26px;
        border: 2px solid #7dd3fc;
        border-radius: 9px 9px 3px 3px;
    }

    .storage-icon > b {
        position: absolute;
        bottom: 8px;
        width: 13px;
        height: 10px;
        border-radius: 0 0 3px 3px;
        background: rgba(74, 222, 128, .45);
    }

    .pump-icon > i {
        width: 21px;
        height: 21px;
        border: 2px solid #7dd3fc;
        border-radius: 50%;
    }

    .pump-icon > b {
        position: absolute;
        width: 3px;
        height: 19px;
        transform: rotate(38deg);
        background: #7dd3fc;
    }

    .meter-icon {
        border-color: rgba(74, 222, 128, .22);
        background: rgba(34, 197, 94, .06);
        color: #86efac;
    }

    .sensor-icon > i {
        width: 17px;
        height: 17px;
        border: 2px solid #86efac;
        border-radius: 50%;
    }

    .sensor-icon > b {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #86efac;
    }

    .valve-icon {
        font-size: 18px;
    }

    .maintenance-icon {
        border-color: rgba(251, 191, 36, .22);
        background: rgba(245, 158, 11, .06);
        color: #fbbf24;
    }

    .operations-module-status {
        min-height: 23px;
        padding: 0 8px;
        font-size: 6.5px;
    }

    .support-card-eyebrow {
        display: block;
        margin: 12px 15px 4px;
        color: #38bdf8;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .07em;
    }

    .operations-support-card.measurement
    .support-card-eyebrow {
        color: #86efac;
    }

    .operations-support-card.assurance
    .support-card-eyebrow {
        color: #fbbf24;
    }

    .operations-support-card h3 {
        margin: 0 15px;
        color: #f8fafc;
        font-size: 15px;
    }

    .operations-support-card > p {
        flex: 1;
        margin: 7px 15px 12px;
        color: #94a3b8;
        font-size: 9px;
        line-height: 1.48;
    }

    .support-card-metric {
        margin: 0 15px 13px;
        padding: 9px 10px;
        border: 1px solid rgba(148, 163, 184, .08);
        border-radius: 8px;
        background: rgba(15, 23, 42, .25);
    }

    .support-card-metric span,
    .support-card-metric strong {
        display: block;
    }

    .support-card-metric span {
        color: #64748b;
        font-size: 6.5px;
        font-weight: 900;
    }

    .support-card-metric strong {
        margin-top: 3px;
        color: #bae6fd;
        font-size: 10px;
    }

    .operations-support-card footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 45px;
        padding: 10px 15px;
        border-top:
            1px solid rgba(148, 163, 184, .08);
        background: rgba(30, 41, 59, .10);
    }

    .operations-support-card footer span {
        color: #7dd3fc;
        font-size: 8px;
        font-weight: 900;
    }

    .operations-support-card footer b {
        color: #7dd3fc;
        font-size: 12px;
    }


    /* ==========================================================
       ASSURANCE
       ========================================================== */

    .operations-assurance-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .operations-assurance-card {
        display: grid;
        grid-template-columns:
            46px minmax(0, 1fr) minmax(120px, .32fr) 24px;
        gap: 13px;
        align-items: center;
        min-width: 0;
        min-height: 112px;
        padding: 14px;
        border: 1px solid rgba(56, 189, 248, .17);
        border-radius: 11px;
        background:
            linear-gradient(
                145deg,
                rgba(14, 165, 233, .055),
                rgba(15, 23, 42, .28)
            );
        color: inherit;
        text-decoration: none;
    }

    .operations-assurance-card:hover {
        border-color: rgba(56, 189, 248, .34);
        color: inherit;
    }

    .operations-assurance-card.alarms {
        border-color: rgba(251, 191, 36, .18);
        background:
            linear-gradient(
                145deg,
                rgba(245, 158, 11, .05),
                rgba(15, 23, 42, .28)
            );
    }

    .operations-assurance-warning {
        border-color: rgba(245, 158, 11, .30) !important;
    }

    .operations-assurance-icon {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border: 1px solid rgba(56, 189, 248, .20);
        border-radius: 50%;
        background: rgba(14, 165, 233, .07);
        color: #7dd3fc;
        font-size: 16px;
        font-weight: 950;
    }

    .operations-assurance-card.alarms
    .operations-assurance-icon {
        border-color: rgba(251, 191, 36, .28);
        background: rgba(245, 158, 11, .08);
        color: #fbbf24;
    }

    .operations-assurance-card
    > div:nth-child(2) > span {
        display: block;
        color: #38bdf8;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .07em;
    }

    .operations-assurance-card.alarms
    > div:nth-child(2) > span {
        color: #fbbf24;
    }

    .operations-assurance-card h3 {
        margin: 4px 0 0;
        color: #f8fafc;
        font-size: 13px;
    }

    .operations-assurance-card
    > div:nth-child(2) > p {
        margin: 5px 0 0;
        color: #9fb0c4;
        font-size: 8px;
        line-height: 1.4;
    }

    .operations-assurance-position {
        min-width: 0;
        padding: 9px 10px;
        border-left:
            1px solid rgba(148, 163, 184, .09);
    }

    .operations-assurance-position span,
    .operations-assurance-position strong,
    .operations-assurance-position small {
        display: block;
    }

    .operations-assurance-position span {
        color: #64748b;
        font-size: 6px;
        font-weight: 900;
    }

    .operations-assurance-position strong {
        margin-top: 4px;
        color: #e2e8f0;
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .operations-assurance-position small {
        margin-top: 3px;
        color: #94a3b8;
        font-size: 6.5px;
    }

    .operations-assurance-card > b {
        color: #7dd3fc;
        font-size: 13px;
    }


    /* ==========================================================
       ACTIVITY
       ========================================================== */

    .operations-command-activity-panel {
        overflow: hidden;
        border: 1px solid rgba(56, 189, 248, .16);
        border-radius: 11px;
        background: rgba(15, 23, 42, .26);
    }

    .operations-command-activity-row {
        display: grid;
        grid-template-columns:
            5px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 11px 14px;
        border-bottom:
            1px solid rgba(148, 163, 184, .07);
    }

    .operations-command-activity-row:last-child {
        border-bottom: 0;
    }

    .operations-command-activity-row > i {
        align-self: stretch;
        min-height: 34px;
        border-radius: 999px;
        background: #64748b;
    }

    .operations-command-activity-row
    > i.operations-activity-healthy {
        background: #22c55e;
    }

    .operations-command-activity-row
    > i.operations-activity-warning {
        background: #f59e0b;
    }

    .operations-command-activity-row
    > i.operations-activity-critical {
        background: #ef4444;
    }

    .operations-command-activity-row > div {
        min-width: 0;
    }

    .operations-command-activity-row
    > div > span {
        color: #38bdf8;
        font-size: 8px;
        font-weight: 900;
    }

    .operations-command-activity-row
    > div > strong {
        margin-left: 7px;
        color: #e2e8f0;
        font-size: 10px;
    }

    .operations-command-activity-row p {
        margin: 4px 0 0;
        color: #94a3b8;
        font-size: 9px;
        line-height: 1.4;
    }

    .operations-command-activity-row time {
        color: #64748b;
        font-size: 8px;
        white-space: nowrap;
    }

    .operations-command-empty {
        display: grid;
        grid-template-columns:
            150px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
        min-height: 130px;
        padding: 18px;
        border: 1px solid rgba(56, 189, 248, .15);
        border-radius: 11px;
        background:
            linear-gradient(
                145deg,
                rgba(14, 165, 233, .045),
                rgba(15, 23, 42, .26)
            );
    }

    .operations-command-empty-art {
        position: relative;
        height: 78px;
    }

    .empty-tank,
    .empty-line,
    .empty-event {
        position: absolute;
        display: block;
    }

    .empty-tank {
        top: 13px;
        left: 8px;
        width: 37px;
        height: 56px;
        border: 2px solid rgba(125, 211, 252, .34);
        border-radius: 18px 18px 4px 4px;
    }

    .empty-line {
        top: 41px;
        left: 45px;
        width: 49px;
        height: 2px;
        background:
            linear-gradient(
                90deg,
                rgba(56, 189, 248, .45),
                rgba(56, 189, 248, .10)
            );
    }

    .empty-event {
        top: 23px;
        left: 96px;
        display: grid;
        width: 36px;
        height: 42px;
        place-items: center;
        border: 2px solid rgba(251, 191, 36, .26);
        border-radius: 4px;
        color: #fbbf24;
        font-size: 12px;
    }

    .operations-command-empty
    > div:last-child > span {
        display: block;
        color: #38bdf8;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .08em;
    }

    .operations-command-empty h3 {
        margin: 4px 0 0;
        color: #f8fafc;
        font-size: 13px;
    }

    .operations-command-empty p {
        max-width: 720px;
        margin: 6px 0 0;
        color: #94a3b8;
        font-size: 8.5px;
        line-height: 1.45;
    }


    /* ==========================================================
       RESPONSIVE / ZOOM SAFE
       ========================================================== */

    @media (max-width: 1280px) {

        .operations-command-hero {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-processing-pulse {
            width: 100%;
        }

        .operations-command-hero-actions {
            max-width: none;
        }

        .operations-processing-engine {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .processing-engine-transfer {
            display: none;
        }

        .operations-support-grid {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }

    }


    @media (max-width: 1000px) {

        .operations-command-instruments {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }

        .operations-processing-engine {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-accounting-handoff {
            grid-template-columns:
                180px minmax(0, 1fr);
        }

        .operations-accounting-handoff > a {
            grid-column: 1 / -1;
        }

        .operations-assurance-grid {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-command-section-heading {
            align-items: flex-start;
            flex-direction: column;
            gap: 6px;
        }

        .operations-command-section-heading > p {
            max-width: none;
            text-align: left;
        }

    }


    @media (max-width: 760px) {

        .operations-command-hero-actions {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-processing-pulse-grid {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-processing-flow {
            grid-template-columns:
                repeat(4, minmax(0, 1fr));
        }

        .operations-processing-flow > em {
            display: none;
        }

        .operations-support-grid {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-assurance-card {
            grid-template-columns:
                46px minmax(0, 1fr) 22px;
        }

        .operations-assurance-position {
            grid-column: 2 / 4;
            padding-left: 0;
            border-top:
                1px solid rgba(148, 163, 184, .09);
            border-left: 0;
        }

    }


    @media (max-width: 560px) {

        .operations-command-page.accounting-page {
            padding:
                24px 18px 52px;
        }

        .operations-command-container {
            padding:
                0 18px 36px;
        }

        .operations-command-hero {
            padding: 18px;
        }

        .operations-command-hero-main {
            flex-direction: column;
            gap: 13px;
        }

        .operations-command-identity {
            flex-basis: 72px;
            width: 72px;
            height: 86px;
        }

        .operations-engine-emblem {
            transform: scale(.84);
            transform-origin: top left;
        }

        .operations-command-title-row h1 {
            font-size:
                clamp(28px, 10vw, 38px);
        }

        .operations-command-instruments {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-accounting-handoff {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-accounting-handoff-art {
            width: 240px;
            max-width: 100%;
        }

        .operations-command-empty {
            grid-template-columns:
                minmax(0, 1fr);
        }

        .operations-command-empty-art {
            width: 150px;
        }

        .operations-command-activity-row {
            grid-template-columns:
                5px minmax(0, 1fr);
        }

        .operations-command-activity-row time {
            grid-column: 2;
        }

    }




/* ==========================================================
   OPERATIONS HERO ACTIONS — reporting / processing-detail style
   Final cascade override so the header buttons feel like a single,
   integrated action rail instead of two unrelated cards.
   ========================================================== */

.operations-command-page .operations-command-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    gap: 0 !important;
    width: 100%;
    max-width: 840px !important;
    margin-top: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;
    background:
        linear-gradient(
            90deg,
            rgba(14, 165, 233, .055),
            rgba(15, 23, 42, .28) 48%,
            rgba(245, 158, 11, .035)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 26px rgba(2, 8, 23, .16);
}

.operations-command-page .operations-command-hero-actions > a {
    position: relative;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 28px !important;
    align-items: center;
    gap: 12px !important;
    min-width: 0;
    min-height: 88px !important;
    padding: 14px 16px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none;
    box-shadow: none !important;
    transition:
        background .16s ease,
        transform .16s ease;
}

.operations-command-page .operations-command-hero-actions > a:first-child {
    border-right: 1px solid rgba(148, 163, 184, .12) !important;
    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, .10),
            rgba(56, 189, 248, .04) 68%,
            transparent
        ) !important;
}

.operations-command-page .operations-command-hero-actions > a:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(245, 158, 11, .07),
            rgba(245, 158, 11, .03) 66%,
            transparent
        ) !important;
}

.operations-command-page .operations-command-hero-actions > a:hover {
    transform: none !important;
    color: inherit;
}

.operations-command-page .operations-command-hero-actions > a:first-child:hover {
    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, .14),
            rgba(56, 189, 248, .05) 72%,
            transparent
        ) !important;
}

.operations-command-page .operations-command-hero-actions > a:last-child:hover {
    background:
        linear-gradient(
            90deg,
            rgba(245, 158, 11, .11),
            rgba(245, 158, 11, .04) 72%,
            transparent
        ) !important;
}

.operations-command-page .operations-processing-action::before,
.operations-command-page .operations-facility-action::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 30%
        );
}

.operations-command-page .operations-processing-action-art,
.operations-command-page .operations-facility-action-art {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .42),
            rgba(15, 23, 42, .20)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);
}

.operations-command-page .operations-processing-action-art {
    border-color: rgba(125, 211, 252, .30) !important;
}

.operations-command-page .operations-facility-action-art {
    border-color: rgba(251, 191, 36, .22) !important;
}

.operations-command-page .operations-command-hero-actions em,
.operations-command-page .operations-command-hero-actions strong,
.operations-command-page .operations-command-hero-actions small {
    display: block;
}

.operations-command-page .operations-command-hero-actions > a > span:nth-child(2) > em {
    margin-bottom: 4px !important;
    font-style: normal;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase;
}

.operations-command-page .operations-processing-action > span:nth-child(2) > em {
    color: #7dd3fc !important;
}

.operations-command-page .operations-facility-action > span:nth-child(2) > em {
    color: #fbbf24 !important;
}

.operations-command-page .operations-command-hero-actions > a > span:nth-child(2) > strong {
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.operations-command-page .operations-command-hero-actions > a > span:nth-child(2) > small {
    margin-top: 5px !important;
    color: #c7d5e5 !important;
    font-size: 8px !important;
    line-height: 1.42 !important;
}

.operations-command-page .operations-command-hero-actions > a > b {
    display: grid !important;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 999px;
    color: #cfe6fb !important;
    font-size: 13px !important;
    font-weight: 900;
    background: rgba(15, 23, 42, .24);
    justify-self: end;
}

.operations-command-page .operations-facility-action > b {
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, .22) !important;
}

/* tighten the art so it feels neater like the reporting action rail */
.operations-command-page .pa-source {
    left: 7px !important;
    bottom: 8px !important;
    width: 13px !important;
    height: 24px !important;
}

.operations-command-page .pa-route {
    left: 17px !important;
    bottom: 17px !important;
    width: 12px !important;
    height: 2px !important;
}

.operations-command-page .pa-event {
    right: 6px !important;
    bottom: 8px !important;
    width: 18px !important;
    height: 24px !important;
    font-size: 9px !important;
}

.operations-command-page .operations-facility-action-art > i {
    left: 7px !important;
    bottom: 8px !important;
    width: 18px !important;
    height: 17px !important;
}

.operations-command-page .operations-facility-action-art > b {
    right: 7px !important;
    bottom: 8px !important;
    width: 9px !important;
    height: 24px !important;
}

.operations-command-page .operations-facility-action-art > em {
    top: 6px !important;
    left: 15px !important;
    width: 12px !important;
    height: 12px !important;
}

@media (max-width: 760px) {
    .operations-command-page .operations-command-hero-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .operations-command-page .operations-command-hero-actions > a:first-child {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
    }

    .operations-command-page .operations-command-hero-actions > a {
        grid-template-columns: 46px minmax(0, 1fr) 24px !important;
        min-height: 80px !important;
        padding: 13px 14px !important;
    }

    .operations-command-page .operations-processing-action-art,
    .operations-command-page .operations-facility-action-art {
        width: 44px !important;
        height: 44px !important;
    }
}



/* ==========================================================
   OPERATIONS HERO ACTIONS V5 — COMPACT REPORTING SCALE
   Keep the joined command-rail language, but match the tighter
   scale used by Reporting / Processing Details.
   ========================================================== */

.operations-command-page
.operations-command-hero-actions {
    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, .94fr) !important;
    width: min(100%, 740px) !important;
    max-width: 740px !important;
    margin-top: 14px !important;
    border-radius: 10px 10px 4px 10px !important;
}

.operations-command-page
.operations-command-hero-actions > a {
    grid-template-columns:
        42px minmax(0, 1fr) 22px !important;
    gap: 9px !important;
    min-height: 66px !important;
    padding: 9px 11px !important;
}

.operations-command-page
.operations-processing-action-art,
.operations-command-page
.operations-facility-action-art {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px 8px 3px 8px !important;
}

.operations-command-page
.operations-command-hero-actions
> a > span:nth-child(2) > em {
    margin-bottom: 2px !important;
    font-size: 6px !important;
    letter-spacing: .07em !important;
}

.operations-command-page
.operations-command-hero-actions
> a > span:nth-child(2) > strong {
    font-size: 10px !important;
    line-height: 1.18 !important;
}

.operations-command-page
.operations-command-hero-actions
> a > span:nth-child(2) > small {
    margin-top: 3px !important;
    font-size: 7.1px !important;
    line-height: 1.32 !important;
}

.operations-command-page
.operations-command-hero-actions > a > b {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
}

/* Scale the existing physical mini-art proportionally. */
.operations-command-page .pa-source {
    left: 6px !important;
    bottom: 6px !important;
    width: 11px !important;
    height: 20px !important;
}

.operations-command-page .pa-route {
    left: 15px !important;
    bottom: 14px !important;
    width: 10px !important;
}

.operations-command-page .pa-event {
    right: 5px !important;
    bottom: 6px !important;
    width: 15px !important;
    height: 21px !important;
    font-size: 7px !important;
}

.operations-command-page
.operations-facility-action-art > i {
    left: 6px !important;
    bottom: 6px !important;
    width: 16px !important;
    height: 15px !important;
}

.operations-command-page
.operations-facility-action-art > i::before {
    top: -5px !important;
    border-right-width: 8px !important;
    border-bottom-width: 5px !important;
}

.operations-command-page
.operations-facility-action-art > b {
    right: 6px !important;
    bottom: 6px !important;
    width: 7px !important;
    height: 21px !important;
}

.operations-command-page
.operations-facility-action-art > em {
    top: 5px !important;
    left: 12px !important;
    width: 11px !important;
    height: 11px !important;
}

/* Keep it compact when the hero stacks at zoom/tablet widths. */
@media (max-width: 1280px) {
    .operations-command-page
    .operations-command-hero-actions {
        width: min(100%, 740px) !important;
        max-width: 740px !important;
    }
}

@media (max-width: 760px) {
    .operations-command-page
    .operations-command-hero-actions {
        grid-template-columns:
            minmax(0, 1fr) !important;
        width: 100% !important;
    }

    .operations-command-page
    .operations-command-hero-actions > a {
        grid-template-columns:
            40px minmax(0, 1fr) 22px !important;
        min-height: 64px !important;
        padding: 9px 10px !important;
    }

    .operations-command-page
    .operations-processing-action-art,
    .operations-command-page
    .operations-facility-action-art {
        width: 38px !important;
        height: 38px !important;
    }
}



/* ==========================================================
   OPERATIONS PROCESSING PULSE — SEMANTIC COLUMN TITLES
   Same layout; stronger scan hierarchy.
   ========================================================== */

.operations-command-page
.operations-processing-pulse-grid
.processed > span {
    color: #86efac !important;
}

.operations-command-page
.operations-processing-pulse-grid
.events > span {
    color: #7dd3fc !important;
}

.operations-command-page
.operations-processing-pulse-grid
.latest > span {
    color: #93c5fd !important;
}

.operations-command-page
.operations-processing-pulse-grid
.alarms > span {
    color: #fbbf24 !important;
}

/* Keep the actual alarm value semantic to its current state. */
.operations-command-page
.operations-processing-pulse-grid
.alarms.healthy > strong {
    color: #86efac !important;
}

.operations-command-page
.operations-processing-pulse-grid
.alarms.warning > strong {
    color: #fcd34d !important;
}

.operations-command-page
.operations-processing-pulse-grid
.alarms.critical > strong {
    color: #fca5a5 !important;
}

/* Slight matching top rails make the four columns easier to scan. */
.operations-command-page
.operations-processing-pulse-grid
.processed {
    box-shadow:
        inset 0 2px 0 rgba(74,222,128,.18);
}

.operations-command-page
.operations-processing-pulse-grid
.events {
    box-shadow:
        inset 0 2px 0 rgba(56,189,248,.18);
}

.operations-command-page
.operations-processing-pulse-grid
.latest {
    box-shadow:
        inset 0 2px 0 rgba(96,165,250,.18);
}

.operations-command-page
.operations-processing-pulse-grid
.alarms {
    box-shadow:
        inset 0 2px 0 rgba(251,191,36,.18);
}


/* ==========================================================
   OPERATIONS V7 — PHYSICAL INSTRUMENT STANDARD
   Physical twin of Accounting's calculator/ledger language.
   ========================================================== */

.operations-command-page {
    overflow-x: hidden !important;
}

.operations-command-page .operations-command-container {
    max-width: 1420px !important;
    min-width: 0 !important;
    container-type: inline-size;
}
/* ==========================================================
   EQUIPMENT CONTENT WIDTH — 2026-09-09
   The Equipment gateway and specialist views use Home's fluid
   content width. Keep Operations Overview's existing width cap.
   Only horizontal container sizing changes; retain vertical spacing,
   named query containers, shared headers, diagrams and page controls.
   ========================================================== */
.operations-command-page:is(
    .equipment-register-page,
    .storage-index-page,
    .storage-record-page,
    .pump-index-page,
    .pump-record-page,
    .agitators-index-page,
    .agitator-record-page,
    .flowmeter-index-page,
    .flowmeter-record-page,
    .sensor-index-page,
    .sensor-record-page,
    .valve-index-page,
    .valve-record-page
) > .operations-command-container {
    width: 100%;
    max-width: none !important;
    margin-inline: 0;
    padding-inline: 30px;
}

/* Match Home's inner horizontal gutters at smaller viewports. */
@media (max-width: 780px) {
    .operations-command-page:is(
        .equipment-register-page,
        .storage-index-page,
        .storage-record-page,
        .pump-index-page,
        .pump-record-page,
        .agitators-index-page,
        .agitator-record-page,
        .flowmeter-index-page,
        .flowmeter-record-page,
        .sensor-index-page,
        .sensor-record-page,
        .valve-index-page,
        .valve-record-page
    ) > .operations-command-container {
        padding-inline: 18px;
    }
}

@media (max-width: 520px) {
    .operations-command-page:is(
        .equipment-register-page,
        .storage-index-page,
        .storage-record-page,
        .pump-index-page,
        .pump-record-page,
        .agitators-index-page,
        .agitator-record-page,
        .flowmeter-index-page,
        .flowmeter-record-page,
        .sensor-index-page,
        .sensor-record-page,
        .valve-index-page,
        .valve-record-page
    ) > .operations-command-container {
        padding-inline: 14px;
    }
}



/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.operations-v7-hero {
    display: grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(410px,.75fr);
    gap: 20px;
    min-width: 0;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(56,189,248,.20);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(14,165,233,.09),
            transparent 30%
        ),
        linear-gradient(
            126deg,
            rgba(7,36,55,.78),
            rgba(9,28,44,.68) 50%,
            rgba(12,26,40,.58)
        );
    box-shadow:
        inset 0 3px 0 rgba(56,189,248,.18),
        0 14px 30px rgba(2,8,23,.08);
}

.operations-v7-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    min-width: 0;
}

.operations-v7-emblem {
    display: flex;
    flex: 0 0 96px;
    width: 96px;
    height: 110px;
    align-items: center;
    flex-direction: column;
    padding: 8px 7px 6px;
    border: 1px solid rgba(56,189,248,.30);
    border-radius: 15px 15px 5px 15px;
    background:
        linear-gradient(
            155deg,
            rgba(15,57,82,.92),
            rgba(10,29,45,.92)
        );
    box-shadow:
        inset 0 0 0 3px rgba(15,23,42,.20),
        inset 0 3px 0 rgba(125,211,252,.14);
}

.operations-v7-emblem-art {
    position: relative;
    display: block;
    width: 74px;
    height: 76px;
}

.operations-v7-emblem-art > i {
    position: absolute;
    display: block;
    font-style: normal;
}

.ops7-emblem-tank {
    top: 13px;
    left: 3px;
    width: 24px;
    height: 42px;
    border: 2px solid #7dd3fc;
    border-radius: 12px 12px 4px 4px;
}

.ops7-emblem-tank > b {
    position: absolute;
    right: 2px;
    bottom: 2px;
    left: 2px;
    height: 55%;
    background:
        linear-gradient(
            180deg,
            #38bdf8,
            #0e7490
        );
}

.ops7-emblem-pipe {
    top: 33px;
    left: 25px;
    width: 23px;
    height: 3px;
    border-radius: 99px;
    background: #7dd3fc;
}

.ops7-emblem-pump {
    top: 23px;
    left: 38px;
    width: 26px;
    height: 26px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
    background: #0a2233;
}

.ops7-emblem-pump > b {
    position: absolute;
    inset: 6px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
}

.ops7-emblem-meter {
    right: 2px;
    top: 16px;
    display: grid !important;
    width: 24px;
    height: 30px;
    place-items: center;
    border: 2px solid #86efac;
    border-radius: 6px;
    color: #86efac;
    font-size: 11px;
    font-weight: 950;
}

.ops7-emblem-check {
    right: 0;
    bottom: 0;
    display: grid !important;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 3px solid #0b2234;
    border-radius: 50%;
    background: #22c55e;
    color: #052e16;
    font-size: 8px;
    font-weight: 950;
}

.operations-v7-emblem > small {
    margin-top: 4px;
    color: #bae6fd;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .075em;
}

.operations-v7-hero-copy {
    min-width: 0;
}

.operations-v7-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #7dd3fc;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .085em;
}

.operations-v7-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.operations-v7-title-row h1 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(40px,4vw,58px);
    line-height: 1;
    letter-spacing: -.035em;
}

.operations-v7-state {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(74,222,128,.24);
    border-radius: 999px;
    background: rgba(34,197,94,.06);
    font-size: 8px;
    font-weight: 950;
    white-space: nowrap;
}

.operations-v7-state > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
}

.operations-v7-hero-copy > p {
    max-width: 780px;
    margin: 11px 0 0;
    color: #cfdbe6;
    font-size: 10.5px;
    line-height: 1.52;
}


/* joined actions */

.operations-v7-hero-side {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.operations-v7-actions {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(56,189,248,.22);
    border-radius: 10px 10px 4px 10px;
    background: #0a1e2f;
}

.operations-v7-action {
    display: grid;
    grid-template-columns:
        44px minmax(0,1fr) 24px;
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 76px;
    padding: 10px 11px;
    color: inherit;
    text-decoration: none;
}

.operations-v7-action:first-child {
    border-right: 1px solid rgba(148,163,184,.10);
}

.operations-v7-action:hover {
    background: rgba(14,165,233,.045);
    color: inherit;
}

.operations-v7-action-icon {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(56,189,248,.22);
    border-radius: 8px;
    background: #0a263b;
}

.operations-v7-action-icon.process > i {
    width: 18px;
    height: 25px;
    border: 2px solid #7dd3fc;
    border-radius: 3px;
}

.operations-v7-action-icon.process > b {
    position: absolute;
    right: 3px;
    bottom: 4px;
    padding: 2px 3px;
    border-radius: 3px;
    background: #0b2234;
    color: #86efac;
    font-size: 5px;
    font-weight: 950;
}

.operations-v7-action-icon.facility > i {
    width: 21px;
    height: 16px;
    border: 2px solid #93c5fd;
}

.operations-v7-action-icon.facility > i::before {
    position: absolute;
    top: 8px;
    left: 8px;
    border-right: 10px solid transparent;
    border-bottom: 7px solid #93c5fd;
    content: "";
    transform: translate(-2px,-9px);
}

.operations-v7-action-icon.facility > b {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 22px;
    border: 2px solid #86efac;
    border-radius: 4px 4px 2px 2px;
}

.operations-v7-action > span:nth-child(2) > small,
.operations-v7-action > span:nth-child(2) > strong,
.operations-v7-action > span:nth-child(2) > em {
    display: block;
}

.operations-v7-action > span:nth-child(2) > small {
    color: #7dd3fc;
    font-size: 7.5px;
    font-weight: 950;
    letter-spacing: .045em;
}

.operations-v7-action > span:nth-child(2) > strong {
    margin-top: 3px;
    color: #f8fafc;
    font-size: 11px;
}

.operations-v7-action > span:nth-child(2) > em {
    margin-top: 4px;
    color: #aebdcb;
    font-size: 8px;
    font-style: normal;
    line-height: 1.3;
}

.operations-v7-action > b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(56,189,248,.16);
    border-radius: 50%;
    color: #7dd3fc;
    font-size: 10px;
}

.operations-v7-control-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
    padding: 0 2px;
}

.operations-v7-control-line > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #86efac;
    font-size: 8px;
    font-weight: 950;
    white-space: nowrap;
}

.operations-v7-control-line > span > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
}

.operations-v7-control-line > small {
    color: #94a7b8;
    font-size: 7.5px;
}


/* ----------------------------------------------------------
   CONTROL STRIP
   ---------------------------------------------------------- */

.operations-v7-control-strip {
    display: grid;
    grid-template-columns:
        repeat(6,minmax(0,1fr));
    gap: 0;
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid rgba(96,165,250,.14);
    border-radius: 11px;
    background: #0a1e2f;
}

.operations-v7-stage {
    position: relative;
    display: grid;
    grid-template-columns:
        32px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 102px;
    padding: 13px 11px;
    border-right: 1px solid rgba(148,163,184,.07);
    color: inherit;
    text-decoration: none;
}

.operations-v7-stage:last-child {
    border-right: 0;
}

.operations-v7-stage::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
}

.operations-v7-stage.source::before {
    background: #38bdf8;
}

.operations-v7-stage.route::before {
    background: #60a5fa;
}

.operations-v7-stage.measure::before {
    background: #86efac;
}

.operations-v7-stage.process::before {
    background: #4ade80;
}

.operations-v7-stage.assure::before {
    background: #fbbf24;
}

.operations-v7-stage.handoff::before {
    background: #c084fc;
}

.operations-v7-stage:hover {
    background: rgba(255,255,255,.018);
}

.operations-v7-stage-number {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(56,189,248,.25);
    border-radius: 8px;
    background: #0b2639;
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 950;
}

.route .operations-v7-stage-number {
    color: #93c5fd;
}

.measure .operations-v7-stage-number,
.process .operations-v7-stage-number {
    border-color: rgba(74,222,128,.25);
    color: #86efac;
}

.assure .operations-v7-stage-number {
    border-color: rgba(251,191,36,.25);
    color: #fbbf24;
}

.handoff .operations-v7-stage-number {
    border-color: rgba(192,132,252,.25);
    color: #c084fc;
}

.operations-v7-stage > div > span,
.operations-v7-stage > div > small,
.operations-v7-stage > div > strong {
    display: block;
}

.operations-v7-stage > div > span {
    color: #7dd3fc;
    font-size: 8.5px;
    font-weight: 950;
}

.route > div > span {
    color: #93c5fd;
}

.measure > div > span,
.process > div > span {
    color: #86efac;
}

.assure > div > span {
    color: #fbbf24;
}

.handoff > div > span {
    color: #c084fc;
}

.operations-v7-stage > div > small {
    min-height: 16px;
    margin-top: 3px;
    color: #a8b7c5;
    font-size: 7.5px;
    line-height: 1.25;
}

.operations-v7-stage > div > strong {
    margin-top: 8px;
    color: #f8fafc;
    font-size: clamp(17px,1.4vw,22px);
    line-height: 1.04;
}

.operations-v7-stage > div > strong > em {
    color: #8fa2b5;
    font-size: 7.5px;
    font-style: normal;
    font-weight: 700;
}


/* ----------------------------------------------------------
   PHYSICAL EVIDENCE ENGINE
   ---------------------------------------------------------- */

.operations-v7-engine {
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid rgba(56,189,248,.17);
    border-radius: 14px;
    background:
        linear-gradient(
            rgba(56,189,248,.020) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56,189,248,.020) 1px,
            transparent 1px
        ),
        #081d2d;
    background-size:
        26px 26px,
        26px 26px,
        auto;
    container-type: inline-size;
    box-shadow:
        inset 0 3px 0 rgba(56,189,248,.12);
}

.operations-v7-engine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 62px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(56,189,248,.08);
    background: rgba(10,30,47,.82);
}

.operations-v7-engine-header > div > span {
    display: block;
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .065em;
}

.operations-v7-engine-header h2 {
    margin: 4px 0 0;
    color: #f8fafc;
    font-size: clamp(18px,1.5vw,22px);
}

.operations-v7-engine-state {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid rgba(74,222,128,.20);
    border-radius: 999px;
    background: #0a2c2d;
    font-size: 7.5px;
    font-weight: 950;
}

.operations-v7-engine-state > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
}

.operations-v7-engine-flow {
    display: grid;
    grid-template-columns:
        minmax(190px,.78fr)
        38px
        minmax(380px,1.58fr)
        44px
        minmax(170px,.72fr)
        44px
        minmax(160px,.68fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 18px 16px;
}

.operations-v7-feeders {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.operations-v7-feeder {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #185070;
    border-radius: 8px;
    background:
        linear-gradient(
            145deg,
            #0a2638,
            #071b29
        );
    color: inherit;
    text-decoration: none;
}

.operations-v7-feeder.route {
    border-color: #1d5682;
}

.operations-v7-feeder > header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(148,163,184,.07);
}

.operations-v7-feeder > header > span {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid rgba(56,189,248,.20);
    border-radius: 5px;
    color: #7dd3fc;
    font-size: 6px;
    font-weight: 950;
}

.operations-v7-feeder > header > strong {
    color: #cfe8f8;
    font-size: 7px;
    letter-spacing: .05em;
}

.operations-v7-feeder-body {
    display: grid;
    grid-template-columns:
        46px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding-top: 9px;
}

.operations-v7-feeder-body > div > strong,
.operations-v7-feeder-body > div > span {
    display: block;
}

.operations-v7-feeder-body > div > strong {
    color: #f8fafc;
    font-size: clamp(16px,1.3vw,20px);
    line-height: 1;
}

.operations-v7-feeder-body > div > strong > small {
    color: #9fb0c4;
    font-size: 7px;
}

.operations-v7-feeder-body > div > span {
    margin-top: 4px;
    color: #aab9c6;
    font-size: 7.5px;
    line-height: 1.3;
}

.operations-v7-tank-art {
    position: relative;
    display: block;
    width: 42px;
    height: 46px;
}

.operations-v7-tank-art > i {
    position: absolute;
    left: 4px;
    bottom: 1px;
    width: 28px;
    height: 42px;
    border: 2px solid #7dd3fc;
    border-radius: 14px 14px 4px 4px;
}

.operations-v7-tank-art > b {
    position: absolute;
    right: 12px;
    bottom: 3px;
    left: 7px;
    height: 55%;
    background:
        linear-gradient(
            180deg,
            #38bdf8,
            #0e7490
        );
}

.operations-v7-pump-art {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
}

.operations-v7-pump-art > i {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 31px;
    height: 31px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
}

.operations-v7-pump-art > b {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 15px;
    height: 15px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
}

.operations-v7-pump-art > em {
    position: absolute;
    top: 20px;
    right: 0;
    width: 11px;
    height: 3px;
    background: #93c5fd;
}

.operations-v7-engine-arrow {
    display: grid;
    place-items: center;
    color: #7dd3fc;
    font-size: 29px;
    font-weight: 800;
}

.operations-v7-engine-arrow.output {
    color: #86efac;
    font-size: 37px;
}

.operations-v7-engine-arrow.accounting {
    color: #c084fc;
    font-size: 37px;
}


/* central manifold */

.operations-v7-manifold {
    min-width: 0;
    min-height: 222px;
    padding: 9px;
    border: 1px solid #3e5b70;
    border-radius: 13px 13px 6px 13px;
    background:
        linear-gradient(
            160deg,
            #1c3a50,
            #0d293d 47%,
            #091b28
        );
    box-shadow:
        inset 0 0 0 3px #071a27,
        inset 0 2px 0 rgba(186,230,253,.12),
        0 7px 14px rgba(2,8,23,.15);
}

.operations-v7-manifold > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 0 7px 8px;
    border-bottom: 1px solid rgba(148,163,184,.10);
}

.operations-v7-manifold > header > div > span,
.operations-v7-manifold > header > div > strong {
    display: block;
}

.operations-v7-manifold > header > div > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
}

.operations-v7-manifold > header > div > strong {
    margin-top: 3px;
    color: #e9f4fb;
    font-size: 9px;
}

.operations-v7-manifold > header > small {
    color: #8396a7;
    font-size: 7px;
}

.operations-v7-manifold-main {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        150px;
    gap: 10px;
    padding: 13px 7px 9px;
}

.operations-v7-manifold-visual {
    position: relative;
    min-height: 132px;
    border: 1px solid #1a536d;
    border-radius: 6px;
    background: #031521;
    box-shadow:
        inset 0 0 0 2px #061d2b;
}

.operations-v7-manifold-tank,
.operations-v7-manifold-pump,
.operations-v7-manifold-meter,
.operations-v7-manifold-event,
.operations-v7-manifold-pipe {
    position: absolute;
    display: block;
}

.operations-v7-manifold-tank {
    top: 29px;
    left: 20px;
    width: 43px;
    height: 72px;
    border: 2px solid #7dd3fc;
    border-radius: 20px 20px 5px 5px;
}

.operations-v7-manifold-tank > i {
    position: absolute;
    top: -4px;
    left: 5px;
    width: 29px;
    height: 8px;
    border: 2px solid #7dd3fc;
    border-radius: 50%;
    background: #031521;
}

.operations-v7-manifold-tank > b {
    position: absolute;
    right: 3px;
    bottom: 3px;
    left: 3px;
    height: 58%;
    border-radius: 0 0 3px 3px;
    background:
        linear-gradient(
            180deg,
            #38bdf8,
            #0e7490
        );
}

.operations-v7-manifold-pipe {
    top: 63px;
    height: 5px;
    background:
        linear-gradient(
            180deg,
            #7dd3fc,
            #22779a
        );
}

.operations-v7-manifold-pipe.first {
    left: 62px;
    width: 55px;
}

.operations-v7-manifold-pipe.second {
    left: 159px;
    width: 53px;
}

.operations-v7-manifold-pipe.third {
    left: 256px;
    right: 52px;
}

.operations-v7-manifold-pump {
    top: 42px;
    left: 112px;
    width: 47px;
    height: 47px;
    border: 3px solid #93c5fd;
    border-radius: 50%;
    background: #092237;
}

.operations-v7-manifold-pump > i {
    position: absolute;
    inset: 10px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
}

.operations-v7-manifold-pump > b {
    position: absolute;
    top: 19px;
    right: -13px;
    width: 16px;
    height: 5px;
    background: #93c5fd;
}

.operations-v7-manifold-meter {
    top: 39px;
    left: 209px;
    display: grid !important;
    width: 48px;
    height: 53px;
    place-items: center;
    border: 2px solid #86efac;
    border-radius: 8px;
    background: #072822;
}

.operations-v7-manifold-meter > i {
    position: absolute;
    top: 7px;
    right: 7px;
    left: 7px;
    height: 9px;
    border: 1px solid rgba(134,239,172,.42);
    border-radius: 2px;
}

.operations-v7-manifold-meter > b {
    margin-top: 13px;
    color: #86efac;
    font-size: 13px;
}

.operations-v7-manifold-event {
    top: 38px;
    right: 16px;
    width: 42px;
    height: 58px;
    border: 2px solid #fbbf24;
    border-radius: 5px;
    background: #2a2410;
}

.operations-v7-manifold-event > i {
    position: absolute;
    top: 14px;
    right: 7px;
    left: 7px;
    height: 2px;
    background: #9b7a1d;
    box-shadow:
        0 8px 0 #9b7a1d;
}

.operations-v7-manifold-event > b {
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    color: #fde68a;
    font-size: 7px;
    text-align: center;
}

.operations-v7-manifold-event > em {
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 3px solid #0b2234;
    border-radius: 50%;
    background: #22c55e;
    color: #052e16;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
}

.operations-v7-manifold-readout {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
    padding: 13px;
    border: 1px solid #176243;
    border-radius: 5px;
    background: #031a1d;
    box-shadow:
        inset 0 0 0 2px #061f22;
}

.operations-v7-manifold-readout > small {
    color: #86efac;
    font-size: 7px;
    font-weight: 950;
}

.operations-v7-manifold-readout > strong {
    margin-top: 8px;
    color: #86efac;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: clamp(31px,3vw,43px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.operations-v7-manifold-readout > span {
    margin-top: 7px;
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 800;
}

.operations-v7-manifold > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px 1px;
    border-top: 1px solid rgba(148,163,184,.09);
}

.operations-v7-manifold > footer > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #86efac;
    font-size: 7px;
    font-weight: 950;
}

.operations-v7-manifold > footer > span > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
}

.operations-v7-manifold > footer > small {
    color: #9aabba;
    font-size: 7px;
}


/* output record + accounting */

.operations-v7-output {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 158px;
    justify-content: flex-start;
    flex-direction: column;
    padding: 14px;
    overflow: hidden;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.operations-v7-output.event {
    border: 1px solid #17643f;
    background:
        linear-gradient(
            145deg,
            #092c2b,
            #071c27
        );
}

.operations-v7-output.accounting {
    border: 1px solid #765a17;
    background:
        linear-gradient(
            145deg,
            #2a2412,
            #0d1d28
        );
}

.operations-v7-output > span {
    color: #86efac;
    font-size: 8px;
    font-weight: 950;
}

.operations-v7-output.accounting > span {
    color: #fde68a;
}

.operations-v7-output > strong {
    margin-top: 8px;
    color: #86efac;
    font-size: clamp(24px,2vw,31px);
    line-height: 1;
}

.operations-v7-output.accounting > strong {
    color: #fde68a;
}

.operations-v7-output > small {
    margin-top: 4px;
    color: #b1c0cc;
    font-size: 8px;
}

.operations-v7-output > p {
    max-width: 165px;
    margin: auto 0 0;
    color: #a7b7c4;
    font-size: 8px;
    line-height: 1.4;
}

.operations-v7-event-art {
    position: absolute;
    right: 12px;
    bottom: 13px;
    width: 42px;
    height: 54px;
    border: 2px solid #2faa63;
    border-radius: 5px;
}

.operations-v7-event-art > i {
    position: absolute;
    right: 7px;
    left: 7px;
    height: 2px;
    background: #27874f;
}

.operations-v7-event-art > i:nth-child(1) {
    top: 14px;
}

.operations-v7-event-art > i:nth-child(2) {
    top: 22px;
}

.operations-v7-event-art > b {
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    color: #86efac;
    font-size: 7px;
    text-align: center;
}

.operations-v7-event-art > em {
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 3px solid #0b2234;
    border-radius: 50%;
    background: #22c55e;
    color: #052e16;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
}

.operations-v7-accounting-art {
    position: absolute;
    right: 12px;
    bottom: 14px;
    display: grid;
    grid-template-columns:
        30px 18px;
    gap: 4px;
    align-items: center;
}

.operations-v7-accounting-art > i {
    display: grid;
    width: 30px;
    height: 34px;
    place-items: center;
    border: 1px solid #8b6d18;
    border-radius: 5px;
    color: #fbbf24;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.operations-v7-accounting-art > b {
    color: #fde68a;
    font-size: 14px;
}


/* evidence rail */

.operations-v7-evidence-rail {
    display: grid;
    grid-template-columns:
        135px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid rgba(56,189,248,.08);
    background: #091c2b;
}

.operations-v7-evidence-rail > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
}

.operations-v7-evidence-rail > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.operations-v7-evidence-rail b {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #17384d;
    border-radius: 4px;
    background: #0a2537;
    color: #d1e4f0;
    font-size: 7px;
}

.operations-v7-evidence-rail i {
    color: #7dd3fc;
    font-size: 9px;
    font-style: normal;
}

.operations-v7-evidence-rail b.record {
    border-color: #14532d;
    background: #082b1a;
    color: #86efac;
}

.operations-v7-evidence-rail b.accounting {
    border-color: #6d5312;
    background: #2a2410;
    color: #fde68a;
}


/* ----------------------------------------------------------
   LOWER PAGE READABILITY ALIGNMENT
   ---------------------------------------------------------- */

.operations-command-page .operations-command-section-heading
> div > span {
    color: #7dd3fc !important;
    font-size: 9px !important;
    font-weight: 950 !important;
}

.operations-command-page .operations-command-section-heading h2 {
    color: #f8fafc !important;
    font-size: 21px !important;
}

.operations-command-page .operations-command-section-heading > p {
    color: #a7b7c5 !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
}

.operations-command-page .operations-support-card p,
.operations-command-page .operations-assurance-card p,
.operations-command-page .operations-command-activity-row p {
    color: #b5c3cf !important;
}


/* ----------------------------------------------------------
   ZOOM / RESPONSIVE MODES
   ---------------------------------------------------------- */

@container (max-width: 1160px) {

    .operations-v7-hero {
        grid-template-columns:
            minmax(0,1fr);
    }

    .operations-v7-hero-side {
        display: grid;
        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,.44fr);
        gap: 10px;
        align-items: center;
    }

    .operations-v7-engine-flow {
        grid-template-columns:
            minmax(0,.78fr)
            minmax(0,1.22fr);
        gap: 10px;
    }

    .operations-v7-engine-arrow {
        display: none;
    }

    .operations-v7-feeders {
        grid-column: 1;
        grid-row: 1;
    }

    .operations-v7-manifold {
        grid-column: 2;
        grid-row: 1;
    }

    .operations-v7-output.event,
    .operations-v7-output.accounting {
        min-height: 125px;
    }
}

@container (max-width: 980px) {

    .operations-v7-control-strip {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .operations-v7-stage {
        min-height: 92px;
    }
}

@container (max-width: 780px) {

    .operations-v7-hero-main {
        flex-direction: column;
    }

    .operations-v7-hero-side {
        grid-template-columns:
            minmax(0,1fr);
    }

    .operations-v7-actions {
        grid-template-columns:
            minmax(0,1fr);
    }

    .operations-v7-action:first-child {
        border-right: 0;
        border-bottom:
            1px solid rgba(148,163,184,.10);
    }

    .operations-v7-control-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-v7-control-strip {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .operations-v7-engine-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .operations-v7-engine-flow {
        grid-template-columns:
            minmax(0,1fr);
        padding: 12px;
    }

    .operations-v7-feeders,
    .operations-v7-manifold,
    .operations-v7-output {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .operations-v7-manifold-main {
        grid-template-columns:
            minmax(0,1fr);
    }

    .operations-v7-evidence-rail {
        grid-template-columns:
            minmax(0,1fr);
        gap: 8px;
    }
}

@container (max-width: 520px) {

    .operations-v7-control-strip {
        grid-template-columns:
            minmax(0,1fr);
    }

    .operations-v7-manifold-visual {
        min-height: 150px;
        overflow: hidden;
    }

    .operations-v7-manifold-pipe.third {
        right: 44px;
    }
}

@media (max-width: 900px) {

    .operations-command-page .operations-command-container {
        padding:
            0 clamp(14px,3vw,20px) 40px !important;
    }
}



/* ==========================================================
   OPERATIONS V8 — PIPELINE STANDARD
   Dominant physical pipe run + readable zoom modes.
   ========================================================== */

/* ----------------------------------------------------------
   READABILITY POLISH
   ---------------------------------------------------------- */

.operations-command-page .operations-v7-hero-copy > p,
.operations-command-page .operations-v7-control-line > small,
.operations-command-page .operations-v7-stage > div > small,
.operations-command-page .operations-support-card p,
.operations-command-page .operations-assurance-card p,
.operations-command-page .operations-command-activity-row p {
    color: #c4d0db !important;
}

.operations-command-page .operations-v7-stage > div > span {
    font-size: 9px !important;
}

.operations-command-page .operations-v7-stage > div > small {
    font-size: 8px !important;
}

.operations-command-page .operations-v7-stage > div > strong {
    font-size: clamp(18px,1.45vw,23px) !important;
}


/* ==========================================================
   PHYSICAL PIPE ENGINE
   ========================================================== */

.operations-v8-engine {
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 14px;
    background:
        linear-gradient(
            rgba(56,189,248,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56,189,248,.018) 1px,
            transparent 1px
        ),
        #071d2c;
    background-size:
        26px 26px,
        26px 26px,
        auto;
    container-type: inline-size;
    box-shadow:
        inset 0 3px 0 rgba(56,189,248,.12);
}

.operations-v8-engine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(56,189,248,.09);
    background: #0a2031;
}

.operations-v8-engine-header > div > span {
    display: block;
    color: #7dd3fc;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .06em;
}

.operations-v8-engine-header h2 {
    margin: 4px 0 0;
    color: #f8fafc;
    font-size: clamp(19px,1.55vw,23px);
}

.operations-v8-engine-state {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(74,222,128,.22);
    border-radius: 999px;
    background: #082a2c;
    font-size: 8px;
    font-weight: 950;
    white-space: nowrap;
}

.operations-v8-engine-state > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
}


/* ----------------------------------------------------------
   PIPE CHASSIS
   ---------------------------------------------------------- */

.operations-v8-pipe-chassis {
    min-width: 0;
    padding: 18px 16px 15px;
}

.operations-v8-pipe-rack {
    display: grid;
    grid-template-columns:
        minmax(156px,.82fr)
        minmax(58px,.26fr)
        minmax(156px,.82fr)
        minmax(58px,.26fr)
        minmax(156px,.82fr)
        minmax(58px,.26fr)
        minmax(176px,.92fr)
        minmax(58px,.26fr)
        minmax(162px,.84fr);
    gap: 0;
    align-items: center;
    min-width: 0;
    min-height: 204px;
    padding: 16px 14px;
    border: 1px solid #18455f;
    border-radius: 13px;
    background:
        linear-gradient(
            180deg,
            #0a2233,
            #081b29
        );
    box-shadow:
        inset 0 0 0 2px #061824,
        inset 0 2px 0 rgba(125,211,252,.06),
        0 16px 40px rgba(2,12,24,.22);
}


/* ----------------------------------------------------------
   PIPE NODES — less boxy, more hardware station
   ---------------------------------------------------------- */

.operations-v8-node {
    position: relative;
    display: grid;
    grid-template-columns:
        62px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    min-height: 126px;
    padding: 18px 12px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.operations-v8-node:hover {
    background: rgba(255,255,255,.018);
    color: inherit;
    transform: translateY(-1px);
}

.operations-v8-node-index {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(56,189,248,.20);
    border-radius: 6px;
    background: #0b2639;
    box-shadow: 0 0 0 4px rgba(5,20,33,.82);
    color: #7dd3fc;
    font-size: 6px;
    font-weight: 950;
}

.operations-v8-node > div {
    min-width: 0;
}

.operations-v8-node > div > span,
.operations-v8-node > div > strong,
.operations-v8-node > div > p {
    display: block;
}

.operations-v8-node > div > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .04em;
}

.operations-v8-node.pump > div > span {
    color: #93c5fd;
}

.operations-v8-node.meter > div > span,
.operations-v8-node.processing > div > span {
    color: #86efac;
}

.operations-v8-node.accounting > div > span {
    color: #fde68a;
}

.operations-v8-node > div > strong {
    margin-top: 7px;
    color: #f8fafc;
    font-size: clamp(18px,1.45vw,23px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.operations-v8-node.processing > div > strong {
    color: #86efac;
}

.operations-v8-node.accounting > div > strong {
    color: #fde68a;
}

.operations-v8-node > div > strong > small {
    color: #becbd6;
    font-size: 8px;
}

.operations-v8-node > div > p {
    margin: 6px 0 0;
    color: #cfdae3;
    font-size: 8px;
    line-height: 1.35;
}


/* ----------------------------------------------------------
   SOURCE TANK
   ---------------------------------------------------------- */

.operations-v8-source-tank {
    position: relative;
    display: block;
    width: 56px;
    height: 88px;
}

.operations-v8-source-tank > i {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 42px;
    height: 74px;
    border: 3px solid #7dd3fc;
    border-radius: 19px 19px 6px 6px;
    background: #041a27;
}

.operations-v8-source-tank > i::before {
    position: absolute;
    top: -6px;
    left: 5px;
    width: 26px;
    height: 9px;
    border: 2px solid #7dd3fc;
    border-radius: 50%;
    background: #041a27;
    content: "";
}

.operations-v8-source-tank > b {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    height: 53%;
    border-radius: 0 0 3px 3px;
    background:
        linear-gradient(
            180deg,
            #35b7df,
            #0a7898
        );
}

.operations-v8-source-tank > em {
    position: absolute;
    right: 2px;
    bottom: 18px;
    width: 11px;
    height: 5px;
    border-radius: 2px;
    background: #7dd3fc;
}


/* ----------------------------------------------------------
   PUMP
   ---------------------------------------------------------- */

.operations-v8-pump {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
}

.operations-v8-pump > i {
    position: absolute;
    inset: 4px;
    border: 3px solid #93c5fd;
    border-radius: 50%;
    background: #071d30;
}

.operations-v8-pump > b {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 24px;
    height: 24px;
    border: 3px solid #93c5fd;
    border-radius: 50%;
}

.operations-v8-pump > b::before,
.operations-v8-pump > b::after {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
    content: "";
}

.operations-v8-pump > b::after {
    top: -15px;
    left: 8px;
    width: 5px;
    height: 14px;
    border: 0;
    border-radius: 2px;
    background: #93c5fd;
}

.operations-v8-pump > em {
    position: absolute;
    top: 27px;
    right: -5px;
    width: 12px;
    height: 6px;
    border-radius: 2px;
    background: #93c5fd;
}


/* ----------------------------------------------------------
   METER
   ---------------------------------------------------------- */

.operations-v8-meter {
    position: relative;
    display: grid;
    width: 60px;
    height: 68px;
    place-items: center;
    border: 3px solid #86efac;
    border-radius: 9px;
    background: #06251f;
}

.operations-v8-meter > i {
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    height: 13px;
    border: 1px solid #2c8a56;
    border-radius: 3px;
    background: #031b17;
}

.operations-v8-meter > b {
    margin-top: 13px;
    color: #86efac;
    font-size: 17px;
    font-weight: 950;
}

.operations-v8-meter > em {
    position: absolute;
    right: 6px;
    bottom: 6px;
    color: #4ade80;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
}


/* ----------------------------------------------------------
   PROCESSING RECORD
   ---------------------------------------------------------- */

.operations-v8-event {
    position: relative;
    display: block;
    width: 66px;
    height: 84px;
    border: 3px solid #4ade80;
    border-radius: 8px;
    background: linear-gradient(180deg,#0a3426,#07291f);
    box-shadow:
        inset 0 0 20px rgba(34,197,94,.08),
        0 0 18px rgba(34,197,94,.08);
}

.operations-v8-event > i {
    position: absolute;
    top: 17px;
    right: 11px;
    left: 11px;
    height: 2px;
    background: #57d68c;
    box-shadow:
        0 10px 0 #2d8d52,
        0 20px 0 rgba(45,141,82,.75);
}

.operations-v8-event > b {
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    color: #d9ffe6;
    font-size: 10px;
    text-align: center;
}

.operations-v8-event > em {
    position: absolute;
    right: -5px;
    bottom: 6px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 3px solid #0b2234;
    border-radius: 50%;
    background: #22c55e;
    color: #052e16;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
    box-shadow: 0 0 12px rgba(34,197,94,.25);
}


/* ----------------------------------------------------------
   ACCOUNTING TERMINAL
   ---------------------------------------------------------- */

.operations-v8-accounting {
    position: relative;
    display: grid;
    width: 61px;
    height: 72px;
    grid-template-rows:
        28px 1fr;
    place-items: center;
    border: 2px solid #b48819;
    border-radius: 8px;
    background:
        linear-gradient(
            160deg,
            #2a2514,
            #111d27
        );
}

.operations-v8-accounting > i {
    display: grid;
    width: 45px;
    height: 22px;
    place-items: center;
    margin-top: 6px;
    border: 1px solid #6d5515;
    border-radius: 3px;
    background: #17190f;
    color: #fde68a;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.operations-v8-accounting > b {
    color: #fbbf24;
    font-size: 11px;
}

.operations-v8-accounting > em {
    position: absolute;
    right: 5px;
    bottom: 4px;
    color: #fde68a;
    font-size: 10px;
    font-style: normal;
}


/* ----------------------------------------------------------
   PIPE LINKS / VALVES
   ---------------------------------------------------------- */

.operations-v8-pipe-link {
    position: relative;
    display: block;
    height: 96px;
    min-width: 0;
}

.operations-v8-pipe-link > i {
    position: absolute;
    top: 38px;
    right: 8px;
    left: 8px;
    height: 8px;
    border-top: 1px solid rgba(154,230,255,.85);
    border-bottom: 1px solid rgba(28,108,140,.95);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            #5ac7e8,
            #1c6f8c
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(2,12,24,.34),
        0 0 14px rgba(45,157,192,.12);
}

.operations-v8-pipe-link > i::before,
.operations-v8-pipe-link > i::after {
    position: absolute;
    top: -4px;
    width: 8px;
    height: 14px;
    border: 1px solid rgba(154,230,255,.65);
    border-radius: 3px;
    background: linear-gradient(180deg,#d8f4ff,#7bcceb);
    box-shadow: 0 0 8px rgba(125,211,252,.18);
    content: "";
}

.operations-v8-pipe-link > i::before {
    left: 2px;
}

.operations-v8-pipe-link > i::after {
    right: 2px;
}

.operations-v8-pipe-link > b {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 28px;
    height: 28px;
    border: 2px solid #d7f0fa;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #163d56, #0a2435 70%);
    box-shadow:
        0 0 0 4px rgba(6,24,36,.92),
        0 0 16px rgba(125,211,252,.12);
    transform: translateX(-50%);
}

.operations-v8-pipe-link > b::before {
    position: absolute;
    top: 8px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #e8f7ff;
    border-right: 2px solid #e8f7ff;
    content: "";
    transform: rotate(45deg);
}

.operations-v8-pipe-link > b::after {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(125,211,252,.28);
    border-radius: 50%;
    content: "";
}

.operations-v8-pipe-link > em {
    position: absolute;
    top: 61px;
    left: 50%;
    min-width: 58px;
    color: #bfe8f7;
    font-size: 0;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    opacity: .98;
}

.operations-v8-pipe-link > em::before {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid rgba(56,189,248,.14);
    border-radius: 999px;
    background: rgba(7,29,44,.78);
    color: #bfe8f7;
    font-size: 7px;
    line-height: 1;
    content: "Flow";
}

.operations-v8-pipe-link.one > em::before {
    content: "Route";
}

.operations-v8-pipe-link.two > em::before {
    content: "Measure";
}

.operations-v8-pipe-link.three > em::before {
    content: "Record";
}

.operations-v8-pipe-link.four > em::before {
    content: "Handoff";
}


/* ----------------------------------------------------------
   FLOW READOUT
   ---------------------------------------------------------- */

.operations-v8-flow-readout {
    display: grid;
    grid-template-columns:
        minmax(160px,.60fr)
        minmax(180px,.78fr)
        minmax(210px,.62fr);
    gap: 14px;
    align-items: center;
    margin-top: 11px;
    padding: 10px 13px;
    border-top: 1px solid rgba(56,189,248,.09);
    border-bottom: 1px solid rgba(56,189,248,.07);
    background:
        linear-gradient(
            90deg,
            rgba(14,165,233,.045),
            rgba(34,197,94,.035),
            rgba(15,23,42,.12)
        );
}

.operations-v8-flow-readout-title > span,
.operations-v8-flow-readout-title > small {
    display: block;
}

.operations-v8-flow-readout-title > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .05em;
}

.operations-v8-flow-readout-title > small {
    margin-top: 3px;
    color: #b3c1cd;
    font-size: 8px;
}

.operations-v8-flow-readout > strong {
    color: #86efac;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: clamp(30px,2.7vw,42px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.operations-v8-flow-readout > strong > small {
    color: #7dd3fc;
    font-size: 9px;
}

.operations-v8-flow-control {
    text-align: right;
}

.operations-v8-flow-control > span,
.operations-v8-flow-control > small {
    display: block;
}

.operations-v8-flow-control > span {
    color: #86efac;
    font-size: 8px;
    font-weight: 950;
}

.operations-v8-flow-control > span > i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #4ade80;
}

.operations-v8-flow-control > small {
    margin-top: 4px;
    color: #b7c4cf;
    font-size: 8px;
}


/* ----------------------------------------------------------
   EVIDENCE RAIL
   ---------------------------------------------------------- */

.operations-v8-evidence-rail {
    display: grid;
    grid-template-columns:
        135px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid rgba(56,189,248,.08);
    background: #091c2b;
}

.operations-v8-evidence-rail > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
}

.operations-v8-evidence-rail > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.operations-v8-evidence-rail b {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #17384d;
    border-radius: 4px;
    background: #0a2537;
    color: #d1e4f0;
    font-size: 7px;
}

.operations-v8-evidence-rail i {
    color: #7dd3fc;
    font-size: 9px;
    font-style: normal;
}

.operations-v8-evidence-rail b.record {
    border-color: #14532d;
    background: #082b1a;
    color: #86efac;
}

.operations-v8-evidence-rail b.accounting {
    border-color: #6d5312;
    background: #2a2410;
    color: #fde68a;
}


/* ==========================================================
   ZOOM / RESPONSIVE MODES
   ========================================================== */

/* 110–125% style width: switch to 3 + 2 rack before any collision. */
@container (max-width: 1180px) {

    .operations-v8-pipe-rack {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
        gap: 7px;
        align-items: stretch;
        padding: 10px;
    }

    .operations-v8-pipe-link {
        display: none;
    }

    .operations-v8-node {
        min-height: 116px;
        border: 1px solid rgba(56,189,248,.11);
        border-radius: 8px;
        background: #091f30;
    }

    .operations-v8-node.processing {
        border-color: rgba(74,222,128,.15);
        background: #082622;
    }

    .operations-v8-node.accounting {
        border-color: rgba(251,191,36,.15);
        background: #211f13;
    }

    .operations-v8-flow-readout {
        grid-template-columns:
            minmax(0,1fr)
            minmax(170px,.72fr);
    }

    .operations-v8-flow-control {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}


/* Tablet / high zoom: two columns. */
@container (max-width: 820px) {

    .operations-v8-engine-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .operations-v8-pipe-rack {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .operations-v8-flow-readout {
        grid-template-columns:
            minmax(0,1fr);
        text-align: left;
    }

    .operations-v8-flow-readout > strong {
        text-align: left;
    }

    .operations-v8-flow-control {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .operations-v8-evidence-rail {
        grid-template-columns:
            minmax(0,1fr);
        gap: 8px;
    }
}


/* Extreme zoom / phone: true vertical process schematic. */
@container (max-width: 520px) {

    .operations-v8-pipe-rack {
        grid-template-columns:
            minmax(0,1fr);
        gap: 0;
        padding: 8px;
    }

    .operations-v8-node {
        position: relative;
        min-height: 108px;
        margin-bottom: 24px;
    }

    .operations-v8-node:not(:last-of-type)::after {
        position: absolute;
        left: 50%;
        bottom: -25px;
        width: 8px;
        height: 25px;
        border-right: 2px solid #7dd3fc;
        border-left: 2px solid #17617e;
        background: #2789aa;
        content: "";
        transform: translateX(-50%);
    }

    .operations-v8-node:not(:last-of-type)::before {
        position: absolute;
        left: 50%;
        bottom: -17px;
        z-index: 2;
        width: 15px;
        height: 15px;
        border: 2px solid #c9e7f3;
        background: #0a2435;
        content: "";
        transform:
            translateX(-50%)
            rotate(45deg);
    }

    .operations-v8-node:last-of-type {
        margin-bottom: 0;
    }
}



/* ==========================================================
   OPERATIONS V12 — CLEAN PIPE CONNECTORS
   Station-first design. Connectors are simple directional pipes,
   not standalone UI widgets.
   ========================================================== */

/* More breathing room between the hardware stations. */
.operations-command-page .operations-v8-pipe-rack {
    grid-template-columns:
        minmax(160px,.84fr)
        minmax(56px,.26fr)
        minmax(160px,.84fr)
        minmax(56px,.26fr)
        minmax(160px,.84fr)
        minmax(56px,.26fr)
        minmax(182px,.94fr)
        minmax(56px,.26fr)
        minmax(166px,.86fr) !important;
    min-height: 208px !important;
    padding: 16px 14px !important;
}

/* Hardware remains visually primary. */
.operations-command-page .operations-v8-node {
    gap: 12px !important;
    padding: 18px 12px 12px !important;
}

.operations-command-page .operations-v8-node::after {
    position: absolute;
    right: 20px;
    bottom: 9px;
    left: 20px;
    height: 15px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(56,189,248,.065),
            transparent 67%
        );
    pointer-events: none;
    content: "";
}

.operations-command-page .operations-v8-node.processing::after {
    background:
        radial-gradient(
            ellipse at center,
            rgba(74,222,128,.07),
            transparent 67%
        );
}

.operations-command-page .operations-v8-node.accounting::after {
    background:
        radial-gradient(
            ellipse at center,
            rgba(251,191,36,.065),
            transparent 67%
        );
}

/* Stage badge stays clear of hardware. */
.operations-command-page .operations-v8-node-index {
    top: 7px !important;
    left: 8px !important;
    z-index: 5;
    width: 24px !important;
    height: 24px !important;
    box-shadow:
        0 0 0 4px rgba(5,20,33,.92) !important;
}

/* ----------------------------------------------------------
   CONNECTOR = PIPE + COUPLERS + ONE DIRECTION ARROW
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-pipe-link {
    position: relative !important;
    display: block !important;
    height: 84px !important;
    min-width: 0 !important;
}

/* Pipe body. */
.operations-command-page .operations-v8-pipe-link > i {
    position: absolute !important;
    top: 37px !important;
    right: 4px !important;
    left: 4px !important;
    height: 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            180deg,
            #77d7f2 0%,
            #2a94b7 48%,
            #16617f 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(2,12,24,.34),
        0 0 11px rgba(56,189,248,.12) !important;
}

/* Flange/coupler ends. */
.operations-command-page .operations-v8-pipe-link > i::before,
.operations-command-page .operations-v8-pipe-link > i::after {
    position: absolute !important;
    top: -3px !important;
    width: 7px !important;
    height: 14px !important;
    border: 1px solid rgba(186,230,253,.72) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(
            180deg,
            #d9f5ff,
            #72c7e5
        ) !important;
    box-shadow:
        0 0 6px rgba(125,211,252,.14) !important;
    content: "" !important;
}

.operations-command-page .operations-v8-pipe-link > i::before {
    left: -1px !important;
}

.operations-command-page .operations-v8-pipe-link > i::after {
    right: -1px !important;
}

/* Kill the standalone valve/circle control. */
.operations-command-page .operations-v8-pipe-link > b {
    display: none !important;
}

/* One obvious direction arrow, integrated with the pipe. */
.operations-command-page .operations-v8-pipe-link > em {
    position: absolute !important;
    top: 24px !important;
    left: 50% !important;
    z-index: 3;
    display: grid !important;
    width: 30px !important;
    height: 34px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #e1f6ff !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow:
        0 0 8px rgba(125,211,252,.25);
    transform: translateX(-50%) !important;
}

/* Remove all old pseudo-label/pill content from the arrow. */
.operations-command-page .operations-v8-pipe-link > em::before,
.operations-command-page .operations-v8-pipe-link > em::after {
    display: none !important;
    content: none !important;
}

/* Semantic progression through the physical lifecycle. */
.operations-command-page .operations-v8-pipe-link.two > i {
    background:
        linear-gradient(
            180deg,
            #7acdf5,
            #3c87c1 48%,
            #235c91
        ) !important;
}

.operations-command-page .operations-v8-pipe-link.two > em {
    color: #dbeafe !important;
}

.operations-command-page .operations-v8-pipe-link.three > i {
    background:
        linear-gradient(
            180deg,
            #8be9b0,
            #39ad72 48%,
            #197a4a
        ) !important;
}

.operations-command-page .operations-v8-pipe-link.three > em {
    color: #dcfce7 !important;
}

.operations-command-page .operations-v8-pipe-link.four > i {
    background:
        linear-gradient(
            90deg,
            #4ade80 0%,
            #77c66f 34%,
            #c59c32 70%,
            #fbbf24 100%
        ) !important;
}

.operations-command-page .operations-v8-pipe-link.four > em {
    color: #fde68a !important;
}

/* Sharper processing record, with check safely inside its footprint. */
.operations-command-page .operations-v8-event {
    width: 66px !important;
    height: 84px !important;
    border-radius: 8px !important;
    background:
        linear-gradient(
            180deg,
            #0a3426,
            #07291f
        ) !important;
}

.operations-command-page .operations-v8-event > em {
    right: -3px !important;
    bottom: 8px !important;
    width: 19px !important;
    height: 19px !important;
    font-size: 8px !important;
}

/* Supporting copy should never look washed out. */
.operations-command-page .operations-v8-node > div > p {
    color: #d0dbe4 !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
}

.operations-command-page .operations-v8-node > div > strong > small {
    color: #c6d3dd !important;
}

/* ----------------------------------------------------------
   ZOOM MODE
   Once the line cannot stay elegant, stop drawing fake connectors.
   The rack cards become the obvious sequence.
   ---------------------------------------------------------- */

@container (max-width: 1180px) {
    .operations-command-page .operations-v8-pipe-link {
        display: none !important;
    }

    .operations-command-page .operations-v8-node {
        border:
            1px solid rgba(56,189,248,.11) !important;
        border-radius: 8px !important;
        background: #091f30 !important;
    }

    .operations-command-page .operations-v8-node.processing {
        border-color:
            rgba(74,222,128,.17) !important;
        background: #082622 !important;
    }

    .operations-command-page .operations-v8-node.accounting {
        border-color:
            rgba(251,191,36,.17) !important;
        background: #211f13 !important;
    }

    /* Simple sequential footer arrow inside each rack card. */
    .operations-command-page
    .operations-v8-node:not(.accounting)::before {
        position: absolute;
        right: 10px;
        bottom: 8px;
        color: #7dd3fc;
        font-size: 13px;
        font-weight: 900;
        content: "→";
    }

    .operations-command-page
    .operations-v8-node.processing::before {
        color: #86efac;
    }
}


/* ==========================================================
   OPERATIONS V13 — INDUSTRIAL TRANSFER SKID
   A physical twin to Accounting's calculator engine.
   Equipment is the story; the pipe is shared infrastructure.
   ========================================================== */

.operations-command-page .operations-v8-engine {
    position: relative;
    isolation: isolate;
    margin-top: 18px;
    border: 1px solid rgba(102, 205, 243, .27);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 18%, rgba(14, 165, 233, .12), transparent 30%),
        radial-gradient(circle at 78% 36%, rgba(34, 197, 94, .08), transparent 27%),
        linear-gradient(rgba(125, 211, 252, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .025) 1px, transparent 1px),
        linear-gradient(155deg, #071d2d 0%, #061724 52%, #071c29 100%);
    background-size: auto, auto, 28px 28px, 28px 28px, auto;
    box-shadow:
        inset 0 1px 0 rgba(186, 230, 253, .16),
        inset 0 -28px 80px rgba(2, 8, 23, .28),
        0 22px 58px rgba(2, 12, 27, .34);
}

.operations-command-page .operations-v8-engine::before {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    z-index: -1;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, transparent, #38bdf8 28%, #4ade80 72%, transparent);
    box-shadow: 0 0 24px rgba(56, 189, 248, .35);
    content: "";
}

.operations-command-page .operations-v8-engine-header {
    min-height: 78px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(125, 211, 252, .13);
    background:
        linear-gradient(90deg, rgba(14, 165, 233, .08), transparent 42%),
        rgba(5, 24, 38, .82);
    backdrop-filter: blur(10px);
}

.operations-command-page .operations-v8-engine-header > div > span {
    color: #7dd3fc;
    font-size: 9px;
    letter-spacing: .12em;
}

.operations-command-page .operations-v8-engine-header h2 {
    margin-top: 5px;
    color: #f8fbff;
    font-size: clamp(20px, 1.65vw, 27px);
    font-weight: 760;
    letter-spacing: -.025em;
}

.operations-command-page .operations-v8-engine-state {
    min-height: 34px;
    padding: 0 13px;
    border-color: rgba(74, 222, 128, .30);
    background: linear-gradient(180deg, rgba(11, 62, 51, .88), rgba(7, 43, 39, .92));
    color: #bbf7d0;
    box-shadow: inset 0 1px 0 rgba(187, 247, 208, .09), 0 0 18px rgba(34, 197, 94, .08);
    letter-spacing: .055em;
}

.operations-command-page .operations-v8-pipe-chassis {
    position: relative;
    padding: 20px 18px 17px;
}

.operations-command-page .operations-v8-pipe-chassis::before,
.operations-command-page .operations-v8-pipe-chassis::after {
    position: absolute;
    top: 35px;
    bottom: 23px;
    width: 5px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 99px;
    background: linear-gradient(180deg, #123b51, #071b28);
    box-shadow: inset 1px 0 rgba(255, 255, 255, .05);
    content: "";
}

.operations-command-page .operations-v8-pipe-chassis::before { left: 8px; }
.operations-command-page .operations-v8-pipe-chassis::after { right: 8px; }

.operations-command-page .operations-v8-pipe-rack {
    position: relative;
    grid-template-columns:
        minmax(168px, .94fr)
        minmax(34px, .19fr)
        minmax(168px, .94fr)
        minmax(34px, .19fr)
        minmax(168px, .94fr)
        minmax(34px, .19fr)
        minmax(188px, 1.06fr)
        minmax(34px, .19fr)
        minmax(172px, .96fr) !important;
    min-height: 300px !important;
    padding: 18px 16px 22px !important;
    border: 1px solid rgba(105, 183, 217, .34);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(18, 58, 79, .38), transparent 34%),
        repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(125, 211, 252, .016) 48px),
        linear-gradient(180deg, #0a2334 0%, #071a28 76%, #061520 100%);
    box-shadow:
        inset 0 0 0 3px rgba(2, 14, 24, .76),
        inset 0 1px 0 rgba(186, 230, 253, .09),
        0 18px 38px rgba(1, 8, 18, .26);
}

/* Shared skid floor and process pipe: visually binds every station. */
.operations-command-page .operations-v8-pipe-rack::before {
    position: absolute;
    right: 21px;
    bottom: 29px;
    left: 21px;
    height: 12px;
    border: 1px solid #1d6e8e;
    border-radius: 999px;
    background: linear-gradient(180deg, #55bddb 0%, #237c9c 44%, #104860 100%);
    box-shadow:
        inset 0 2px 0 rgba(225, 247, 255, .24),
        0 0 18px rgba(56, 189, 248, .16),
        0 16px 0 -4px #0a2c3d,
        0 17px 0 -3px rgba(125, 211, 252, .16);
    content: "";
}

.operations-command-page .operations-v8-pipe-rack::after {
    position: absolute;
    right: 30px;
    bottom: 33px;
    left: 30px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #38bdf8, #60a5fa 38%, #4ade80 73%, #fbbf24);
    box-shadow: 0 0 10px rgba(56, 189, 248, .30);
    content: "";
}

.operations-command-page .operations-v8-node {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0 !important;
    padding: 18px 10px 31px !important;
    border: 1px solid transparent !important;
    border-radius: 12px;
    background: transparent !important;
    text-align: center;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.operations-command-page .operations-v8-node:hover {
    border-color: rgba(125, 211, 252, .22) !important;
    background: linear-gradient(180deg, rgba(125, 211, 252, .055), rgba(4, 22, 34, .30)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 13px 26px rgba(1, 10, 21, .18);
    transform: translateY(-3px);
}

.operations-command-page .operations-v8-node.processing:hover {
    border-color: rgba(74, 222, 128, .25) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, .07), rgba(4, 28, 25, .30)) !important;
}

.operations-command-page .operations-v8-node.accounting:hover {
    border-color: rgba(251, 191, 36, .25) !important;
    background: linear-gradient(180deg, rgba(251, 191, 36, .065), rgba(32, 27, 10, .28)) !important;
}

.operations-command-page .operations-v8-node::after {
    right: 16px;
    bottom: 15px;
    left: 16px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, .20), transparent 68%);
}

.operations-command-page .operations-v8-node-index {
    top: 4px !important;
    left: 5px !important;
    width: 27px !important;
    height: 27px !important;
    border-color: rgba(125, 211, 252, .32);
    border-radius: 7px;
    background: linear-gradient(155deg, #10364d, #081f30);
    box-shadow: 0 0 0 4px rgba(5, 20, 32, .92), inset 0 1px rgba(255, 255, 255, .07) !important;
    color: #bae6fd;
    font-size: 7px;
    letter-spacing: .04em;
}

.operations-command-page .operations-v8-node > div {
    width: 100%;
    margin-top: 13px;
}

.operations-command-page .operations-v8-node > div > span {
    font-size: 9px;
    letter-spacing: .10em;
}

.operations-command-page .operations-v8-node > div > strong {
    margin-top: 7px;
    font-size: clamp(22px, 1.65vw, 29px);
    letter-spacing: -.035em;
}

.operations-command-page .operations-v8-node > div > strong > small {
    margin-left: 2px;
    font-size: 9px !important;
}

.operations-command-page .operations-v8-node > div > p {
    max-width: 150px;
    margin: 7px auto 0;
    color: #b9cbd7 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

/* ----------------------------------------------------------
   LARGE HARDWARE — SOURCE VESSEL
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-source-tank {
    width: 100px;
    height: 126px;
    margin-top: 3px;
    filter: drop-shadow(0 13px 13px rgba(0, 0, 0, .28));
}

.operations-command-page .operations-v8-source-tank > i {
    top: 10px;
    left: 17px;
    width: 66px;
    height: 104px;
    overflow: hidden;
    border: 3px solid #9bdcf2;
    border-radius: 30px 30px 10px 10px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 20%, transparent 77%, rgba(255, 255, 255, .05)),
        #061d2b;
    box-shadow:
        inset 8px 0 15px rgba(125, 211, 252, .055),
        inset -8px 0 15px rgba(2, 12, 24, .30),
        0 0 22px rgba(56, 189, 248, .10);
}

.operations-command-page .operations-v8-source-tank > i::before {
    top: -7px;
    left: 9px;
    width: 41px;
    height: 13px;
    border-color: #b9e8f7;
    background: #082638;
}

.operations-command-page .operations-v8-source-tank > i::after {
    position: absolute;
    top: 26px;
    right: 7px;
    width: 4px;
    height: 54px;
    border-radius: 99px;
    background: repeating-linear-gradient(180deg, #7dd3fc 0 2px, transparent 2px 7px);
    opacity: .62;
    content: "";
}

.operations-command-page .operations-v8-source-tank > b {
    right: 21px;
    bottom: 16px;
    left: 21px;
    height: 58%;
    overflow: hidden;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, rgba(56, 189, 248, .92), #087d9f 52%, #075b78);
    box-shadow: inset 0 7px 12px rgba(186, 230, 253, .10), 0 0 16px rgba(14, 165, 233, .14);
}

.operations-command-page .operations-v8-source-tank > b::before {
    position: absolute;
    top: -3px;
    right: -6px;
    left: -6px;
    height: 8px;
    border: 2px solid rgba(186, 230, 253, .72);
    border-radius: 50%;
    content: "";
}

.operations-command-page .operations-v8-source-tank > em {
    right: 1px;
    bottom: 17px;
    width: 29px;
    height: 10px;
    border: 1px solid #8fdaf0;
    border-radius: 2px 8px 8px 2px;
    background: linear-gradient(180deg, #7dd3fc, #237c9c);
    box-shadow: 0 0 10px rgba(56, 189, 248, .18);
}

/* ----------------------------------------------------------
   LARGE HARDWARE — PUMP / MOTOR SKID
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-pump {
    width: 116px;
    height: 126px;
    margin-top: 3px;
    filter: drop-shadow(0 13px 13px rgba(0, 0, 0, .30));
}

.operations-command-page .operations-v8-pump > i {
    top: 25px;
    left: 13px;
    width: 74px;
    height: 74px;
    border: 4px solid #a9d7fb;
    background:
        radial-gradient(circle at 42% 43%, #183e59 0 18%, #082339 19% 42%, #0d3048 43% 100%);
    box-shadow: inset 0 0 0 5px rgba(125, 211, 252, .05), 0 0 21px rgba(96, 165, 250, .11);
}

.operations-command-page .operations-v8-pump > i::before {
    position: absolute;
    top: -17px;
    left: 22px;
    width: 31px;
    height: 18px;
    border: 3px solid #a9d7fb;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #09273c;
    content: "";
}

.operations-command-page .operations-v8-pump > i::after {
    position: absolute;
    right: -31px;
    bottom: 5px;
    width: 34px;
    height: 32px;
    border: 3px solid #7fb9e6;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: repeating-linear-gradient(90deg, #123c5a 0 4px, #092a40 4px 8px);
    content: "";
}

.operations-command-page .operations-v8-pump > b {
    top: 46px;
    left: 35px;
    width: 30px;
    height: 30px;
    border-color: #d2efff;
    box-shadow: 0 0 0 7px rgba(96, 165, 250, .09);
}

.operations-command-page .operations-v8-pump > b::before {
    top: 8px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-color: #d2efff;
    box-shadow: 0 0 10px rgba(125, 211, 252, .35);
}

.operations-command-page .operations-v8-pump > b::after {
    top: -23px;
    left: 11px;
    width: 6px;
    height: 22px;
    background: #a9d7fb;
}

.operations-command-page .operations-v8-pump > em {
    top: auto;
    right: 10px;
    bottom: 13px;
    left: 10px;
    width: auto;
    height: 11px;
    border: 1px solid #3d79a8;
    border-radius: 3px;
    background: linear-gradient(180deg, #27618a, #123b58);
}

/* ----------------------------------------------------------
   LARGE HARDWARE — TOTALIZER
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-meter {
    width: 105px;
    height: 126px;
    margin-top: 3px;
    border: 3px solid #8ee7b1;
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(74, 222, 128, .08), transparent 40%),
        #071f22;
    box-shadow:
        inset 0 0 0 5px rgba(1, 20, 18, .60),
        inset 0 1px rgba(220, 252, 231, .12),
        0 0 24px rgba(34, 197, 94, .10),
        0 13px 13px rgba(0, 0, 0, .27);
}

.operations-command-page .operations-v8-meter::before,
.operations-command-page .operations-v8-meter::after {
    position: absolute;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2b684b;
    box-shadow: 0 96px #2b684b;
    content: "";
}

.operations-command-page .operations-v8-meter::before { left: 10px; }
.operations-command-page .operations-v8-meter::after { right: 10px; }

.operations-command-page .operations-v8-meter > i {
    top: 17px;
    right: 14px;
    left: 14px;
    height: 38px;
    border-color: #2d8f5a;
    border-radius: 6px;
    background:
        repeating-linear-gradient(90deg, rgba(74, 222, 128, .035) 0 1px, transparent 1px 8px),
        #021a16;
    box-shadow: inset 0 0 16px rgba(34, 197, 94, .09);
}

.operations-command-page .operations-v8-meter > i::after {
    position: absolute;
    right: 7px;
    bottom: 7px;
    left: 7px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
    box-shadow: 0 0 6px #22c55e;
    content: "";
}

.operations-command-page .operations-v8-meter > b {
    margin-top: 30px;
    color: #a7f3d0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 25px;
    text-shadow: 0 0 12px rgba(74, 222, 128, .26);
}

.operations-command-page .operations-v8-meter > em {
    right: 12px;
    bottom: 11px;
    padding: 2px 5px;
    border: 1px solid rgba(74, 222, 128, .24);
    border-radius: 4px;
    background: #082d23;
    font-size: 8px;
}

/* ----------------------------------------------------------
   LARGE HARDWARE — RUGGED EVENT RECORDER
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-event {
    width: 108px !important;
    height: 132px !important;
    margin-top: 0;
    border: 3px solid #74e5a0 !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(74, 222, 128, .10), transparent 38%),
        linear-gradient(180deg, #0b3429, #061f1c) !important;
    box-shadow:
        inset 0 0 0 5px rgba(2, 27, 22, .66),
        inset 0 1px rgba(220, 252, 231, .13),
        0 0 28px rgba(34, 197, 94, .12),
        0 14px 14px rgba(0, 0, 0, .28) !important;
}

.operations-command-page .operations-v8-event::before,
.operations-command-page .operations-v8-event::after {
    position: absolute;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #377a52;
    box-shadow: 0 106px #377a52;
    content: "";
}

.operations-command-page .operations-v8-event::before { left: 10px; }
.operations-command-page .operations-v8-event::after { right: 10px; }

.operations-command-page .operations-v8-event > i {
    top: 27px;
    right: 16px;
    left: 16px;
    height: 3px;
    border-radius: 99px;
    background: #78e5a3;
    box-shadow: 0 13px 0 #3a9a60, 0 26px 0 rgba(58, 154, 96, .78), 0 39px 0 rgba(58, 154, 96, .48);
}

.operations-command-page .operations-v8-event > b {
    bottom: 17px;
    color: #dcfce7;
    font-size: 13px;
    letter-spacing: .14em;
}

.operations-command-page .operations-v8-event > em {
    right: -4px !important;
    bottom: 10px !important;
    width: 25px !important;
    height: 25px !important;
    border: 3px solid #071d2b;
    background: #4ade80;
    box-shadow: 0 0 17px rgba(74, 222, 128, .34);
    font-size: 10px !important;
}

/* ----------------------------------------------------------
   LARGE HARDWARE — ACCOUNTING HMI
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-accounting {
    width: 108px;
    height: 132px;
    margin-top: 0;
    grid-template-rows: 64px 1fr;
    border: 3px solid #d5ab39;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(251, 191, 36, .10), transparent 38%),
        linear-gradient(180deg, #2b2718, #141d22);
    box-shadow:
        inset 0 0 0 5px rgba(24, 20, 7, .60),
        inset 0 1px rgba(254, 243, 199, .12),
        0 0 25px rgba(251, 191, 36, .09),
        0 14px 14px rgba(0, 0, 0, .28);
}

.operations-command-page .operations-v8-accounting::before,
.operations-command-page .operations-v8-accounting::after {
    position: absolute;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6f5a23;
    box-shadow: 0 106px #6f5a23;
    content: "";
}

.operations-command-page .operations-v8-accounting::before { left: 10px; }
.operations-command-page .operations-v8-accounting::after { right: 10px; }

.operations-command-page .operations-v8-accounting > i {
    width: 76px;
    height: 46px;
    margin-top: 14px;
    border-color: #826a25;
    border-radius: 6px;
    background:
        repeating-linear-gradient(90deg, rgba(251, 191, 36, .025) 0 1px, transparent 1px 8px),
        #18180e;
    color: #fde68a;
    font-size: 17px;
    text-shadow: 0 0 10px rgba(251, 191, 36, .24);
}

.operations-command-page .operations-v8-accounting > b {
    color: #fbbf24;
    font-size: 14px;
    letter-spacing: .03em;
}

.operations-command-page .operations-v8-accounting > em {
    right: 10px;
    bottom: 8px;
    color: #fef3c7;
}

/* ----------------------------------------------------------
   CONNECTORS — BURIED IN THE SKID, NOT SEPARATE WIDGETS
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-pipe-link {
    z-index: 3;
    height: 150px !important;
    align-self: start;
    margin-top: 27px;
}

.operations-command-page .operations-v8-pipe-link > i {
    top: 62px !important;
    right: -10px !important;
    left: -10px !important;
    height: 10px !important;
    border: 1px solid rgba(186, 230, 253, .42) !important;
    background: linear-gradient(180deg, #80d8ef, #2b8ead 46%, #14536c) !important;
    box-shadow: inset 0 2px rgba(255, 255, 255, .22), 0 0 12px rgba(56, 189, 248, .16) !important;
}

.operations-command-page .operations-v8-pipe-link > i::before,
.operations-command-page .operations-v8-pipe-link > i::after {
    top: -4px !important;
    width: 6px !important;
    height: 16px !important;
    border-color: rgba(224, 242, 254, .65) !important;
    background: linear-gradient(180deg, #d8f3fc, #60b6d4) !important;
}

.operations-command-page .operations-v8-pipe-link > em {
    top: 50px !important;
    width: 28px !important;
    height: 34px !important;
    padding-left: 2px;
    border: 1px solid rgba(186, 230, 253, .38) !important;
    border-radius: 50% !important;
    background: #0b3043 !important;
    box-shadow: 0 0 0 4px rgba(5, 23, 35, .85), 0 0 13px rgba(56, 189, 248, .17);
    font-size: 14px !important;
}

.operations-command-page .operations-v8-pipe-link.three > em {
    border-color: rgba(134, 239, 172, .40) !important;
    background: #0b3829 !important;
}

.operations-command-page .operations-v8-pipe-link.four > em {
    border-color: rgba(253, 230, 138, .40) !important;
    background: #382d10 !important;
}

/* ----------------------------------------------------------
   MEASURED TRANSFER — THE DOMINANT LIVE INSTRUMENT
   ---------------------------------------------------------- */

.operations-command-page .operations-v8-flow-readout {
    position: relative;
    z-index: 4;
    grid-template-columns: minmax(180px, .65fr) minmax(270px, .82fr) minmax(220px, .65fr);
    min-height: 104px;
    gap: 18px;
    margin: 14px 8px 0;
    padding: 13px 18px;
    border: 1px solid rgba(74, 222, 128, .24);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(14, 165, 233, .075), rgba(34, 197, 94, .07) 50%, rgba(14, 165, 233, .035)),
        #071f2a;
    box-shadow:
        inset 0 1px rgba(220, 252, 231, .07),
        inset 0 0 28px rgba(34, 197, 94, .025),
        0 12px 24px rgba(1, 10, 21, .18);
}

.operations-command-page .operations-v8-flow-readout::before {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: min(35%, 390px);
    border-top: 1px solid rgba(134, 239, 172, .24);
    border-bottom: 1px solid rgba(134, 239, 172, .18);
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, .035), transparent);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

.operations-command-page .operations-v8-flow-readout-title > span {
    color: #bae6fd;
    font-size: 9px;
    letter-spacing: .13em;
}

.operations-command-page .operations-v8-flow-readout-title > small {
    margin-top: 6px;
    color: #aebfca;
    font-size: 9px;
}

.operations-command-page .operations-v8-flow-readout > strong {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 70px;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 11px 17px;
    border: 1px solid #287c56;
    border-radius: 8px;
    background:
        repeating-linear-gradient(90deg, rgba(74, 222, 128, .025) 0 1px, transparent 1px 12px),
        #031c18;
    color: #9cf2bd;
    font-size: clamp(37px, 3vw, 50px);
    text-shadow: 0 0 17px rgba(74, 222, 128, .24);
    box-shadow: inset 0 0 22px rgba(34, 197, 94, .055), 0 0 18px rgba(34, 197, 94, .045);
}

.operations-command-page .operations-v8-flow-readout > strong > small {
    color: #bae6fd;
    font-size: 11px;
    letter-spacing: .06em;
}

.operations-command-page .operations-v8-flow-control > span {
    color: #bbf7d0;
    font-size: 9px;
    letter-spacing: .10em;
}

.operations-command-page .operations-v8-flow-control > small {
    margin-top: 7px;
    color: #afc0cb;
    font-size: 9px;
}

.operations-command-page .operations-v8-flow-control > span > i {
    box-shadow: 0 0 11px rgba(74, 222, 128, .68);
}

.operations-command-page .operations-v8-evidence-rail {
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 12px 20px 14px;
    border-top-color: rgba(125, 211, 252, .10);
    background: rgba(5, 21, 33, .78);
}

.operations-command-page .operations-v8-evidence-rail > span {
    color: #9bdcf2;
    font-size: 8px;
    letter-spacing: .10em;
}

.operations-command-page .operations-v8-evidence-rail b {
    min-height: 29px;
    padding: 0 10px;
    border-color: rgba(125, 211, 252, .17);
    border-radius: 5px;
    background: #092639;
    color: #d4e6ef;
    font-size: 8px;
}

.operations-command-page .operations-v8-evidence-rail i {
    color: #7dd3fc;
    font-size: 11px;
}

/* ==========================================================
   V13 STRUCTURAL ZOOM MODES
   ========================================================== */

@container (max-width: 1180px) {
    .operations-command-page .operations-v8-pipe-rack {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px;
        min-height: 0 !important;
        padding: 12px !important;
    }

    .operations-command-page .operations-v8-pipe-rack::before,
    .operations-command-page .operations-v8-pipe-rack::after {
        display: none;
    }

    .operations-command-page .operations-v8-pipe-link {
        display: none !important;
    }

    .operations-command-page .operations-v8-node {
        min-height: 238px;
        border: 1px solid rgba(125, 211, 252, .16) !important;
        background: linear-gradient(180deg, rgba(15, 55, 76, .52), rgba(6, 25, 38, .82)) !important;
    }

    .operations-command-page .operations-v8-node.processing {
        border-color: rgba(74, 222, 128, .20) !important;
        background: linear-gradient(180deg, rgba(12, 60, 44, .48), rgba(5, 31, 27, .84)) !important;
    }

    .operations-command-page .operations-v8-node.accounting {
        border-color: rgba(251, 191, 36, .20) !important;
        background: linear-gradient(180deg, rgba(66, 54, 18, .46), rgba(28, 25, 15, .86)) !important;
    }

    .operations-command-page .operations-v8-node:not(.accounting)::before {
        right: 13px;
        bottom: 10px;
        color: #7dd3fc;
        font-size: 15px;
        content: "→";
    }

    .operations-command-page .operations-v8-flow-readout {
        grid-template-columns: minmax(0, 1fr) minmax(240px, .82fr);
    }

    .operations-command-page .operations-v8-flow-control {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }
}

@container (max-width: 820px) {
    .operations-command-page .operations-v8-engine-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-command-page .operations-v8-pipe-rack {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .operations-command-page .operations-v8-flow-readout {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-command-page .operations-v8-flow-readout > strong {
        justify-content: flex-start;
    }

    .operations-command-page .operations-v8-flow-control {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-command-page .operations-v8-evidence-rail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container (max-width: 520px) {
    .operations-command-page .operations-v8-pipe-chassis {
        padding: 12px 10px;
    }

    .operations-command-page .operations-v8-pipe-chassis::before,
    .operations-command-page .operations-v8-pipe-chassis::after {
        display: none;
    }

    .operations-command-page .operations-v8-pipe-rack {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0;
    }

    .operations-command-page .operations-v8-node {
        min-height: 225px;
        margin-bottom: 31px;
    }

    .operations-command-page .operations-v8-node:not(:last-of-type)::after {
        right: auto;
        bottom: -32px;
        left: 50%;
        width: 10px;
        height: 32px;
        border: 1px solid #54b9d7;
        border-radius: 99px;
        background: linear-gradient(90deg, #17647f, #63c8e3, #17647f);
        content: "";
        transform: translateX(-50%);
    }

    .operations-command-page .operations-v8-node:not(.accounting)::before {
        right: auto;
        bottom: -25px;
        left: 50%;
        z-index: 5;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(186, 230, 253, .42);
        border-radius: 50%;
        background: #0a3042;
        color: #dff6ff;
        font-size: 13px;
        content: "↓";
        transform: translateX(-50%);
    }

    .operations-command-page .operations-v8-node:last-of-type {
        margin-bottom: 0;
    }

    .operations-command-page .operations-v8-flow-readout {
        margin-right: 0;
        margin-left: 0;
        padding: 12px;
    }

    .operations-command-page .operations-v8-flow-readout > strong {
        min-height: 62px;
        font-size: 36px;
    }
}


/* ==========================================================
   OPERATIONS V14 — ONE MACHINE, TWO PATHS
   Physical pipe ends at measured movement. From that point the
   same evidence travels as a controlled signal to Accounting.
   ========================================================== */

.operations-command-page .operations-v13-legacy {
    display: none !important;
}

.operations-v14-engine {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid rgba(80, 177, 211, .34);
    border-radius: 18px;
    background:
        radial-gradient(circle at 23% 27%, rgba(14, 165, 233, .10), transparent 32%),
        radial-gradient(circle at 78% 32%, rgba(34, 197, 94, .07), transparent 28%),
        linear-gradient(rgba(125, 211, 252, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .018) 1px, transparent 1px),
        linear-gradient(155deg, #071e2d, #061724 56%, #071b28);
    background-size: auto, auto, 30px 30px, 30px 30px, auto;
    box-shadow:
        inset 0 1px rgba(214, 243, 255, .11),
        inset 0 -60px 100px rgba(1, 8, 18, .22),
        0 24px 58px rgba(1, 10, 22, .30);
    container-type: inline-size;
}

.operations-v14-engine::before {
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, transparent, #38bdf8 25%, #4ade80 72%, #fbbf24 88%, transparent);
    box-shadow: 0 0 25px rgba(56, 189, 248, .34);
    content: "";
}

.operations-v14-header {
    display: flex;
    min-height: 79px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(125, 211, 252, .12);
    background: linear-gradient(90deg, rgba(14, 165, 233, .075), transparent 48%), rgba(4, 22, 35, .80);
}

.operations-v14-header > div > span {
    display: block;
    color: #7dd3fc;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .13em;
}

.operations-v14-header h2 {
    margin: 5px 0 0;
    color: #f8fbff;
    font-size: clamp(20px, 1.65vw, 27px);
    font-weight: 780;
    letter-spacing: -.025em;
}

.operations-v14-state {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(74, 222, 128, .29);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(9, 59, 46, .88), rgba(5, 39, 35, .92));
    color: #bbf7d0;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .055em;
    white-space: nowrap;
    box-shadow: inset 0 1px rgba(220, 252, 231, .08), 0 0 18px rgba(34, 197, 94, .07);
}

.operations-v14-state > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, .72);
}

.operations-v14-deck {
    position: relative;
    padding: 18px;
}

.operations-v14-deck::before,
.operations-v14-deck::after {
    position: absolute;
    top: 31px;
    bottom: 18px;
    width: 5px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 99px;
    background: linear-gradient(180deg, #16465e, #071b28);
    content: "";
}

.operations-v14-deck::before { left: 8px; }
.operations-v14-deck::after { right: 8px; }

.operations-v14-zone-rail {
    display: grid;
    grid-template-columns: 3fr 2fr;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .14);
    border-radius: 11px 11px 0 0;
    background: rgba(5, 24, 37, .78);
}

.operations-v14-zone-rail > span {
    display: grid;
    min-height: 48px;
    grid-template-columns: 10px auto;
    align-content: center;
    gap: 2px 9px;
    padding: 8px 15px;
    color: #a9e4f8;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.operations-v14-zone-rail > span.signal {
    border-left: 1px solid rgba(74, 222, 128, .18);
    background: linear-gradient(90deg, rgba(34, 197, 94, .065), rgba(251, 191, 36, .025));
    color: #a7f3d0;
}

.operations-v14-zone-rail > span > i {
    grid-row: 1 / span 2;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, .55);
}

.operations-v14-zone-rail > span.signal > i {
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, .55);
}

.operations-v14-zone-rail > span > small {
    color: #91aebb;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0;
}

.operations-v14-process {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(170px, 1.04fr)
        minmax(35px, .20fr)
        minmax(185px, 1.10fr)
        minmax(35px, .20fr)
        minmax(175px, 1.04fr)
        minmax(43px, .23fr)
        minmax(175px, 1.02fr)
        minmax(43px, .23fr)
        minmax(168px, .98fr);
    align-items: stretch;
    min-height: 390px;
    padding: 14px 13px 21px;
    border-right: 1px solid rgba(125, 211, 252, .18);
    border-bottom: 1px solid rgba(125, 211, 252, .18);
    border-left: 1px solid rgba(125, 211, 252, .18);
    border-radius: 0 0 14px 14px;
    background:
        linear-gradient(90deg, rgba(14, 165, 233, .045) 0 59.8%, rgba(34, 197, 94, .035) 59.8% 84%, rgba(251, 191, 36, .028) 84%),
        linear-gradient(180deg, rgba(16, 52, 70, .32), rgba(4, 20, 31, .42));
    box-shadow: inset 0 0 0 3px rgba(2, 13, 22, .48), inset 0 1px rgba(220, 246, 255, .035);
}

/* One structural base makes the five assemblies read as one skid. */
.operations-v14-process::before {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    height: 15px;
    border: 1px solid #28667f;
    border-radius: 4px;
    background: linear-gradient(180deg, #1b536d, #0a3044 55%, #061f2e);
    box-shadow: inset 0 2px rgba(186, 230, 253, .10), 0 9px 0 -4px #03131e;
    content: "";
}

.operations-v14-process::after {
    position: absolute;
    top: 14px;
    bottom: 18px;
    left: 60%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(74, 222, 128, .30) 22%, rgba(74, 222, 128, .18) 76%, transparent);
    content: "";
}

.operations-v14-station {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    min-height: 350px;
    flex-direction: column;
    align-items: center;
    padding: 9px 8px 39px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.operations-v14-station:hover {
    border-color: rgba(125, 211, 252, .19);
    background: linear-gradient(180deg, rgba(125, 211, 252, .045), rgba(3, 18, 28, .28));
    color: inherit;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 13px 27px rgba(1, 9, 19, .16);
    transform: translateY(-3px);
}

.operations-v14-station.recorder:hover {
    border-color: rgba(74, 222, 128, .22);
    background: linear-gradient(180deg, rgba(34, 197, 94, .055), rgba(3, 24, 21, .28));
}

.operations-v14-station.accounting:hover {
    border-color: rgba(251, 191, 36, .23);
    background: linear-gradient(180deg, rgba(251, 191, 36, .05), rgba(30, 26, 9, .25));
}

.operations-v14-step {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, .34);
    border-radius: 7px;
    background: linear-gradient(150deg, #10384f, #071f30);
    color: #bae6fd;
    font-size: 7px;
    font-weight: 950;
    box-shadow: 0 0 0 4px rgba(4, 20, 31, .88), inset 0 1px rgba(255, 255, 255, .06);
}

.operations-v14-station.recorder .operations-v14-step {
    border-color: rgba(74, 222, 128, .32);
    color: #bbf7d0;
}

.operations-v14-station.accounting .operations-v14-step {
    border-color: rgba(251, 191, 36, .34);
    color: #fde68a;
}

.operations-v14-machine {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 205px);
    height: 218px;
    color: #7dd3fc;
    filter: drop-shadow(0 15px 12px rgba(0, 0, 0, .26));
}

.operations-v14-machine svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.operations-v14-machine::after {
    position: absolute;
    right: 8%;
    bottom: 5px;
    left: 8%;
    z-index: -1;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, .16), transparent 68%);
    content: "";
}

.operations-v14-station.recorder .operations-v14-machine::after {
    background: radial-gradient(ellipse at center, rgba(74, 222, 128, .16), transparent 68%);
}

.operations-v14-station.accounting .operations-v14-machine::after {
    background: radial-gradient(ellipse at center, rgba(251, 191, 36, .14), transparent 68%);
}

.operations-v14-copy {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin-top: -3px;
}

.operations-v14-copy > span,
.operations-v14-copy > strong,
.operations-v14-copy > small {
    display: block;
}

.operations-v14-copy > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .10em;
}

.operations-v14-station.meter .operations-v14-copy > span,
.operations-v14-station.recorder .operations-v14-copy > span {
    color: #86efac;
}

.operations-v14-station.accounting .operations-v14-copy > span {
    color: #fde68a;
}

.operations-v14-copy > strong {
    margin-top: 6px;
    color: #f8fbff;
    font-size: clamp(23px, 1.75vw, 31px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.operations-v14-station.recorder .operations-v14-copy > strong { color: #86efac; }
.operations-v14-station.accounting .operations-v14-copy > strong { color: #fde68a; }

.operations-v14-copy > strong > small {
    color: #bed0da;
    font-size: 8px;
    letter-spacing: 0;
}

.operations-v14-copy > small {
    margin-top: 7px;
    color: #aebfca;
    font-size: 8px;
    line-height: 1.4;
}

.operations-v14-open {
    position: absolute;
    right: 8px;
    bottom: 7px;
    left: 8px;
    z-index: 4;
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    border-top: 1px solid rgba(125, 211, 252, .12);
    color: #91cfe5;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .07em;
    opacity: .68;
    transition: opacity .18s ease, color .18s ease;
}

.operations-v14-station:hover .operations-v14-open {
    color: #dff6ff;
    opacity: 1;
}

.operations-v14-station.recorder .operations-v14-open { border-top-color: rgba(74, 222, 128, .13); color: #81d9a3; }
.operations-v14-station.accounting .operations-v14-open { border-top-color: rgba(251, 191, 36, .14); color: #d7b95c; }

/* Pipe and signal links physically meet the SVG equipment ports. */
.operations-v14-link {
    position: relative;
    z-index: 5;
    display: block;
    height: 220px;
    align-self: start;
    margin-top: 9px;
}

.operations-v14-link > i {
    position: absolute;
    top: 139px;
    right: -12px;
    left: -12px;
    height: 14px;
    border: 1px solid rgba(207, 242, 252, .54);
    border-radius: 999px;
    background: linear-gradient(180deg, #9ce3f4 0%, #3ea9c8 36%, #16708e 70%, #0c4c65 100%);
    box-shadow: inset 0 2px rgba(255, 255, 255, .22), inset 0 -2px rgba(1, 12, 22, .30), 0 0 14px rgba(56, 189, 248, .18);
}

.operations-v14-link.material > i::before,
.operations-v14-link.material > i::after {
    position: absolute;
    top: -4px;
    width: 7px;
    height: 20px;
    border: 1px solid rgba(224, 247, 255, .68);
    border-radius: 3px;
    background: linear-gradient(180deg, #ddf7ff, #68bdd8);
    content: "";
}

.operations-v14-link.material > i::before { left: 1px; }
.operations-v14-link.material > i::after { right: 1px; }

.operations-v14-link > b {
    position: absolute;
    top: 164px;
    left: 50%;
    color: #87c9df;
    font-size: 6px;
    font-weight: 950;
    letter-spacing: .08em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.operations-v14-link.material::after {
    position: absolute;
    top: 141px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #e1f7ff;
    filter: drop-shadow(0 0 4px rgba(125, 211, 252, .55));
    content: "";
    transform: translateX(-50%);
}

.operations-v14-link.signal > i {
    top: 92px;
    height: 3px;
    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(90deg, #4ade80 0 7px, transparent 7px 12px);
    box-shadow: 0 0 8px rgba(74, 222, 128, .30);
}

.operations-v14-link.signal > i::before {
    position: absolute;
    top: -8px;
    left: 47%;
    width: 13px;
    height: 17px;
    border-top: 2px solid #86efac;
    border-right: 2px solid #86efac;
    content: "";
    transform: rotate(45deg);
}

.operations-v14-link.signal > b {
    top: 111px;
    color: #82dba4;
}

.operations-v14-link.signal.accounting > i {
    background: linear-gradient(90deg, #4ade80, #c6a83f 58%, #fbbf24);
    box-shadow: 0 0 8px rgba(251, 191, 36, .22);
}

.operations-v14-link.signal.accounting > i::before {
    border-color: #fde68a;
}

.operations-v14-link.signal.accounting > b {
    color: #d9bc61;
}

.operations-v14-console {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, .62fr) minmax(310px, .88fr) minmax(220px, .62fr);
    min-height: 111px;
    align-items: center;
    gap: 18px;
    margin: 14px 8px 0;
    padding: 14px 19px;
    border: 1px solid rgba(74, 222, 128, .24);
    border-radius: 13px;
    background: linear-gradient(90deg, rgba(14, 165, 233, .055), rgba(34, 197, 94, .07) 52%, rgba(251, 191, 36, .025)), #071f2a;
    box-shadow: inset 0 1px rgba(220, 252, 231, .07), inset 0 0 28px rgba(34, 197, 94, .022), 0 13px 25px rgba(1, 10, 21, .17);
}

.operations-v14-console::before {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 78px;
    height: 8px;
    border: 1px solid rgba(74, 222, 128, .23);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #0a3a2d;
    content: "";
    transform: translateX(-50%);
}

.operations-v14-console-label > span,
.operations-v14-console-label > strong,
.operations-v14-console-label > small,
.operations-v14-console-state > span,
.operations-v14-console-state > small {
    display: block;
}

.operations-v14-console-label > span {
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.operations-v14-console-label > strong {
    margin-top: 5px;
    color: #f1f8fb;
    font-size: 14px;
}

.operations-v14-console-label > small {
    margin-top: 4px;
    color: #9fb3bf;
    font-size: 8px;
}

.operations-v14-display {
    display: grid;
    min-height: 78px;
    grid-template-columns: auto auto auto;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid #287c56;
    border-radius: 8px;
    background: repeating-linear-gradient(90deg, rgba(74, 222, 128, .025) 0 1px, transparent 1px 12px), #031c18;
    box-shadow: inset 0 0 23px rgba(34, 197, 94, .055), 0 0 18px rgba(34, 197, 94, .045);
}

.operations-v14-display > span {
    color: #4ade80;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    font-weight: 900;
}

.operations-v14-display > strong {
    color: #9cf2bd;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(39px, 3.15vw, 53px);
    font-weight: 760;
    line-height: 1;
    text-shadow: 0 0 18px rgba(74, 222, 128, .25);
    font-variant-numeric: tabular-nums;
}

.operations-v14-display > small {
    color: #bae6fd;
    font-size: 10px;
    font-weight: 850;
}

.operations-v14-console-state {
    text-align: right;
}

.operations-v14-console-state > span {
    color: #bbf7d0;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .10em;
}

.operations-v14-console-state > span > i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 11px rgba(74, 222, 128, .68);
}

.operations-v14-console-state > small {
    margin-top: 7px;
    color: #9fb3bf;
    font-size: 8px;
}

.operations-v14-proof {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 20px 14px;
    border-top: 1px solid rgba(125, 211, 252, .09);
    background: rgba(4, 20, 31, .76);
}

.operations-v14-proof > span {
    color: #9bdcf2;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .10em;
}

.operations-v14-proof > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.operations-v14-proof b {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(125, 211, 252, .17);
    border-radius: 5px;
    background: #092639;
    color: #d4e6ef;
    font-size: 8px;
}

.operations-v14-proof b.record {
    border-color: rgba(74, 222, 128, .20);
    background: #082b1d;
    color: #a7f3d0;
}

.operations-v14-proof b.accounting {
    border-color: rgba(251, 191, 36, .22);
    background: #2b2511;
    color: #fde68a;
}

.operations-v14-proof i {
    color: #7dd3fc;
    font-size: 11px;
    font-style: normal;
}

.operations-v14-proof i.signal { color: #4ade80; }
.operations-v14-proof i.accounting { color: #fbbf24; }


/* ----------------------------------------------------------
   V14 ZOOM MODES — deliberately change composition.
   ---------------------------------------------------------- */

@container (max-width: 1180px) {
    .operations-v14-zone-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-v14-zone-rail > span.signal {
        border-top: 1px solid rgba(74, 222, 128, .15);
        border-left: 0;
    }

    .operations-v14-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        background: linear-gradient(180deg, rgba(14, 165, 233, .035), rgba(34, 197, 94, .025)), rgba(4, 20, 31, .44);
    }

    .operations-v14-process::after {
        display: none;
    }

    .operations-v14-link {
        display: none;
    }

    .operations-v14-station {
        min-height: 345px;
        border: 1px solid rgba(125, 211, 252, .15);
        background: linear-gradient(180deg, rgba(15, 55, 76, .48), rgba(5, 23, 35, .74));
    }

    .operations-v14-station.recorder {
        border-color: rgba(74, 222, 128, .18);
        background: linear-gradient(180deg, rgba(12, 60, 44, .44), rgba(5, 29, 25, .76));
    }

    .operations-v14-station.accounting {
        border-color: rgba(251, 191, 36, .18);
        background: linear-gradient(180deg, rgba(65, 53, 18, .42), rgba(27, 24, 14, .79));
    }

    .operations-v14-station:not(.accounting)::after {
        position: absolute;
        right: 13px;
        bottom: 12px;
        z-index: 5;
        color: #7dd3fc;
        font-size: 15px;
        font-weight: 950;
        content: "→";
    }

    .operations-v14-station.recorder::after { color: #86efac; }

    .operations-v14-console {
        grid-template-columns: minmax(0, 1fr) minmax(250px, .80fr);
    }

    .operations-v14-console-state {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}

@container (max-width: 820px) {
    .operations-v14-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-v14-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-v14-console {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-v14-console-state {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .operations-v14-proof {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container (max-width: 520px) {
    .operations-v14-deck {
        padding: 12px 10px;
    }

    .operations-v14-deck::before,
    .operations-v14-deck::after {
        display: none;
    }

    .operations-v14-process {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .operations-v14-process::before {
        display: none;
    }

    .operations-v14-station {
        min-height: 345px;
        margin-bottom: 34px;
    }

    .operations-v14-station:not(.accounting)::before {
        position: absolute;
        bottom: -35px;
        left: 50%;
        z-index: 6;
        width: 10px;
        height: 35px;
        border: 1px solid #54b9d7;
        border-radius: 99px;
        background: linear-gradient(90deg, #17647f, #63c8e3, #17647f);
        content: "";
        transform: translateX(-50%);
    }

    .operations-v14-station:not(.accounting)::after {
        right: auto;
        bottom: -28px;
        left: 50%;
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        border: 1px solid rgba(186, 230, 253, .43);
        border-radius: 50%;
        background: #0a3042;
        color: #dff6ff;
        font-size: 13px;
        content: "↓";
        transform: translateX(-50%);
    }

    .operations-v14-station.recorder::before {
        border-color: #4fb87a;
        background: linear-gradient(90deg, #1c7145, #6ade94, #1c7145);
    }

    .operations-v14-station:last-of-type {
        margin-bottom: 0;
    }

    .operations-v14-console {
        margin-right: 0;
        margin-left: 0;
        padding: 12px;
    }

    .operations-v14-display {
        padding: 9px 12px;
    }

    .operations-v14-display > strong {
        font-size: 38px;
    }
}


/* ==========================================================
   OPERATIONS V15 — ENERGIZED TRANSITIONS / LIVE INSTRUMENTS
   ========================================================== */

.operations-v14-zone-rail {
    position: relative;
}

/* The meter is the conversion point between matter and evidence. */
.operations-v14-zone-rail::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60%;
    z-index: 3;
    width: 42px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, .075), transparent);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

.operations-v14-zone-rail::after {
    position: absolute;
    top: 50%;
    left: 60%;
    z-index: 4;
    width: 13px;
    height: 13px;
    border: 2px solid #78e5a3;
    background: #082d27;
    box-shadow: 0 0 0 4px rgba(4, 24, 31, .88), 0 0 15px rgba(74, 222, 128, .28);
    content: "";
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
}

.operations-v14-process::after {
    width: 35px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, .12), transparent);
    transform: translateX(-50%);
}

.operations-v14-machine {
    transition: filter .22s ease, transform .22s ease;
}

.operations-v14-station:hover .operations-v14-machine {
    filter: drop-shadow(0 17px 14px rgba(0, 0, 0, .30)) drop-shadow(0 0 8px rgba(56, 189, 248, .08));
    transform: scale(1.012);
}

.operations-v14-station.recorder:hover .operations-v14-machine {
    filter: drop-shadow(0 17px 14px rgba(0, 0, 0, .30)) drop-shadow(0 0 9px rgba(74, 222, 128, .10));
}

.operations-v14-station.accounting:hover .operations-v14-machine {
    filter: drop-shadow(0 17px 14px rgba(0, 0, 0, .30)) drop-shadow(0 0 9px rgba(251, 191, 36, .10));
}

/* Physical pipe becomes one continuous, illuminated material path. */
.operations-v14-link.material > i {
    right: -24px;
    left: -24px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(225, 248, 255, .88) 0 12%, transparent 13% 100%),
        linear-gradient(180deg, #87dced 0%, #39a5c5 35%, #126985 72%, #0a4359 100%);
}

.operations-v14-link.material > i::before,
.operations-v14-link.material > i::after {
    z-index: 3;
}

.operations-v14-link.material::before {
    position: absolute;
    top: 143px;
    left: -20px;
    z-index: 7;
    width: 16px;
    height: 6px;
    border-radius: 99px;
    background: #dff8ff;
    box-shadow: 0 0 5px #b9eeff, 0 0 12px rgba(56, 189, 248, .75);
    content: "";
    animation: operations-v15-material-pulse 2.8s linear infinite;
}

.operations-v14-link.material.second::before {
    animation-delay: -1.35s;
}

.operations-v14-link.material::after {
    top: 141px;
    z-index: 8;
    border-left-color: #f0fbff;
}

.operations-v14-link > b {
    font-size: 7px;
    letter-spacing: .11em;
    text-shadow: 0 0 7px rgba(56, 189, 248, .18);
}

/* Signal transitions use instrumentation cable, not diagram arrows. */
.operations-v14-link.signal > i {
    top: 94px;
    right: -26px;
    left: -26px;
    height: 7px;
    border-top: 1px solid rgba(134, 239, 172, .46);
    border-bottom: 1px solid rgba(74, 222, 128, .34);
    border-radius: 99px;
    background:
        linear-gradient(180deg, rgba(187, 247, 208, .22), transparent 34%),
        repeating-linear-gradient(90deg, #4ade80 0 10px, #1d8f51 10px 13px, #0a3f2b 13px 18px);
    box-shadow: inset 0 1px rgba(220, 252, 231, .12), 0 0 10px rgba(74, 222, 128, .23);
}

.operations-v14-link.signal > i::before {
    top: -6px;
    left: 49%;
    width: 11px;
    height: 12px;
    border-width: 2px;
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, .45));
}

.operations-v14-link.signal::after {
    position: absolute;
    top: 95px;
    left: -19px;
    z-index: 8;
    width: 13px;
    height: 5px;
    border-radius: 99px;
    background: #bbf7d0;
    box-shadow: 0 0 6px #4ade80, 0 0 14px rgba(74, 222, 128, .78);
    content: "";
    animation: operations-v15-signal-pulse 2.35s cubic-bezier(.38, 0, .62, 1) infinite;
}

.operations-v14-link.signal > b {
    top: 117px;
    color: #9ae8b8;
    font-size: 7px;
    text-shadow: 0 0 8px rgba(74, 222, 128, .20);
}

/* Gold conductor visibly continues the same record into Accounting. */
.operations-v14-link.signal.accounting > i {
    border-top-color: rgba(253, 230, 138, .48);
    border-bottom-color: rgba(251, 191, 36, .35);
    background:
        linear-gradient(180deg, rgba(254, 243, 199, .24), transparent 34%),
        linear-gradient(90deg, #4ade80 0%, #9ec153 25%, #d4a936 60%, #fbbf24 100%);
    box-shadow: inset 0 1px rgba(254, 243, 199, .14), 0 0 11px rgba(251, 191, 36, .22);
}

.operations-v14-link.signal.accounting::after {
    background: #fef3c7;
    box-shadow: 0 0 6px #fbbf24, 0 0 14px rgba(251, 191, 36, .74);
    animation-delay: -.75s;
}

.operations-v14-link.signal.accounting > b {
    color: #eed277;
    text-shadow: 0 0 8px rgba(251, 191, 36, .19);
}

/* Instrument sockets make every signal line physically terminate. */
@container (min-width: 1181px) {
    .operations-v14-station.meter::after,
    .operations-v14-station.recorder::before,
    .operations-v14-station.recorder::after,
    .operations-v14-station.accounting::before {
        position: absolute;
        top: 98px;
        z-index: 9;
        display: block;
        width: 13px;
        height: 13px;
        border: 3px solid #b7f7ce;
        border-radius: 50%;
        background: #0a3f2c;
        box-shadow: 0 0 0 5px rgba(4, 22, 29, .88), inset 0 0 0 2px #4ade80, 0 0 13px rgba(74, 222, 128, .27);
        content: "";
    }

    .operations-v14-station.meter::after,
    .operations-v14-station.recorder::after {
        right: -10px;
    }

    .operations-v14-station.recorder::before,
    .operations-v14-station.accounting::before {
        left: -10px;
    }

    .operations-v14-station.accounting::before {
        border-color: #fde68a;
        background: #4b3b12;
        box-shadow: 0 0 0 5px rgba(4, 22, 29, .88), inset 0 0 0 2px #fbbf24, 0 0 13px rgba(251, 191, 36, .26);
    }

    .operations-v14-station.recorder::after {
        border-color: #d6ed94;
        background: #38501c;
        box-shadow: 0 0 0 5px rgba(4, 22, 29, .88), inset 0 0 0 2px #b4cc42, 0 0 13px rgba(198, 168, 63, .24);
    }
}

/* Subtle live hardware behavior. */
.operations-v14-liquid-body {
    transform-origin: 95px 132px;
    animation: operations-v15-liquid-body 5s ease-in-out infinite;
}

.operations-v14-liquid-surface {
    transform-origin: 95px 84px;
    animation: operations-v15-liquid-surface 3.8s ease-in-out infinite;
}

.operations-v14-impeller {
    transform-box: fill-box;
    transform-origin: center;
    animation: operations-v15-impeller 8s linear infinite;
}

.operations-v14-meter-scan,
.operations-v14-recorder-scan {
    stroke-dasharray: 18 9;
    animation: operations-v15-display-scan 2.6s linear infinite;
}

.operations-v14-recorder-scan {
    animation-duration: 3.2s;
}

.operations-v14-accounting-screen {
    animation: operations-v15-accounting-glow 3.4s ease-in-out infinite;
}

.operations-v14-display {
    position: relative;
    overflow: hidden;
}

.operations-v14-display::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28%;
    width: 20%;
    background: linear-gradient(90deg, transparent, rgba(167, 243, 208, .07), transparent);
    content: "";
    transform: skewX(-13deg);
    animation: operations-v15-readout-sheen 4.8s ease-in-out infinite;
    pointer-events: none;
}

.operations-v14-open {
    font-size: 7.5px;
}

@keyframes operations-v15-material-pulse {
    0% { left: -20px; opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { left: calc(100% + 5px); opacity: 0; }
}

@keyframes operations-v15-signal-pulse {
    0% { left: -19px; opacity: 0; transform: scaleX(.6); }
    14% { opacity: 1; }
    78% { opacity: 1; }
    100% { left: calc(100% + 7px); opacity: 0; transform: scaleX(1.05); }
}

@keyframes operations-v15-liquid-body {
    0%, 100% { transform: scaleY(1); opacity: .95; }
    50% { transform: scaleY(.985); opacity: 1; }
}

@keyframes operations-v15-liquid-surface {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(1.5px) scaleX(.975); }
}

@keyframes operations-v15-impeller {
    to { transform: rotate(360deg); }
}

@keyframes operations-v15-display-scan {
    to { stroke-dashoffset: -54; }
}

@keyframes operations-v15-accounting-glow {
    0%, 100% { stroke: #8b7123; filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); }
    50% { stroke: #b99530; filter: drop-shadow(0 0 5px rgba(251, 191, 36, .18)); }
}

@keyframes operations-v15-readout-sheen {
    0%, 58% { left: -28%; opacity: 0; }
    66% { opacity: 1; }
    90%, 100% { left: 112%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .operations-v14-liquid-body,
    .operations-v14-liquid-surface,
    .operations-v14-impeller,
    .operations-v14-meter-scan,
    .operations-v14-recorder-scan,
    .operations-v14-accounting-screen,
    .operations-v14-link.material::before,
    .operations-v14-link.signal::after,
    .operations-v14-display::after {
        animation: none !important;
    }
}


/* ==========================================================
   OPERATIONS V16 — CAPTURE BRIDGE / RECORD OWNERSHIP
   ========================================================== */

/* Remove the decorative skid beam; it read as a progress bar. */
.operations-v14-process::before {
    display: none !important;
}

.operations-v14-process {
    padding-bottom: 12px;
}

/* Whole station is clickable, so the footer can stay quiet and unboxed. */
.operations-v14-open {
    right: 10px;
    bottom: 8px;
    left: 10px;
    min-height: 23px;
    padding: 0 2px;
    border-top: 0 !important;
    background: transparent;
}

.operations-v14-open::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .13), transparent);
    content: "";
}

.operations-v14-station.recorder .operations-v14-open::before {
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, .14), transparent);
}

.operations-v14-station.accounting .operations-v14-open::before {
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .15), transparent);
}

/* The transition is now a labeled instrument coupler, not an arrow. */
.operations-v14-link.signal > i::before {
    display: none;
}

.operations-v14-link.signal > em {
    position: absolute;
    top: 83px;
    left: 50%;
    z-index: 10;
    display: grid;
    width: 38px;
    height: 27px;
    place-items: center;
    border: 2px solid #8ce9ae;
    border-radius: 7px;
    background:
        linear-gradient(145deg, rgba(74, 222, 128, .12), transparent 48%),
        #082d24;
    color: #c8f9d9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    box-shadow:
        0 0 0 5px rgba(4, 22, 29, .88),
        inset 0 1px rgba(220, 252, 231, .09),
        0 0 15px rgba(74, 222, 128, .24);
    transform: translateX(-50%);
}

.operations-v14-link.signal.accounting > em {
    border-color: #efd269;
    background:
        linear-gradient(145deg, rgba(251, 191, 36, .13), transparent 48%),
        #352c10;
    color: #fff1ad;
    box-shadow:
        0 0 0 5px rgba(4, 22, 29, .88),
        inset 0 1px rgba(254, 243, 199, .09),
        0 0 15px rgba(251, 191, 36, .22);
}

.operations-v14-link.signal > b {
    top: 123px;
    width: 112px;
    color: #9ae8b8;
    font-size: 6.5px;
    line-height: 1.25;
    letter-spacing: .075em;
    text-align: center;
    white-space: normal;
}

.operations-v14-link.signal.accounting > b {
    color: #efd477;
}

/* Keep the animated packet beneath the bridge face. */
.operations-v14-link.signal::after {
    z-index: 8;
}

/* The semantic conversion point receives a stronger instrument glow. */
.operations-v14-station.meter .operations-v14-copy > strong {
    color: #a7f3d0;
}

.operations-v14-station.meter .operations-v14-copy > strong > small {
    color: #8ee7b1;
}

.operations-v14-station.recorder .operations-v14-copy > strong > small {
    color: #8ee7b1;
}

@container (max-width: 1180px) {
    .operations-v14-process {
        padding-bottom: 12px;
    }
}


/* ==========================================================
   OPERATIONS V17 — TRUE HYDRAULIC CENTERLINE
   ========================================================== */

/* Align external pipe with tank outlet, pump skid, and meter spool. */
.operations-v14-link.material > i {
    top: 148px;
    right: -32px;
    left: -32px;
}

.operations-v14-link.material::before {
    top: 152px;
}

.operations-v14-link.material::after {
    top: 150px;
}

.operations-v14-link.material > b {
    top: 176px;
}

/* Flanges sit above the pipe so each overlap reads as a real joint. */
.operations-v14-link.material > i::before,
.operations-v14-link.material > i::after {
    z-index: 6;
    top: -5px;
    height: 22px;
    border-width: 2px;
    background: linear-gradient(180deg, #effcff, #8fd9ea 45%, #469bb8);
    box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 0 8px rgba(125, 211, 252, .20);
}

/* Subtle weld glow makes the external pipe disappear into the SVG ports. */
.operations-v14-link.material > i {
    box-shadow:
        inset 0 2px rgba(255, 255, 255, .24),
        inset 0 -2px rgba(1, 12, 22, .30),
        -8px 0 12px rgba(125, 211, 252, .15),
        8px 0 12px rgba(125, 211, 252, .15),
        0 0 14px rgba(56, 189, 248, .18);
}


/* ==========================================================
   OPERATIONS V18 — ACCOUNTING-SCALE INSTRUMENT RACK
   ========================================================== */

/* Match Accounting's denser hardware scale and vertical rhythm. */
.operations-v14-process {
    min-height: 340px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.operations-v14-station {
    min-height: 306px;
    padding-top: 7px;
    padding-bottom: 35px;
}

.operations-v14-machine {
    width: min(100%, 176px);
    height: 184px;
}

.operations-v14-copy {
    margin-top: -1px;
}

.operations-v14-copy > strong {
    font-size: clamp(21px, 1.58vw, 28px);
}

.operations-v14-copy > small {
    margin-top: 6px;
}

/* A real continuous carrier pipe sits behind all three physical devices. */
.operations-v14-process::before {
    position: absolute !important;
    top: 141px !important;
    right: auto !important;
    bottom: auto !important;
    left: 18px !important;
    z-index: 1;
    display: block !important;
    width: calc(60% - 18px) !important;
    height: 14px !important;
    border: 1px solid rgba(207, 242, 252, .54) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(226, 248, 255, .90) 0 11%, transparent 12% 100%),
        linear-gradient(180deg, #8bdef0 0%, #3ca7c6 36%, #146b88 72%, #0a4359 100%) !important;
    box-shadow:
        inset 0 2px rgba(255, 255, 255, .23),
        inset 0 -2px rgba(1, 12, 22, .30),
        0 0 15px rgba(56, 189, 248, .17) !important;
    content: "" !important;
}

/* Flow windows now overlay the carrier instead of pretending to be separate pipes. */
.operations-v14-link.material {
    height: 184px;
    margin-top: 5px;
}

.operations-v14-link.material > i {
    top: 118px;
    right: -42px;
    left: -42px;
    z-index: 6;
}

.operations-v14-link.material::before {
    top: 122px;
}

.operations-v14-link.material::after {
    top: 120px;
}

.operations-v14-link.material > b {
    top: 147px;
}

/* The evidence side shrinks with the machinery while preserving its sockets. */
.operations-v14-link.signal {
    height: 184px;
    margin-top: 5px;
}

.operations-v14-link.signal > i {
    top: 86px;
}

.operations-v14-link.signal::after {
    top: 87px;
}

.operations-v14-link.signal > em {
    top: 75px;
}

.operations-v14-link.signal > b {
    top: 115px;
}

@container (min-width: 1181px) {
    .operations-v14-station.meter::after,
    .operations-v14-station.recorder::before,
    .operations-v14-station.recorder::after,
    .operations-v14-station.accounting::before {
        top: 90px;
    }
}

@container (max-width: 1180px) {
    .operations-v14-process::before {
        display: none !important;
    }

    .operations-v14-station {
        min-height: 310px;
    }
}

@container (max-width: 520px) {
    .operations-v14-station {
        min-height: 310px;
    }
}


/* ==========================================================
   OPERATIONS V19 — PLAIN-LANGUAGE FINISH
   ========================================================== */

/* Soften the physical-to-record boundary; it is a handoff, not a wall. */
.operations-v14-process::after {
    width: 18px;
    opacity: .64;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, .10), transparent);
}

.operations-v14-zone-rail::before {
    width: 25px;
    opacity: .72;
}

.operations-v14-zone-rail::after {
    width: 11px;
    height: 11px;
    opacity: .90;
}

/* Supporting language should read like normal interface copy. */
.operations-v14-zone-rail > span > small {
    font-size: 8.5px;
    line-height: 1.35;
}

.operations-v14-copy > span {
    font-size: 8.5px;
    letter-spacing: .075em;
}

.operations-v14-copy > small {
    max-width: 180px;
    margin-right: auto;
    margin-left: auto;
    color: #b5c7d1;
    font-size: 8.5px;
    line-height: 1.45;
}

.operations-v14-open {
    color: #9bcde0;
    font-size: 8px;
    letter-spacing: .055em;
}

.operations-v14-link.signal > b {
    font-size: 7px;
    letter-spacing: .06em;
}

.operations-v14-console-label > small,
.operations-v14-console-state > small {
    font-size: 8.5px;
}