html,body{margin:0;padding:0;overflow-x:clip;background:#fff;color:#14233a;font-family:'Neue Helvetica Arabic','Almarai',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none;transition:color .16s ease,background .16s ease,border-color .16s ease,gap .16s ease}
@media (hover:hover){a:hover{color:#1b5aa6}}
img{display:block}
input,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
input:focus,textarea:focus{outline:none}
p{font-family:'Neue Helvetica Arabic','Almarai',sans-serif;line-height:2.05}
@keyframes sh-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sh-ring{0%{transform:scale(.55);opacity:.9}70%{opacity:.12}100%{transform:scale(1.6);opacity:0}}
@keyframes sh-dots{0%,100%{transform:rotate(45deg) scale(.55);opacity:.35}50%{transform:rotate(45deg) scale(1);opacity:1}}
@keyframes sh-shimmer{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
@keyframes sh-draw{0%{stroke-dashoffset:1000}100%{stroke-dashoffset:0}}
@keyframes sh-fade{0%{opacity:0}100%{opacity:1}}
@keyframes sh-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-12px)}}
@keyframes sh-ticker{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}
@keyframes sh-meteor{0%,72%{transform:rotate(-22deg) translateX(0) scaleX(.2);opacity:0}76%{opacity:.9}88%{transform:rotate(-22deg) translateX(-640px) scaleX(1);opacity:0}100%{opacity:0}}
@keyframes sh-meteor-head{0%,72%{transform:rotate(45deg) translate(0,0);opacity:0}75%{opacity:1}88%{transform:rotate(45deg) translate(-420px,420px);opacity:0}100%{opacity:0}}
@keyframes sh-twinkle{0%,100%{opacity:.25;transform:rotate(45deg) scale(.8)}50%{opacity:1;transform:rotate(45deg) scale(1.15)}}
@keyframes sh-meteor-footer{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(-520px,260px);opacity:0}}
/* the guard has to beat a style attribute, and the sky decorations sit
   outside .sh-anim, so it is written for the whole page */
@media (prefers-reduced-motion: reduce){[style*="animation"]{animation:none !important}}
.sh-menu:hover>.sh-drop,.sh-menu:focus-within>.sh-drop{opacity:1 !important;visibility:visible !important;transform:none !important}

@media (hover:hover){.sh-x1:hover{color:#fff !important}}
@media (hover:hover){.sh-x2:hover{color:#fff !important}}
@media (hover:hover){.sh-x3:hover{background:#eef4fb;transform:translateY(-1px) !important}}
@media (hover:hover){.sh-x4:hover{transform:translateY(-2px) !important}}
@media (hover:hover){.sh-x5:hover{background:#fff;color:#1b5aa6;border-color:#fff !important}}
.sh-x6:hover{opacity:.75 !important}
@media (hover:hover){.sh-x7:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x8:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x9:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x10:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x11:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x12:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x13:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x14:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x15:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x16:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x17:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x18:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x19:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x20:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x21:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x22:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x23:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x24:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x25:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x26:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x27:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x28:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x29:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x30:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x31:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x32:hover{color:#fff;border-bottom:3px solid rgba(255,255,255,.8) !important}}
@media (hover:hover){.sh-x33:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x34:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x35:hover{background:#1b5aa6;color:#fff !important}}
@media (hover:hover){.sh-x36:hover{color:#fff !important}}
@media (hover:hover){.sh-x37:hover{background:#f3f5f8 !important}}
@media (hover:hover){.sh-x38:hover{background:#f3f5f8 !important}}
@media (hover:hover){.sh-x39:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x40:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x41:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x42:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x43:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x44:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x45:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x46:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x47:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x48:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x49:hover{background:#1b5aa6;color:#fff;gap:15px !important}}
@media (hover:hover){.sh-x50:hover{border-color:#0a1a33 !important}}
@media (hover:hover){.sh-x51:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x52:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x53:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x54:hover{color:#1b5aa6 !important}}
@media (hover:hover){.sh-x55:hover{gap:13px !important}}
@media (hover:hover){.sh-x56:hover{background:#fff;color:#0a1a33;gap:15px !important}}
@media (hover:hover){.sh-x57:hover{border-color:#fff;color:#fff !important}}
@media (hover:hover){.sh-x58:hover{gap:12px !important}}
@media (hover:hover){.sh-x59:hover{background:#1b5aa6;color:#fff;gap:15px !important}}
@media (hover:hover){.sh-x60:hover{gap:14px !important}}
@media (hover:hover){.sh-x61:hover{gap:14px !important}}
@media (hover:hover){.sh-x62:hover{gap:14px;color:#fff !important}}
@media (hover:hover){.sh-x63:hover{gap:14px !important}}
@media (hover:hover){.sh-x64:hover{color:#fff !important}}
@media (hover:hover){.sh-x65:hover{color:#fff !important}}
@media (hover:hover){.sh-x66:hover{color:#fff !important}}
@media (hover:hover){.sh-x67:hover{color:#fff !important}}
@media (hover:hover){.sh-x68:hover{color:#fff !important}}
@media (hover:hover){.sh-x69:hover{color:#fff !important}}
@media (hover:hover){.sh-x70:hover{color:#fff !important}}
@media (hover:hover){.sh-x71:hover{color:#fff !important}}
@media (hover:hover){.sh-x72:hover{color:#fff !important}}
@media (hover:hover){.sh-x73:hover{color:#fff !important}}
@media (hover:hover){.sh-x74:hover{color:#fff !important}}
@media (hover:hover){.sh-x75:hover{color:#fff !important}}
@media (hover:hover){.sh-x76:hover{color:#fff !important}}
@media (hover:hover){.sh-x77:hover{color:#fff !important}}
@media (hover:hover){.sh-x78:hover{color:#fff !important}}
@media (hover:hover){.sh-x79:hover{color:#fff !important}}
@media (hover:hover){.sh-x80:hover{color:#fff !important}}
@media (hover:hover){.sh-x81:hover{color:#fff !important}}
@media (hover:hover){.sh-x82:hover{color:#fff !important}}

/* A press has to answer on a touch screen, where :hover never fires: the ground
   steps to navy for as long as the control is held. No transform and no radius —
   the timing is the colour transition the control already carries. */
body[data-sh-page="system-states"] :where(.sh-more,.sh-pager__btn,.sh-chip,.sh-tag,.sh-btn):active{
  background:var(--sh-navy);color:#fff;border-color:var(--sh-navy);
}
body[data-sh-page="system-states"] :where(.sh-band,.sh-navy,[class*="--on-dark"]) :where(a,button):active{
  background:rgba(255,255,255,.18);
}
body[data-sh-page="system-states"] :where(.sh-list__row,.sh-card,.sh-fig,.sh-op__row):active{
  background:var(--color-surface-soft);
}

/* the burger and its chevron live in the shared css/responsive.css, which feeds
   the four locked pages, so their guard is written here, per page */
@media (prefers-reduced-motion:reduce){
  body[data-sh-page="system-states"] .sh-nav-toggle span,
  body[data-sh-page="system-states"] header nav .sh-menu > a > span:last-child{transition:none}
}