/* REL 6.17.41 — mobile legibility pass for functional system heroes */

@media (max-width:680px){
  body.system-page .instrument{overflow:visible!important;min-height:540px!important;padding-bottom:118px}
  body.system-page .system-control{width:min(94vw,460px)!important;max-width:none!important;margin:0 auto 112px;filter:drop-shadow(0 22px 40px rgba(0,0,0,.42))}

  /* The explanation now lives in its own readable lane below the instrument instead of sitting on top of nodes. */
  body.system-page .system-control .control-detail{
    left:50%!important;bottom:-62px!important;transform:translateX(-50%)!important;
    width:88%!important;max-width:88%!important;min-height:42px;
    padding:10px 12px!important;border:1px solid color-mix(in srgb,var(--control-accent) 28%,rgba(241,238,229,.12) 72%);
    background:rgba(3,4,5,.94);box-shadow:0 12px 24px rgba(0,0,0,.24);
    font:800 .58rem/1.52 var(--mono)!important;letter-spacing:.075em!important;text-align:left!important;color:#b6aea1!important;
    text-wrap:pretty
  }
  body.system-page .system-control .control-status{
    bottom:-112px!important;width:88%!important;min-height:38px;padding:9px 11px!important;
    gap:6px 12px!important;font-size:.5rem!important;letter-spacing:.09em!important;white-space:normal!important
  }
  body.system-page .system-control .control-status b{font-size:.54rem!important;letter-spacing:.08em!important}

  /* Keep every tap target inside the viewport and make the state labels readable. */
  .radar-point,.distribution-node{width:72px!important}
  .radar-point span,.distribution-node span,.arch-stage span,.portal-module span{font-size:.56rem!important;line-height:1.12!important;letter-spacing:.075em!important}
  .radar-core span,.distribution-hub span,.architecture-center span,.portal-core span{font-size:.48rem!important}
  .radar-core b,.distribution-hub b,.architecture-center b,.portal-core b{font-size:.54rem!important}

  .radar-point.page{--x:86%!important}.radar-point.wait{--x:14%!important}
  .distribution-node.creative{--x:84%!important}.distribution-node.memory{--x:16%!important}
  .distribution-node.channel{--x:71%!important}.distribution-node.result{--x:29%!important}
  .arch-stage{min-width:102px!important;height:58px!important;padding:0 9px!important}
  .arch-stage.structure{--x:84%!important}.arch-stage.measure{--x:16%!important}
  .portal-module{max-width:118px!important}

  /* The next section should arrive after the control has finished, not through it. */
  body.system-page main>.section:first-of-type{margin-top:0!important;padding-top:62px!important}
  body.system-page main>.section h2{font-size:clamp(3.35rem,14.5vw,4.8rem)!important;line-height:.86!important;letter-spacing:-.045em!important;text-wrap:balance}
}

@media (max-width:430px){
  body.system-page .instrument{min-height:520px!important;padding-bottom:112px}
  body.system-page .system-control{width:calc(100vw - 30px)!important;margin-bottom:108px}
  body.system-page .system-control .control-detail{bottom:-58px!important;width:92%!important;max-width:92%!important;font-size:.56rem!important;padding:9px 10px!important}
  body.system-page .system-control .control-status{bottom:-106px!important;width:92%!important;font-size:.48rem!important}
  .radar-point,.distribution-node{width:68px!important}
  .radar-point span,.distribution-node span,.arch-stage span,.portal-module span{font-size:.53rem!important}
  .arch-stage{min-width:94px!important;height:54px!important}
  .portal-module{max-width:108px!important}
  body.system-page main>.section h2{font-size:clamp(3rem,13.6vw,4.15rem)!important}
}