/* /Components/Layout/MainLayout.razor.rz.scp.css */
.skip-link[b-ltwsyhcq0b] {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 1000;
    padding: .75rem 1rem;
    color: #111310;
    background: #e8ff5b;
    font-weight: 700;
}

.skip-link:focus[b-ltwsyhcq0b] {
    top: 1rem;
}
/* /Components/Shared/BusinessControlRoom.razor.rz.scp.css */
.business-control-room[b-5x51oyo4u3] {
    padding: clamp(7rem, 11vw, 11rem) var(--page-padding);
    color: var(--white);
    background: #10120f;
}

.control-room-heading[b-5x51oyo4u3] {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    column-gap: clamp(3rem, 8vw, 9rem);
}

.control-room-kicker[b-5x51oyo4u3] {
    margin: 0 0 1.5rem;
    color: var(--signal);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.control-room-heading h2[b-5x51oyo4u3],
.control-room-heading > p:last-child[b-5x51oyo4u3] {
    grid-column: 2;
}

.control-room-heading h2[b-5x51oyo4u3] {
    max-width: 1140px;
    margin: 0 0 3rem;
}

.control-room-heading > p:last-child[b-5x51oyo4u3] {
    max-width: 850px;
    margin: 0;
    color: #aaaea5;
    font-size: 1.06rem;
    line-height: 1.75;
}

.operating-comparison[b-5x51oyo4u3] {
    margin-top: clamp(5rem, 8vw, 8rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-light);
    border-left: 1px solid var(--line-light);
}

.operating-comparison article[b-5x51oyo4u3] {
    min-width: 0;
    padding: clamp(1.4rem, 2.6vw, 2.5rem);
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
}

.operating-comparison article > header[b-5x51oyo4u3] {
    min-height: 96px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.operating-comparison article > header > div > span[b-5x51oyo4u3] {
    color: #777b72;
    font-size: .58rem;
    letter-spacing: .13em;
}

.operating-comparison h3[b-5x51oyo4u3] {
    margin: .9rem 0 0;
    font-size: clamp(1.45rem, 2.2vw, 2.35rem);
    font-weight: 450;
    letter-spacing: -.035em;
}

.operating-comparison article > header > strong[b-5x51oyo4u3] {
    max-width: 170px;
    color: #777b72;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.5;
    text-align: right;
    text-transform: uppercase;
}

.business-boundary-label[b-5x51oyo4u3] {
    margin: 1.5rem 0 .7rem;
    color: #696d65;
    font-size: .56rem;
    font-weight: 750;
    letter-spacing: .15em;
}

.manual-maze[b-5x51oyo4u3] {
    position: relative;
    min-height: 390px;
    padding: 0 2.3rem;
    display: flex;
    align-items: center;
}

.manual-maze svg[b-5x51oyo4u3] {
    width: 100%;
    height: auto;
    display: block;
}

.maze-frame[b-5x51oyo4u3] {
    fill: #151813;
    stroke: #3f443b;
    stroke-width: 1.5;
}

.maze-wall[b-5x51oyo4u3] {
    fill: none;
    stroke: #555a50;
    stroke-width: 4;
    stroke-linecap: square;
}

.maze-shadow[b-5x51oyo4u3] { fill: url(#shadow-hatch); stroke: #3e433a; }
.manual-route[b-5x51oyo4u3] { fill: none; stroke: #d5ad4d; stroke-width: 4; stroke-dasharray: 7 7; }
.manual-touch[b-5x51oyo4u3] { fill: #d5ad4d; stroke: #151813; stroke-width: 3; }
.manual-maze text[b-5x51oyo4u3] { fill: #777b72; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }

.manual-worker[b-5x51oyo4u3] {
    color: #d5ad4d;
    will-change: transform;
}

.person-head[b-5x51oyo4u3] { fill: currentColor; stroke: #151813; stroke-width: 2; }
.person-body[b-5x51oyo4u3] { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.carried-document rect[b-5x51oyo4u3],
.handoff-document rect[b-5x51oyo4u3] { fill: #e8e5d8; stroke: #d5ad4d; stroke-width: 1.5; }
.carried-document path[b-5x51oyo4u3],
.handoff-document path[b-5x51oyo4u3] { fill: none; stroke: #5b5649; stroke-width: 1; }

.worker-one[b-5x51oyo4u3] { animation: worker-one-route-b-5x51oyo4u3 8.5s ease-in-out infinite; }
.worker-two[b-5x51oyo4u3] { animation: worker-two-route-b-5x51oyo4u3 10s ease-in-out -2.8s infinite; }
.worker-three[b-5x51oyo4u3] { animation: worker-three-route-b-5x51oyo4u3 9.2s ease-in-out -5.1s infinite; }

.handoff-document[b-5x51oyo4u3] {
    opacity: 0;
    will-change: transform, opacity;
    animation: document-handoff-b-5x51oyo4u3 8.5s ease-in-out infinite;
}

.manual-question[b-5x51oyo4u3] {
    opacity: 0;
    will-change: transform, opacity;
}

.manual-question circle[b-5x51oyo4u3] { fill: #20231e; stroke: #d5ad4d; stroke-width: 1.5; }
.manual-question text[b-5x51oyo4u3] {
    fill: #d5ad4d;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-anchor: middle;
}

.question-one[b-5x51oyo4u3] { animation: question-one-b-5x51oyo4u3 8.5s ease-in-out infinite; }
.question-two[b-5x51oyo4u3] { animation: question-two-b-5x51oyo4u3 10s ease-in-out -2.8s infinite; }
.question-three[b-5x51oyo4u3] { animation: question-three-b-5x51oyo4u3 9.2s ease-in-out -5.1s infinite; }

@keyframes worker-one-route-b-5x51oyo4u3 {
    0%, 8% { transform: translate(65px,65px); }
    22% { transform: translate(145px,65px); }
    36% { transform: translate(145px,170px); }
    50%, 57% { transform: translate(255px,170px); }
    70% { transform: translate(145px,170px); }
    84% { transform: translate(145px,65px); }
    100% { transform: translate(65px,65px); }
}

@keyframes worker-two-route-b-5x51oyo4u3 {
    0%, 9% { transform: translate(330px,82px); }
    23% { transform: translate(425px,82px); }
    36% { transform: translate(425px,150px); }
    50%, 58% { transform: translate(565px,150px); }
    72% { transform: translate(425px,150px); }
    86% { transform: translate(425px,82px); }
    100% { transform: translate(330px,82px); }
}

@keyframes worker-three-route-b-5x51oyo4u3 {
    0%, 8% { transform: translate(585px,215px); }
    22% { transform: translate(520px,215px); }
    36% { transform: translate(520px,305px); }
    50%, 58% { transform: translate(430px,305px); }
    72% { transform: translate(520px,305px); }
    86% { transform: translate(520px,215px); }
    100% { transform: translate(585px,215px); }
}

@keyframes document-handoff-b-5x51oyo4u3 {
    0%, 46% { opacity: 0; transform: translate(255px,158px) scale(.8); }
    49% { opacity: 1; transform: translate(255px,158px) scale(1); }
    55% { opacity: 1; transform: translate(330px,82px) scale(1); }
    59%, 100% { opacity: 0; transform: translate(330px,82px) scale(.8); }
}

@keyframes question-one-b-5x51oyo4u3 {
    0%, 35% { opacity: 0; transform: translate(168px,177px) scale(.7); }
    41%, 53% { opacity: 1; transform: translate(168px,177px) scale(1); }
    60%, 100% { opacity: 0; transform: translate(168px,177px) scale(.7); }
}

@keyframes question-two-b-5x51oyo4u3 {
    0%, 34% { opacity: 0; transform: translate(447px,146px) scale(.7); }
    41%, 52% { opacity: 1; transform: translate(447px,146px) scale(1); }
    59%, 100% { opacity: 0; transform: translate(447px,146px) scale(.7); }
}

@keyframes question-three-b-5x51oyo4u3 {
    0%, 35% { opacity: 0; transform: translate(495px,298px) scale(.7); }
    42%, 54% { opacity: 1; transform: translate(495px,298px) scale(1); }
    61%, 100% { opacity: 0; transform: translate(495px,298px) scale(.7); }
}

.flow-terminal[b-5x51oyo4u3] {
    position: absolute;
    z-index: 3;
    width: 88px;
    min-height: 62px;
    padding: .65rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    color: #e2e4de;
    background: #20231e;
    border: 1px solid #555a50;
    transform: translateY(-50%);
}

.flow-terminal span[b-5x51oyo4u3] { font-size: .62rem; font-weight: 700; line-height: 1.3; }
.flow-terminal small[b-5x51oyo4u3] { color: #777b72; font-size: .48rem; letter-spacing: .12em; }
.terminal-need[b-5x51oyo4u3] { top: 50%; left: -.6rem; }
.terminal-delivery[b-5x51oyo4u3] { top: 50%; right: -.6rem; }

.panel-explanation[b-5x51oyo4u3] {
    min-height: 92px;
    margin: 1.5rem 0 0;
    color: #8f938a;
    font-size: .88rem;
    line-height: 1.65;
}

.live-indicator[b-5x51oyo4u3] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    color: var(--signal) !important;
}

.live-indicator i[b-5x51oyo4u3] {
    width: 7px;
    height: 7px;
    background: var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(232,255,91,.75);
    animation: live-pulse-b-5x51oyo4u3 1.8s ease-in-out infinite;
}

@keyframes live-pulse-b-5x51oyo4u3 {
    50% { opacity: .35; transform: scale(.8); }
}

.scada-flow[b-5x51oyo4u3] {
    min-height: 390px;
    display: grid;
    grid-template-columns: 88px 22px minmax(0,1fr) 22px 88px;
    align-items: center;
}

.scada-flow .flow-terminal[b-5x51oyo4u3] {
    position: static;
    width: 88px;
    transform: none;
}

.flow-connector[b-5x51oyo4u3],
.internal-connector[b-5x51oyo4u3] {
    color: var(--signal);
    text-align: center;
}

.scada-box[b-5x51oyo4u3] {
    position: relative;
    padding: 2.3rem 1rem;
    display: grid;
    grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
    align-items: center;
    border: 1px solid rgba(232,255,91,.34);
    background: rgba(232,255,91,.035);
}

.scada-box[b-5x51oyo4u3]::before,
.scada-box[b-5x51oyo4u3]::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: rgba(232,255,91,.12);
}

.scada-box[b-5x51oyo4u3]::before { top: 1rem; }
.scada-box[b-5x51oyo4u3]::after { bottom: 1rem; }

.scada-node[b-5x51oyo4u3] {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 116px;
    padding: .8rem .55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #1d201b;
    border: 1px solid #50554b;
}

.scada-node > span[b-5x51oyo4u3] { color: #858980; font-size: .48rem; letter-spacing: .1em; }
.scada-node > strong[b-5x51oyo4u3] { margin: .75rem 0 .35rem; font-size: .78rem; font-weight: 700; line-height: 1.2; }
.scada-node > small[b-5x51oyo4u3] { color: #858980; font-size: .58rem; }

.rule-valve[b-5x51oyo4u3] {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 27px;
    height: 27px;
    background: #1d201b;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.rule-valve[b-5x51oyo4u3]::before,
.rule-valve[b-5x51oyo4u3]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%,-50%) rotate(35deg);
}

.rule-valve[b-5x51oyo4u3]::after { transform: translate(-50%,-50%) rotate(125deg); }
.node-pass[b-5x51oyo4u3] { color: var(--signal); border-color: rgba(232,255,91,.45); }
.node-fail[b-5x51oyo4u3] { color: #ff746c; border-color: rgba(255,116,108,.6); }
.node-decision[b-5x51oyo4u3] { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.node-decision > span[b-5x51oyo4u3], .node-decision > small[b-5x51oyo4u3] { color: #596018; }

.state-approved[b-5x51oyo4u3] { --state-color: var(--signal); }
.state-review[b-5x51oyo4u3] { --state-color: #f2ce56; }
.state-blocked[b-5x51oyo4u3] { --state-color: #ff746c; }
.node-decision.state-review[b-5x51oyo4u3],
.node-decision.state-blocked[b-5x51oyo4u3] { color: var(--ink); background: var(--state-color); border-color: var(--state-color); }
.delivery-terminal[b-5x51oyo4u3] { border-color: var(--state-color); }
.delivery-terminal span[b-5x51oyo4u3] { color: var(--state-color); }

.decision-trace[b-5x51oyo4u3] {
    min-height: 92px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    background: #171a15;
    border-left: 3px solid var(--state-color, var(--signal));
}

.decision-trace > span[b-5x51oyo4u3] { color: #777b72; font-size: .5rem; letter-spacing: .13em; }
.decision-trace > strong[b-5x51oyo4u3] { color: var(--state-color, var(--signal)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 600; line-height: 1.5; }
.decision-trace > small[b-5x51oyo4u3] { color: #777b72; font-size: .58rem; }

.control-console[b-5x51oyo4u3] {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(180px,.85fr);
    border-top: 1px solid var(--line-light);
    border-left: 1px solid var(--line-light);
    background: #141712;
}

.control-console > *[b-5x51oyo4u3] {
    min-height: 0;
    padding: clamp(.95rem, 1.5vw, 1.35rem);
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
}

.console-intro[b-5x51oyo4u3] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(120px,.55fr) minmax(0,1.45fr);
    column-gap: 1.25rem;
}

.console-intro .control-room-kicker[b-5x51oyo4u3] { margin: .18rem 0 0; }

.console-intro h3[b-5x51oyo4u3] {
    grid-column: 2;
    margin: 0 0 .65rem;
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.console-intro > p:last-child[b-5x51oyo4u3],
.console-result p[b-5x51oyo4u3] { color: #92968d; line-height: 1.7; }
.console-intro > p:last-child[b-5x51oyo4u3] { grid-column: 2; margin: 0; font-size: .72rem; line-height: 1.55; }

.control-bank[b-5x51oyo4u3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
}

.control-bank label > span[b-5x51oyo4u3] {
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.control-bank strong[b-5x51oyo4u3] { font-size: .68rem; font-weight: 650; }
.control-bank output[b-5x51oyo4u3] { color: var(--signal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.control-bank small[b-5x51oyo4u3] { display: block; margin-top: .4rem; color: #71756d; font-size: .52rem; letter-spacing: .03em; }

.control-bank input[type="range"][b-5x51oyo4u3] {
    width: 100%;
    height: 3px;
    display: block;
    appearance: none;
    background: #4a4f46;
    border-radius: 0;
    accent-color: var(--signal);
}

.control-bank input[type="range"][b-5x51oyo4u3]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    appearance: none;
    background: #171a15;
    border: 2px solid var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(232,255,91,.08);
    cursor: ew-resize;
}

.control-bank input[type="range"][b-5x51oyo4u3]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #171a15;
    border: 2px solid var(--signal);
    border-radius: 50%;
    cursor: ew-resize;
}

.console-result[b-5x51oyo4u3] {
    border-top: 3px solid var(--state-color);
}

.console-result > span[b-5x51oyo4u3] { color: #777b72; font-size: .52rem; letter-spacing: .14em; }
.console-result > strong[b-5x51oyo4u3] { margin: .85rem 0; display: block; color: var(--state-color); font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 500; line-height: 1.15; }
.console-result p[b-5x51oyo4u3] { margin: 0; font-size: .68rem; line-height: 1.55; }
.console-result button[b-5x51oyo4u3] { margin-top: .8rem; padding: .5rem 0; color: #b9bdb3; background: transparent; border: 0; border-bottom: 1px solid #5a5f55; cursor: pointer; font: inherit; font-size: .62rem; font-weight: 700; }
.console-result button:hover[b-5x51oyo4u3] { color: var(--signal); border-color: var(--signal); }

@media (min-width: 1441px) {
    .business-control-room[b-5x51oyo4u3] {
        padding-right: calc((100vw - var(--max-width)) / 2 + var(--page-padding));
        padding-left: calc((100vw - var(--max-width)) / 2 + var(--page-padding));
    }
}

@media (max-width: 1150px) {
    .operating-comparison[b-5x51oyo4u3] { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .control-room-heading[b-5x51oyo4u3] { grid-template-columns: 1fr; }
    .control-room-heading h2[b-5x51oyo4u3],
    .control-room-heading > p:last-child[b-5x51oyo4u3] { grid-column: 1; }
    .scada-flow[b-5x51oyo4u3] { grid-template-columns: 76px 18px minmax(0,1fr) 18px 76px; }
    .scada-flow .flow-terminal[b-5x51oyo4u3] { width: 76px; }
    .control-console[b-5x51oyo4u3] { grid-template-columns: 1fr; }
    .console-intro[b-5x51oyo4u3] { grid-column: auto; grid-template-columns: 1fr; }
    .console-intro h3[b-5x51oyo4u3],
    .console-intro > p:last-child[b-5x51oyo4u3] { grid-column: 1; }
    .console-intro .control-room-kicker[b-5x51oyo4u3] { margin-bottom: .75rem; }
}

@media (max-width: 580px) {
    .business-control-room[b-5x51oyo4u3] { padding-top: 5.5rem; padding-bottom: 5.5rem; }
    .operating-comparison article[b-5x51oyo4u3] { padding: 1.2rem; }
    .operating-comparison article > header[b-5x51oyo4u3] { min-height: 125px; flex-direction: column; }
    .operating-comparison article > header > strong[b-5x51oyo4u3] { max-width: none; text-align: left; }
    .manual-maze[b-5x51oyo4u3] { min-height: 290px; padding: 0 1rem; }
    .flow-terminal[b-5x51oyo4u3] { width: 74px; min-height: 54px; }
    .terminal-need[b-5x51oyo4u3] { left: -.8rem; }
    .terminal-delivery[b-5x51oyo4u3] { right: -.8rem; }
    .manual-maze text[b-5x51oyo4u3] { font-size: 15px; }
    .scada-flow[b-5x51oyo4u3] { min-height: 0; grid-template-columns: 1fr; gap: .8rem; justify-items: stretch; }
    .scada-flow .flow-terminal[b-5x51oyo4u3] { width: 100%; min-height: 54px; transform: none; }
    .flow-connector[b-5x51oyo4u3] { transform: rotate(90deg); }
    .scada-box[b-5x51oyo4u3] { padding: 1.2rem; grid-template-columns: 1fr; gap: .7rem; }
    .internal-connector[b-5x51oyo4u3] { transform: rotate(90deg); }
    .scada-node[b-5x51oyo4u3] { min-height: 92px; }
    .panel-explanation[b-5x51oyo4u3] { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .live-indicator i[b-5x51oyo4u3],
    .manual-worker[b-5x51oyo4u3],
    .handoff-document[b-5x51oyo4u3],
    .manual-question[b-5x51oyo4u3] { animation: none; }
    .worker-one[b-5x51oyo4u3] { transform: translate(145px,170px); }
    .worker-two[b-5x51oyo4u3] { transform: translate(425px,82px); }
    .worker-three[b-5x51oyo4u3] { transform: translate(520px,305px); }
    .handoff-document[b-5x51oyo4u3],
    .manual-question[b-5x51oyo4u3] { display: none; }
}