
/* =====================================================================
   Systrix Meridian — STAX login layer  v1, 23/10/2026
   Login.master, in <head> AFTER css/stax-refresh-login.css (and after meridian-fonts.css + meridian-tokens.css).
   Night brand panel with the Meridian plus grid + horizon glow + pointer spotlight (needs stax-meridian-spotlight.js),
   STAX™ | systrix wordmarks, Day sign-in card, Login = the one magenta button, build line hidden but copyable.
   ===================================================================== */
:root{--sx-navy:var(--dune-1000);--sx-bg:var(--bg);--sx-primary:var(--brand);--sx-primary-d:var(--brand-hover);--sx-green:var(--brand-text);--sx-ink:var(--ink);--sx-muted:var(--ink-muted);--sx-line:var(--line-strong)}
html body{background:var(--bg)!important;font-family:var(--font-sans)!important}
html body *:focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:2px!important}
/* brand panel = Night (background set in the grid rule below) */
html .info .logo-left1,html .info .logo-right{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
html .info .logo-left1 img{content:url('../../images/meridian/stax-wordmark-tm-sand.svg')!important;height:44px!important;width:auto!important}
html .info .logo-right{border-left:1px solid var(--dune-700)!important;padding-left:var(--space-6)!important;margin-left:var(--space-2)!important}
html .info .logo-right img{content:url('../../images/meridian/systrix-wordmark-sand.svg')!important;height:44px!important;width:auto!important}
html .info-text::before{font:var(--t-display-md)!important;font-stretch:118%!important;letter-spacing:var(--t-display-md-tracking)!important;color:var(--dune-50)!important}
html .info-text::after{font:var(--t-body-lg)!important;color:var(--dune-400)!important}
html .info-text,html .info-text *{font-family:var(--font-sans)!important}
html .info-text table[id$=gvRss]>tbody>tr>td{border-top-color:var(--dune-850)!important}
html .info .server-no{color:var(--dune-500)!important;font:var(--t-data-sm)!important}
/* sign-in card = Day */
html .form-info{background:var(--bg)!important}
html .login-inner-form{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-md)!important}
html .login-inner-form .form-section::before{font:var(--t-heading-xl)!important;letter-spacing:var(--t-heading-xl-tracking)!important;color:var(--ink)!important}
html .login-inner-form input.form-control,html .login-inner-form select.form-control{height:var(--control-md)!important;border:1px solid var(--line-strong)!important;border-radius:var(--radius-md)!important;font:var(--t-body)!important;font-size:15px!important;color:var(--ink)!important;background:var(--surface)!important}
html .login-inner-form input.form-control::placeholder{color:var(--ink-muted)!important}
html .login-inner-form input.form-control:focus,html .login-inner-form select.form-control:focus{outline:none!important;border-color:var(--focus-ring)!important;box-shadow:0 0 0 1px var(--focus-ring)!important}
html .login-inner-form .captcha img{border:1px dashed var(--line-strong)!important;border-radius:var(--radius-md)!important}
html .login-inner-form input[type=submit]{height:var(--control-md)!important;border-radius:var(--radius-full)!important;font:var(--t-label)!important;font-size:15px!important;transition:background-color var(--duration-instant) var(--ease-cruise)}
html .login-inner-form input[type=submit][id$=LoginButton]{background:var(--brand)!important;border:1px solid var(--brand)!important;color:var(--on-brand)!important}
html .login-inner-form input[type=submit][id$=LoginButton]:hover{background:var(--brand-hover)!important}
html .login-inner-form input[type=submit][id$=LoginMS]{background:transparent!important;border:1px solid var(--line-strong)!important;color:var(--ink)!important}
html .login-inner-form input[type=submit][id$=LoginMS]:hover{background:var(--surface-sunken)!important}
html .login-inner-form p,html .login-inner-form .text1,html .login-inner-form .text{color:var(--ink-muted)!important;font:var(--t-body-sm)!important}
html .login-inner-form td>p:not(.text1){color:var(--ink)!important}
html .login-inner-form a{color:var(--brand-text)!important}
html .login-inner-form td>p img{filter:none!important;opacity:.75}
html .login-inner-form img[src*="x-iocn"]{display:none!important}
html .login-inner-form .scanner-logo-right img{border-color:var(--line)!important;border-radius:var(--radius-md)!important}
html .login-inner-form .login-copyright{border-top-color:var(--line)!important}
html .login-inner-form .login-copyright *,html .login-copyright *{color:var(--ink-muted)!important;font-family:var(--font-sans)!important}
html .btn-outline-primary{border-radius:var(--radius-full)!important;border-color:var(--dune-600)!important;color:var(--dune-50)!important;background:transparent!important}

/* ---- v2: Meridian grid on the brand panel (static: no spotlight in apps), symbol, hidden build line ---- */
html .info{background:radial-gradient(120% 70% at 30% 108%,rgb(201 11 136 / .22),transparent 62%),url('../../images/meridian/meridian-plus-night-24.svg') 0 0/24px 24px repeat,var(--dune-1000)!important}
html .info .server-no,html .info #lblVersions{color:transparent!important;background:transparent!important;user-select:text}
html .login-inner-form img[src*="x-iocn"]{display:inline-block!important;content:url('../../images/meridian/systrix-symbol-ink.svg')!important;width:16px!important;height:16px!important;opacity:1!important;margin-right:6px}

/* ---- v3: Meridian grid spotlight (marks brighten near the pointer; desktop + mouse only, off under reduced motion) ---- */
@property --mx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<length-percentage>';inherits:true;initial-value:50%}
html .info{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;isolation:isolate}
html .info::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../../images/meridian/meridian-plus-spot-24.svg') 0 0/24px 24px repeat;opacity:0;-webkit-mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000 0%,transparent 100%);mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000 0%,transparent 100%);transition:opacity var(--duration-gentle) var(--ease-landing),--mx var(--duration-base) var(--ease-landing),--my var(--duration-base) var(--ease-landing)}
@media (hover:hover) and (pointer:fine){html .info[data-spot="on"]::before{opacity:.9}}
@media (prefers-reduced-motion:reduce){html .info::before{display:none}}
