/* Sentinel sign-in — Microsoft Fluent 2 (tokens + Fluent UI Web Components). Responsive:
   phone = full-screen app · tablet = centred card · desktop = brand panel + form */
:root{
  --font:"Segoe UI Variable Text","Segoe UI","IBM Plex Sans Arabic",Tahoma,system-ui,sans-serif;
  --brand:var(--colorBrandBackground);
}
html[lang="ar"]{--font:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif}  /* Arabic: Cairo */
html:root{--fontFamilyBase:var(--font)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:not(:defined){visibility:hidden}
html,body{min-height:100%}
body{font-family:var(--font);color:var(--colorNeutralForeground1);background:var(--colorNeutralBackground2);
  min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
:root[data-theme="dark"]{color-scheme:dark}

.layout{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr)}

/* ---------------- brand panel ---------------- */
.hero{display:none;position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 600px at 110% -10%,#2886de 0%,transparent 60%),
             radial-gradient(900px 500px at -20% 110%,#5b3fd9 0%,transparent 55%),
             linear-gradient(160deg,#0f6cbd 0%,#0c3b5e 100%)}
.hero-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding:56px clamp(32px,5vw,80px);max-width:640px}
.hero-logo{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.hero-logo svg{width:38px;height:38px}
.hero h2{font-size:clamp(30px,3vw,42px);font-weight:700;direction:ltr;text-align:right;letter-spacing:.3px}
.hero h2 span{font-weight:400;opacity:.75}
.hero-net{font-size:18px;opacity:.9}
.hero-list{list-style:none;display:grid;gap:14px;margin-top:18px}
.hero-list li{display:grid;gap:2px;padding-inline-start:30px;position:relative;line-height:1.6}
.hero-list li::before{content:"✓";position:absolute;inset-inline-start:0;top:2px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.2)}
.hero-list b{font-size:15px}
.hero-list span{font-size:13.5px;opacity:.82}
/* radar / coverage animation: rings, outgoing signal waves, a rotating sweep and blinking device nodes */
.radar{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.radar-core{position:absolute;left:8%;bottom:6%;width:0;height:0;
  transform:translate(var(--mx,0px),var(--my,0px));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.radar-core>*{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.ring{border:1.5px solid rgba(255,255,255,.17)}
.ring.r1{width:360px;height:360px}
.ring.r2{width:620px;height:620px;border-style:dashed;border-color:rgba(255,255,255,.15)}
.ring.r3{width:880px;height:880px}
.ring.r4{width:1140px;height:1140px;border-color:rgba(255,255,255,.11)}
.wave{width:1140px;height:1140px;border:2px solid rgba(170,220,255,.7);box-shadow:0 0 18px rgba(120,190,255,.25),inset 0 0 18px rgba(120,190,255,.15);opacity:0;
  animation:wave 6s cubic-bezier(.2,.6,.3,1) infinite}
.wave:nth-of-type(2){animation-delay:2s}.wave:nth-of-type(3){animation-delay:4s}
@keyframes wave{0%{transform:translate(-50%,-50%) scale(.04);opacity:.9}70%{opacity:.25}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.sweep{width:1140px;height:1140px;
  background:conic-gradient(from 0deg,rgba(150,210,255,.30) 0deg,rgba(150,210,255,.10) 28deg,transparent 70deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 48%,transparent 50%);mask:radial-gradient(circle,#000 0 48%,transparent 50%);
  animation:sweep 9s linear infinite}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.center{width:14px;height:14px;background:#cfe8ff;box-shadow:0 0 0 6px rgba(207,232,255,.18),0 0 24px 6px rgba(120,190,255,.6)}
.node{width:8px;height:8px;background:#9fe0b0;box-shadow:0 0 10px 2px rgba(159,224,176,.7);
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) !important;
  animation:blip 3.6s ease-in-out var(--d) infinite}
.node.alert{background:#ffb4a8;box-shadow:0 0 12px 3px rgba(255,140,120,.75);animation-duration:2.2s}
@keyframes blip{0%,100%{opacity:.25}45%{opacity:1}55%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wave,.sweep,.node{animation:none}.wave{display:none}.radar-core{transition:none}}

/* ---------------- form panel ---------------- */
.pane{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  background:radial-gradient(800px 400px at 100% 0%,var(--colorBrandBackground2) 0%,transparent 70%),var(--colorNeutralBackground2)}
.card{width:100%;max-width:440px;margin:auto;display:grid;gap:18px;background:var(--colorNeutralBackground1);
  border-radius:var(--borderRadiusXLarge);padding:40px 40px 32px;box-shadow:var(--shadow16);animation:rise .4s cubic-bezier(.1,.9,.2,1)}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#0f6cbd 0%,#2886de 55%,#47a9f5 100%);box-shadow:0 4px 12px rgba(15,108,189,.35)}
.logo svg{width:20px;height:20px}
.brand-name{font-size:17px;font-weight:600;direction:ltr}
.brand-name span{color:var(--colorNeutralForeground3);font-weight:400}
h1{font-size:var(--fontSizeHero700);line-height:var(--lineHeightHero700);font-weight:600}
.lead{font-size:14px;color:var(--colorNeutralForeground3);line-height:1.7;margin-top:-10px}
fluent-field{width:100%}
fluent-text-input{width:100%}
fluent-button[type="submit"]{width:100%;margin-top:6px}
.secure{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--colorNeutralForeground3);
  padding-top:16px;border-top:1px solid var(--colorNeutralStroke2)}
.secure svg{flex:none}
footer{display:flex;justify-content:center;gap:18px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  font-size:12px;color:var(--colorNeutralForeground3)}
footer b{font-weight:600;color:var(--colorNeutralForeground2)}
.hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}

/* desktop: brand panel + form */
@media (min-width:1024px){
  .layout{grid-template-columns:minmax(420px,46%) minmax(0,1fr)}
  .hero{display:block}
  .pane{background:var(--colorNeutralBackground1)}
  .card{box-shadow:none;padding:24px 8px;max-width:400px}
  .card .brand{display:none}
}
@media (min-width:1600px){.card{max-width:440px}.hero-inner{gap:22px}}

/* phones: full-screen, native-app style */
@media (max-width:640px){
  .pane{background:linear-gradient(180deg,var(--colorBrandBackground2) 0%,var(--colorNeutralBackground1) 42%)}
  .card{max-width:none;margin:0;background:none;box-shadow:none;border-radius:0;gap:20px;
    padding:calc(8vh + env(safe-area-inset-top)) 22px 12px}
  .brand{flex-direction:column;gap:14px;margin-bottom:6px}
  .logo{width:84px;height:84px;border-radius:22px;box-shadow:0 12px 30px rgba(15,108,189,.35)}
  .logo svg{width:44px;height:44px}
  .brand-name{font-size:22px}
  h1{font-size:30px;text-align:center}
  .lead{font-size:16px;text-align:center}
  fluent-field{--fontSizeBase300:16px;--fontSizeBase400:17px}   /* >=16px: iOS does not zoom into the field */
  fluent-text-input{--fontSizeBase300:17px;--fontSizeBase400:17px;min-height:52px;border-radius:12px}
  fluent-button[type="submit"]{min-height:54px;font-size:17px;border-radius:12px}
  .secure{justify-content:center;text-align:center;border-top:0;padding-top:4px;font-size:13px}
}
@media (max-width:640px) and (max-height:640px){.card{padding-top:calc(3vh + env(safe-area-inset-top))}.logo{width:64px;height:64px}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

/* language switch (sign-in page) */
.pane{position:relative}
.lang-switch{position:absolute;top:calc(14px + env(safe-area-inset-top));inset-inline-end:16px;z-index:2;height:32px;padding:0 14px;border-radius:16px;
  border:1px solid var(--colorNeutralStroke1);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);
  font:600 13px var(--font);cursor:pointer;box-shadow:var(--shadow2)}
.lang-switch:hover{background:var(--colorNeutralBackground1Hover)}
/* password reveal: a plain outlined eye (Fluent buttons fill icons solid) that turns into a crossed eye */
.reveal{display:grid;place-items:center;width:32px;height:32px;margin-inline-end:-6px;border:0;border-radius:6px;background:none;
  color:var(--colorNeutralForeground3);cursor:pointer;transition:background .12s,color .12s}
.reveal:hover{background:var(--colorNeutralBackground1Hover);color:var(--colorBrandForeground1)}
.reveal:focus-visible{outline:2px solid var(--colorStrokeFocus2);outline-offset:1px}
.reveal svg{fill:none}
.reveal .eye-off{display:none}
.reveal.on{color:var(--colorBrandForeground1)}
.reveal.on .eye-on{display:none}.reveal.on .eye-off{display:block}
html[lang="en"] body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
html[dir="ltr"] .hero h2{text-align:left}
/* fields: label above, input full width -> the sign-in button is exactly as wide as the inputs */
fluent-field{display:grid;grid-template-columns:minmax(0,1fr)}
fluent-text-input{max-width:none}
/* sign-in button: an animated shield. hover = the check redraws, signing in = a scanning ring + pulsing shield */
#btn .auth-ic{flex:none;overflow:visible}
#btn .ai-ring{stroke-dasharray:18 49;opacity:0;transform-origin:12px 12px;transition:opacity .2s}
#btn .ai-check{stroke-dasharray:9;stroke-dashoffset:0}
#btn .ai-shield{transform-origin:12px 12px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#btn:hover .ai-shield{transform:scale(1.08)}
#btn:hover .ai-check{animation:ai-draw .55s ease-out}
#btn.busy .ai-ring{opacity:1;animation:ai-spin .9s linear infinite}
#btn.busy .ai-shield{animation:ai-pulse 1.2s ease-in-out infinite}
#btn.busy .ai-check{animation:ai-draw 1.2s ease-in-out infinite}
@keyframes ai-draw{0%{stroke-dashoffset:9}60%,100%{stroke-dashoffset:0}}
@keyframes ai-spin{to{transform:rotate(360deg)}}
@keyframes ai-pulse{0%,100%{transform:scale(.92)}50%{transform:scale(1.04)}}
.card.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){#btn .auth-ic *{animation:none!important;transition:none}.card.shake{animation:none}}

/* phones and tablets: the coverage radar behind the form (brand panel is hidden below 1024px) */
.m-radar{display:none;z-index:0}
.pane>.card,.pane>footer{position:relative;z-index:1}
@media (max-width:1023px){
  .m-radar{display:block;
    --ring:rgba(15,108,189,.22);--wave:rgba(15,108,189,.6);--sweep:rgba(40,134,222,.28);--dot:#0f6cbd;--node:#13a10e}
  :root[data-theme="dark"] .m-radar{--ring:rgba(150,200,255,.24);--wave:rgba(150,210,255,.75);--sweep:rgba(120,190,255,.3);--dot:#9fd0ff;--node:#7ddc8c}
  .m-radar .radar-core{scale:var(--rs,.7)}
  .m-radar .ring{border-color:var(--ring)}
  .m-radar .ring.r2{border-color:var(--ring)}
  .m-radar .wave{border-color:var(--wave);box-shadow:none}
  .m-radar .sweep{background:conic-gradient(from 0deg,var(--sweep) 0deg,transparent 60deg,transparent 360deg)}
  .m-radar .center{background:var(--dot);box-shadow:0 0 0 6px color-mix(in srgb,var(--dot) 18%,transparent),0 0 22px 4px color-mix(in srgb,var(--dot) 45%,transparent)}
  .m-radar .node{background:var(--node);box-shadow:0 0 10px 2px color-mix(in srgb,var(--node) 60%,transparent)}
  .m-radar .node.alert{background:#d13438;box-shadow:0 0 12px 3px rgba(209,52,56,.55)}
}
/* phones: radar centred on the logo, fading out before the fields */
@media (max-width:640px){
  .m-radar .radar-core{left:50%;bottom:auto;top:calc(8vh + 42px + env(safe-area-inset-top));--rs:.5}
  .m-radar{-webkit-mask:linear-gradient(#000 0 36%,transparent 70%);mask:linear-gradient(#000 0 36%,transparent 70%)}
  .card .logo{position:relative}
}
@media (max-width:640px) and (max-height:640px){.m-radar .radar-core{top:calc(3vh + 32px + env(safe-area-inset-top))}}
#btn .auth-ic,#btn .auth-ic *{fill:none!important}