/* REL 6.17.38 — desktop system-page finish + Operator control surface */

/* Shared desktop finish: less empty template space, stronger hierarchy, more deliberate cards. */
@media (min-width:1081px){
  body.system-page .hero{max-width:1920px;margin:0 auto;grid-template-columns:minmax(560px,1.02fr) minmax(560px,.98fr);gap:clamp(34px,4.2vw,78px);padding:clamp(62px,5vw,88px) clamp(54px,5.5vw,104px);min-height:min(860px,calc(100svh - 82px))}
  body.system-page .copy{width:min(100%,820px);justify-self:end;padding:clamp(38px,3.8vw,62px)}
  body.system-page .copy::before,body.system-page .copy::after{left:10%;right:10%}
  body.system-page .instrument{min-height:690px}
  body.system-page .glyph{width:min(610px,39vw)}
  body.system-page .instrument::before{width:min(650px,42vw)}
  body.system-page .instrument::after{width:min(535px,35vw)}
  body.system-page .hero h1{font-size:clamp(4.75rem,6.1vw,7.6rem);line-height:.79;letter-spacing:-.055em}
  body.system-page .lede{font-size:1.32rem;line-height:1.46;max-width:700px}
  body.system-page .thesis{max-width:720px}
  body.system-page .section{padding-top:72px;padding-bottom:72px}
  body.system-page .caps{gap:12px}
  body.system-page .cap{min-height:224px;padding:31px 30px 28px;border-top-color:color-mix(in srgb,var(--instrument-accent,#c9a34b) 38%,rgba(241,238,229,.12) 62%)}
  body.system-page .cap::before{content:"";position:absolute;left:28px;top:0;width:52px;height:2px;background:linear-gradient(90deg,var(--instrument-accent,#c9a34b),transparent);box-shadow:0 0 16px color-mix(in srgb,var(--instrument-accent,#c9a34b) 28%,transparent)}
  body.system-page .cap strong{font-size:1.58rem;line-height:1.05;max-width:16ch}
  body.system-page .threshold{gap:12px}
  body.system-page .threshold>div{padding:42px 44px}
  body.system-page .threshold h3{max-width:13ch}
  body.system-page .protocol span{padding:9px 8px;transition:padding-left .16s ease,background .16s ease,color .16s ease}
  body.system-page .protocol span:hover{padding-left:13px;background:color-mix(in srgb,var(--instrument-accent,#c9a34b) 5%,transparent);color:#d8c18a}

  /* Distribution: the long name should feel intentional, never clipped by the paper card. */
  body.system-distribution-radar .hero{grid-template-columns:minmax(575px,1.04fr) minmax(590px,.96fr)}
  body.system-distribution-radar .hero h1{font-size:clamp(4.45rem,5.45vw,6.9rem);line-height:.76;letter-spacing:-.06em;margin-bottom:24px}
  body.system-distribution-radar .copy{width:min(100%,850px)}

  /* Operator gets more physical space because its hero is now a working control diagram. */
  body.system-operator .hero{grid-template-columns:minmax(660px,1.12fr) minmax(560px,.88fr);gap:clamp(28px,3.5vw,64px)}
  body.system-operator .instrument{min-height:730px}
  body.system-operator .copy{width:min(100%,790px)}
}

/* Operator: retire the generic checkmark dial in favor of a state machine. */
body.system-operator .instrument>.glyph,
body.system-operator .instrument>.hero-motion--route,
body.system-operator .instrument>.hero-nodes,
body.system-operator .instrument>.hero-readout,
body.system-operator .instrument>.orbit-label{display:none!important}
body.system-operator .instrument::before{width:min(680px,44vw);border-color:rgba(145,177,203,.17);box-shadow:0 0 0 30px rgba(145,177,203,.012),0 0 0 68px rgba(201,163,75,.008),0 0 125px rgba(104,145,178,.12)}
body.system-operator .instrument::after{width:min(575px,37vw);border-style:solid;border-color:rgba(201,163,75,.24);opacity:.62;animation-duration:68s}

.operator-control{--oc:#d3a64a;--oc2:#91b1cb;position:relative;z-index:9;width:min(660px,43vw);aspect-ratio:1;border-radius:50%;isolation:isolate;filter:drop-shadow(0 30px 60px rgba(0,0,0,.58));user-select:none}
.operator-control::before,.operator-control::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.operator-control::before{inset:5.8%;border:1px solid rgba(241,238,229,.28);box-shadow:inset 0 0 0 34px rgba(145,177,203,.012),inset 0 0 0 35px rgba(201,163,75,.05),0 0 0 1px rgba(201,163,75,.12)}
.operator-control::after{inset:17%;border:1px dashed rgba(201,163,75,.32);animation:operatorConsoleSpin 42s linear infinite}
.operator-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.operator-map .ring{fill:none;stroke:rgba(241,238,229,.16);stroke-width:1}
.operator-map .ring.gold{stroke:rgba(201,163,75,.28);stroke-dasharray:3 9}
.operator-map .spoke{stroke:rgba(241,238,229,.18);stroke-width:1.2}
.operator-map .spoke.active{stroke:rgba(201,163,75,.54);stroke-dasharray:4 8;animation:operatorSpokeFlow 7s linear infinite}
.operator-map .tick{stroke:rgba(145,177,203,.22);stroke-width:1}
.operator-core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(241,238,229,.42);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(201,163,75,.12),rgba(4,7,10,.94) 54%,rgba(2,3,5,.98));box-shadow:0 0 0 14px rgba(145,177,203,.025),0 0 42px rgba(201,163,75,.08)}
.operator-core::before{content:"";position:absolute;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbe7 0 7%,#efc65e 22%,#b77a1e 52%,#47300f 100%);border:1px solid #f3d27d;box-shadow:0 0 12px rgba(238,190,74,.62),0 0 34px rgba(201,163,75,.22);animation:operatorCorePulse 4.8s ease-in-out infinite}
.operator-core::after{content:"";position:absolute;inset:17%;border:1px solid rgba(201,163,75,.34);border-radius:50%;animation:operatorConsoleSpin 24s linear reverse infinite}
.operator-core span{position:absolute;top:14%;font:900 .43rem var(--mono);letter-spacing:.18em;color:#9a927f;text-transform:uppercase}
.operator-core b{position:absolute;bottom:13%;font:900 .46rem var(--mono);letter-spacing:.15em;color:#e7d59f;text-transform:uppercase}
.operator-state{--x:50%;--y:10%;position:absolute;z-index:5;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:94px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(241,238,229,.24);background:rgba(3,5,7,.88);color:#b9b1a2;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 0 0 7px rgba(145,177,203,.018);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease}
.operator-state::before{content:attr(data-index);position:absolute;top:12px;font:900 .42rem var(--mono);letter-spacing:.16em;color:#786f61}
.operator-state span{font:900 .52rem/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;max-width:72px}
.operator-state:hover,.operator-state:focus-visible{transform:translate(-50%,-50%) scale(1.055);border-color:rgba(201,163,75,.6);outline:none;color:#f5ead0}
.operator-state.is-active{border-color:#d6aa4f;color:#fff4d4;background:radial-gradient(circle,rgba(201,163,75,.14),rgba(4,6,8,.94) 65%);box-shadow:0 0 0 7px rgba(201,163,75,.025),0 0 28px rgba(201,163,75,.16),inset 0 0 0 1px rgba(255,245,213,.08)}
.operator-state.is-active::after{content:"";position:absolute;inset:-8px;border:1px dashed rgba(201,163,75,.4);border-radius:50%;animation:operatorConsoleSpin 12s linear infinite}
.operator-state.watch{--x:50%;--y:9%}.operator-state.run{--x:14%;--y:42%}.operator-state.verify{--x:86%;--y:42%}.operator-state.handoff{--x:28%;--y:82%}.operator-state.human{--x:72%;--y:82%}
.operator-status{position:absolute;z-index:6;left:50%;bottom:-1%;transform:translateX(-50%);width:68%;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:10px 14px;border:1px solid rgba(201,163,75,.3);background:rgba(2,3,4,.88);box-shadow:0 18px 32px rgba(0,0,0,.3);font:900 .43rem/1.45 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#777166}
.operator-status b{color:#efe2bd;font-size:.46rem}.operator-status span:last-child{text-align:right}

/* Operator cards feel like instrument modules instead of generic boxes. */
body.system-operator .cap{padding-left:34px;background:radial-gradient(circle at 88% 18%,rgba(117,151,181,.055),transparent 34%),linear-gradient(145deg,#0b1118,#050709)}
body.system-operator .cap::after{right:-34px;bottom:-44px;width:142px;height:142px;border-color:rgba(117,151,181,.14);box-shadow:0 0 0 18px rgba(117,151,181,.014),0 0 0 37px rgba(201,163,75,.009)}
body.system-operator .threshold>div:first-child{background:radial-gradient(circle at 86% 62%,rgba(117,151,181,.07),transparent 34%),linear-gradient(145deg,#0b1016,#050607)}

@media(max-width:1080px){
  .operator-control{width:min(650px,88vw)}
  body.system-operator .instrument::before{width:min(660px,88vw)}
  body.system-operator .instrument::after{width:min(560px,74vw)}
}
@media(max-width:680px){
  .operator-control{width:min(420px,94vw);margin-top:8px}
  .operator-state{width:66px}
  .operator-state::before{top:7px;font-size:.34rem}.operator-state span{font-size:.39rem;letter-spacing:.09em;max-width:52px}
  .operator-status{width:78%;bottom:-3%;padding:7px 9px;font-size:.34rem;gap:5px 9px}.operator-status b{font-size:.36rem}
  .operator-core span{font-size:.34rem}.operator-core b{font-size:.36rem}
}
@media(max-width:420px){.operator-state{width:59px}.operator-state span{font-size:.35rem}.operator-status{width:82%}}

@keyframes operatorConsoleSpin{to{transform:rotate(360deg)}}
@keyframes operatorSpokeFlow{to{stroke-dashoffset:-72}}
@keyframes operatorCorePulse{0%,100%{transform:scale(.92);filter:brightness(.92)}50%{transform:scale(1.06);filter:brightness(1.18)}}
@media(prefers-reduced-motion:reduce){.operator-control::after,.operator-core::before,.operator-core::after,.operator-state.is-active::after,.operator-map .spoke.active{animation:none!important}}