/* Auth UI refinement v5 · PMII Rayon Perjuangan Ibnu Aqil · 2026-10-09
   Loaded after the existing legacy auth and mobile-sheet styles.
   Visual only: no auth validation, OTP, CAPTCHA, invite or role logic changes. */
:root { --ra5-blue:#0757a6; --ra5-gold:#f4c832; --ra5-ink:#14293e; --ra5-muted:#64798d; --ra5-border:#d9e5ef; }
.raAuthScreen .raAuthIntro{max-width:420px;margin:-11px 0 22px;color:#657a8e;font-size:13px;line-height:1.65;font-weight:500}
.raAuthScreen .raAuthPane h1{letter-spacing:-.035em}
.raAuthScreen .raAuthForm :is(input,select,textarea){min-width:0}
.raAuthScreen .raAuthSubmit,.raInviteStandalone .raInviteYes{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.raAuthScreen :is(.raAuthSubmit,.raAuthSecondary):active,.raInviteStandalone .raInviteActions button:active{transform:translateY(1px)}
.raAuthScreen :is(input,button,a,select,textarea):focus-visible,
.raInviteStandalone :is(button,a):focus-visible{outline:3px solid #f2c324!important;outline-offset:3px}
.raAuthScreen .raAuthPane .raOtpEmail{overflow-wrap:anywhere}
.raInviteStandalone .raInviteIdentity{box-shadow:none}
.raInviteStandalone .raInviteNote{max-width:40ch}

/* Dark theme must work on desktop too, not only on portrait phones. */
html[data-theme="dark"] body.raAuthMode{background:#0f2134!important;color:#e9f4fe}
html[data-theme="dark"] body.raAuthMode .raAuthScreen{background:#16283a!important;border-color:rgba(104,149,185,.24)!important}
html[data-theme="dark"] body.raAuthMode .raAuthPane{background:#172b3e!important;box-shadow:none!important}
html[data-theme="dark"] body.raAuthMode .raAuthPane h1,
html[data-theme="dark"] body.raAuthMode .raPmiiBrand{color:#f1f7fd!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthIntro,
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthFoot,
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raOtpEmail{color:#b6c9da!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthFoot a,
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raOtpMiniLinks a,
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthOptions a{color:#aedaff!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm label{color:#d3e1ec!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm textarea,
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm select{color:#eef6fc!important;background:#20384d!important;border-color:#406079!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm input::placeholder{color:#b0c2d3!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthSecondary{background:#294459!important;color:#edf6ff!important;border-color:#456278!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPasswordStrength{background:#233a4d!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPasswordStrengthMeta,
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPasswordRules{color:#bfcede!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raVisualCaptcha{background:#21394c!important;border-color:#405b70!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raRobotCheck{background:#253e54!important;border-color:#45647c!important;color:#e7f3ff!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raRobotLabel{color:#e7f3ff!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPengurusInviteNotice{color:#e9f5ff!important;background:#20394d!important;border-color:#40617a!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPengurusInviteNotice b{color:#eff8ff!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPengurusInviteNotice small{color:#c1d0df!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raRegisterConsent{color:#aebfd1!important}
html[data-theme="dark"] body.raAuthMode .raAuthScreen .raRegisterConsent a{color:#b1dfff!important}

/* The long-form data view uses the same accessibility contrast as the short forms. */
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined{color:#edf5fc;background:#172b3f!important;border-color:#35516a!important}
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined :is(.raAuthDetailsHead h1,.raDetailsSectionHead h2,.raDetailsField>span){color:#f1f7fd!important}
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined .raDetailsPanel{background:#172b3f!important;color:#e7f3fb!important}
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined :is(input,select,textarea){background:#243c51!important;border-color:#476079!important;color:#eff7ff!important}
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined :is(input,textarea)::placeholder{color:#adc0d2!important}
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined .raProfilePhotoEditor,
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined .raDetailsSection{border-color:#3c546a!important}
html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined :is(label,small){color:#b9cde0!important}

/* Mobile portrait: designed as one continuous screen, not desktop cards stacked. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait) {
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{
    height:clamp(195px,29dvh,308px)!important;min-height:195px!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroArt,
  body.raInviteStandalone .raMobileHeroArt{
    top:61%!important;width:min(85%,420px)!important;max-height:81%!important;
    object-fit:contain!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane,
  body.raInviteStandalone .raInvitePane{
    margin-top:-25px!important;
    border-radius:28px 28px 0 0!important;
    padding-top:clamp(25px,4.8vw,36px)!important;
    box-shadow:0 -11px 30px rgba(7,32,60,.10)!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane{
    min-height:calc(71dvh + 25px)!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane h1{
    margin-bottom:15px!important;
    font-size:clamp(28px,5.4vw,37px)!important;
    letter-spacing:-.045em!important;
  }
  body.raAuthMode .raAuthScreen .raAuthIntro{
    max-width:46ch!important;margin:-5px 0 18px!important;
    font-size:13px!important;line-height:1.5!important;color:#6c7f92!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane .raAuthForm{gap:0!important}
  body.raAuthMode .raAuthScreen .raAuthPane .raMobileFieldLabel{margin:13px 0 6px!important}
  body.raAuthMode .raAuthScreen .raAuthPane .raOtpGrid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important}
  body.raAuthMode .raAuthScreen .raAuthPane .raOtpGrid input{min-width:0!important}
  body.raAuthMode .raAuthScreen .raAuthPane .raAuthOptions .raCheck{display:flex!important;align-items:center;gap:6px}
  body.raAuthMode .raAuthScreen .raAuthPane .raAuthOptions .raCheck input{accent-color:#0757a6}
  body.raInviteStandalone .raInvitePane h1{margin-top:11px!important}
  body.raInviteStandalone .raInviteLead{margin-bottom:17px!important}
  body.raInviteStandalone .raInviteIdentity{padding:15px!important;border-radius:15px!important}
  body.raInviteStandalone .raInviteActions{margin-top:20px!important}
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel{
    border-radius:28px 28px 0 0!important;
    padding-left:clamp(19px,5vw,44px)!important;
    padding-right:clamp(19px,5vw,44px)!important;
  }
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthIntro{color:#b2c5d7!important}
}
@media (max-width:390px) and (orientation:portrait){
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{height:196px!important;min-height:196px!important}
  body.raAuthMode .raAuthScreen .raAuthPane,
  body.raInviteStandalone .raInvitePane{padding-left:19px!important;padding-right:19px!important}
  body.raAuthMode .raAuthScreen .raAuthPane .raOtpGrid{gap:4px!important}
}
@media (orientation:landscape) and (max-height:580px) and (max-width:950px){
  body.raAuthMode .raAuthScreen .raAuthPane{max-height:none!important;overflow:visible!important}
  body.raAuthMode .raAuthScreen .raAuthPane>.raPmiiBrand{display:flex!important}
  body.raAuthMode .raAuthScreen .raAuthPane .raAuthIntro{margin:0 0 15px!important}
}
@media (prefers-reduced-motion:no-preference){
  .raInvitePane,.raAuthScreen .raAuthPane{animation:raAuthPolishIn .35s ease-out both}
  @keyframes raAuthPolishIn{from{opacity:.88}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .raInvitePane,.raAuthScreen .raAuthPane{animation:none!important;transition:none!important}
}