/* CareCanvas sign-in: the same navy/teal identity as the editor. */
:root { --font-heading:system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:var(--font-heading); color-scheme:light; }
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; min-width:0; }
body { font:400 16px/1.5 var(--font-body); color:var(--rfc-charcoal); background:#fff; }
button, input { font:inherit; }
[hidden] { display:none !important; }
button { cursor:pointer; }
button:disabled { cursor:default; }
a { text-underline-offset:3px; }
.login-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); min-height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.login-intro { display:flex; flex-direction:column; justify-content:space-between; gap:48px; padding:clamp(32px,5vw,72px); background:var(--rfc-deep-navy); color:#fff; min-width:0; }
.rfc-brand { display:inline-flex; max-width:100%; }
.rfc-brand-logo { width:260px; height:auto; max-width:100%; }
.intro-copy { max-width:520px; margin:auto 0; }
.intro-copy h1 { font-size:clamp(32px,3.7vw,52px); line-height:1.12; font-weight:700; letter-spacing:-.025em; margin:0 0 24px; text-wrap:balance; }
.hero-value-prop { max-width:44ch; font-size:18px; line-height:1.65; color:#e8f1ea; margin:0; }
.intro-features { margin:44px 0 0; }
.intro-features > div { padding:18px 0; border-top:1px solid #52717b; }
.intro-features dt { font-size:16px; font-weight:650; }
.intro-features dd { margin:5px 0 0; font-size:14px; line-height:1.6; color:#d2e1e3; }
.login-side { display:flex; align-items:center; justify-content:center; padding:48px 32px; min-width:0; }
.login-card-container { width:100%; max-width:420px; min-width:0; }
.login-card { width:100%; }
.card-brand-header { margin-bottom:32px; }
.card-brand-header h2 { margin:0 0 8px; color:var(--rfc-deep-navy); font-size:28px; letter-spacing:-.02em; line-height:1.2; text-wrap:balance; }
.login-subtitle { color:var(--rfc-text-secondary); margin:0; font-size:15px; }
.field-group { margin:0 0 22px; }
.field-group label { display:block; font-size:14px; font-weight:650; margin:0 0 8px; }
.input-wrapper { position:relative; display:flex; align-items:center; min-width:0; }
.field-icon { position:absolute; left:14px; display:flex; color:var(--rfc-text-secondary); pointer-events:none; }
.input-wrapper input { width:100%; min-width:0; height:52px; border:1px solid #94a4ad; border-radius:7px; padding:12px 14px 12px 44px; color:var(--rfc-charcoal); background:#fff; font-size:16px; }
.password-field input { padding-right:88px; }
.password-toggle-btn { position:absolute; right:4px; display:flex; align-items:center; justify-content:center; gap:5px; min-height:44px; min-width:72px; padding:8px; border:0; border-radius:5px; background:#f4f6f7; color:var(--rfc-deep-navy); font-size:13px; font-weight:600; }
.toggle-icon, .btn-arrow, .field-icon { display:flex; flex-shrink:0; }
.password-toggle-btn:hover { background:#e8f1ea; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; width:100%; padding:12px 16px; margin-top:24px; border:1px solid var(--rfc-deep-teal); border-radius:7px; color:#fff; background:var(--rfc-deep-teal); font-size:16px; font-weight:650; transition:background-color 150ms; }
.login-submit:hover:not(:disabled) { background:var(--rfc-dark-teal); }
.login-submit:disabled { opacity:.65; }
.btn-spinner { display:none; width:18px; height:18px; border:2px solid #ffffff70; border-top-color:#fff; border-radius:50%; animation:login-spin .8s linear infinite; }
.is-loading .btn-spinner { display:block; }
.is-loading .btn-arrow { display:none; }
@keyframes login-spin { to { transform:rotate(360deg); } }
.password-reset-link, .back-login { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin:12px 0 0; padding:8px; background:transparent; border:0; border-radius:5px; color:var(--rfc-deep-teal); font-weight:600; font-size:14px; text-underline-offset:3px; }
.password-reset-link:hover, .back-login:hover { text-decoration:underline; background:#f4f7f5; }
.login-error, .change-banner { display:flex; align-items:flex-start; gap:12px; padding:14px; margin:16px 0; border:1px solid #cda29e; border-radius:7px; color:#8c2019; background:#fff3f1; font-size:14px; }
.alert-icon, .change-banner-icon { flex-shrink:0; display:flex; margin-top:2px; }
.alert-message { min-width:0; }
.alert-message strong, .alert-message span { display:block; }
.alert-message span { margin-top:4px; }
.change-banner { background:#e8f1ea; border-color:#93aca4; color:var(--rfc-deep-navy); }
.change-note { margin:4px 0 0; }
.password-guidance { font-size:13px; color:var(--rfc-text-secondary); margin-top:12px; }
.guidance-title { display:flex; gap:6px; align-items:center; font-weight:600; }
.guidance-list { padding-left:20px; margin:6px 0 0; }
.guidance-list li + li { margin-top:4px; }
.reset-help h3 { font-size:20px; color:var(--rfc-deep-navy); }
.reset-help p { font-size:15px; }
.reset-help a { color:var(--rfc-deep-teal); overflow-wrap:anywhere; }
.login-help { display:flex; gap:12px; align-items:flex-start; border-top:1px solid #d8dfe4; margin-top:28px; padding-top:24px; }
.help-icon { display:flex; color:var(--rfc-deep-teal); flex-shrink:0; margin-top:3px; }
.help-heading { font-size:14px; font-weight:650; margin:0 0 5px; color:var(--rfc-deep-navy); }
.help-subtext { font-size:13px; line-height:1.6; color:var(--rfc-text-secondary); margin:0; }
@media (max-width:860px) {
 .login-layout { grid-template-columns:minmax(0,1fr); }
 .login-intro { padding:28px 24px; gap:28px; }
 .rfc-brand-logo { width:220px; }
 .intro-copy { margin:0; max-width:580px; }
 .intro-copy h1 { font-size:30px; max-width:24ch; margin-bottom:14px; }
 .hero-value-prop { font-size:15px; max-width:55ch; }
 .intro-features { display:none; }
 .login-side { padding:32px 24px 40px; }
 .card-brand-header { margin-bottom:24px; }
 .card-brand-header h2 { font-size:25px; }
}
@media (max-width:360px) {
 .login-intro { padding:24px 20px; gap:24px; }
 .intro-copy h1 { font-size:28px; }
 .login-side { padding:28px 20px 32px; }
}
@media (prefers-reduced-motion:reduce) {
 *, *::before, *::after { transition:none !important; scroll-behavior:auto !important; }
 .btn-spinner { animation-duration:2s; }
}