/* RIETC SSO brand surfaces — the split-panel sign-in page shared by both portals.
   Core components live in styles.css; tokens in tokens.css. */

.login-layout{min-height:100dvh;display:grid;grid-template-columns:minmax(470px,1.08fr) minmax(440px,.92fr);background:var(--surface)}
.login-story{position:relative;isolation:isolate;display:flex;min-height:100dvh;flex-direction:column;overflow:hidden;padding:clamp(34px,4vw,64px);background:radial-gradient(circle at 82% 22%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 24rem),radial-gradient(circle at 8% 96%,color-mix(in srgb,var(--violet) 9%,transparent),transparent 22rem),linear-gradient(145deg,color-mix(in srgb,var(--accent-subtle) 86%,var(--surface)),var(--surface-2))}
.login-story::before{position:absolute;z-index:-1;top:18%;right:12%;width:210px;height:210px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:52px;box-shadow:0 0 0 34px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 68px color-mix(in srgb,var(--accent) 2%,transparent);content:'';transform:rotate(16deg);animation:brand-float 9s ease-in-out infinite alternate}
@keyframes brand-float{to{transform:rotate(24deg) translateY(-10px)}}
.login-brand{display:flex;align-items:center;gap:8px;font-size:var(--text-md);font-weight:600}
.brand-logo-login{width:166px;height:76px;border-radius:10px;box-shadow:var(--shadow-1)}
.login-copy{position:relative;z-index:1;margin:auto 0 28px}
.login-copy h1{max-width:600px;font-size:clamp(36px,4vw,58px);line-height:1.12}
.login-copy p{max-width:560px;margin:16px 0 0;color:var(--text-muted);font-size:var(--text-md);line-height:1.7}
.login-capabilities{position:relative;z-index:1;display:grid;max-width:620px;gap:10px}
.login-capabilities article{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px;min-height:68px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 12%,var(--divider));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--surface) 84%,transparent);box-shadow:var(--shadow-1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);animation:login-rise var(--dur-slow) var(--ease) both}
.login-capabilities article:nth-child(2){animation-delay:60ms}
.login-capabilities article:nth-child(3){animation-delay:120ms}
.login-capabilities article:hover{box-shadow:var(--shadow-2);transform:translateX(4px)}
.login-capabilities article>span{display:grid;width:44px;height:44px;place-items:center;border-radius:12px;background:var(--accent-subtle);color:var(--accent)}
.login-capabilities article>span .icon{width:20px;height:20px}
.login-capabilities strong,.login-capabilities small{display:block}
.login-capabilities strong{font-size:var(--text-base)}
.login-capabilities small{margin-top:2px;color:var(--text-muted);font-size:var(--text-sm)}
.login-footer{position:relative;z-index:1;margin-top:28px;color:var(--text-muted);font-size:var(--text-xs)}
.login-form-side{position:relative;display:grid;min-height:100dvh;place-items:center;padding:48px;background:var(--surface)}
.login-theme-button{position:absolute;top:24px;right:24px}
.login-card{width:min(440px,100%);padding:36px;border:1px solid var(--divider);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-2);animation:login-rise var(--dur-slow) var(--ease) both}
.login-card>h1{font-size:var(--text-3xl)}
.login-card>.muted{margin:4px 0 24px;font-size:var(--text-sm)}
.login-form{display:grid;gap:12px}
.login-form label{display:grid;gap:6px;font-size:var(--text-sm);font-weight:600}
.input-with-icon{display:flex;height:40px;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted)}
.input-with-icon:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring);outline:2px solid var(--accent);outline-offset:1px}
.input-with-icon input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text)}
.sso-entry{display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:var(--text-md);font-weight:600;text-decoration:none;box-shadow:0 10px 22px -12px color-mix(in srgb,var(--accent) 80%,transparent);transition:background-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}
.sso-entry .icon{width:18px;height:18px}
.sso-entry:hover{background:var(--accent-hover);box-shadow:0 14px 26px -12px color-mix(in srgb,var(--accent) 85%,transparent);transform:translateY(-1px)}
.sso-entry:active{transform:scale(.98)}
.login-submit{width:100%;min-height:44px;margin-top:4px}
.login-help{margin:12px 0 0;color:var(--text-muted);font-size:var(--text-sm);line-height:1.6;text-align:center}
.login-help a{color:var(--accent);font-weight:600}
@keyframes login-rise{from{opacity:0;transform:translateY(10px)}}

@media (max-width:1060px){.login-layout{grid-template-columns:minmax(380px,.9fr) minmax(420px,1.1fr)}
.login-copy h1{font-size:36px}
.login-capabilities article{min-height:60px}
}
@media (max-width:900px){.login-layout{grid-template-columns:1fr}
.login-story{min-height:auto;padding:24px}
.login-story::before,.login-capabilities{display:none}
.login-copy{margin:52px 0 0}
.login-copy h1{font-size:30px}
.login-copy p{font-size:var(--text-base)}
.login-footer{margin-top:30px}
.login-form-side{min-height:auto;padding:36px 20px 52px}
.login-theme-button{top:16px;right:16px}
.login-card{width:min(500px,100%);padding:28px}
}
@media (max-width:560px){.login-copy h1{font-size:26px}
.login-card{padding:24px 20px;border-radius:var(--radius-lg)}
}
@media (prefers-reduced-motion:reduce){.login-story::before{animation:none}
.login-capabilities article:hover,.sso-entry:hover{transform:none}
}