/* Sign-in screen: white ground, three separate rings, wordmark, tagline, two buttons. */
.signin{
  min-height:100vh; min-height:100dvh; max-width:560px; margin:0 auto;
  display:flex; flex-direction:column; padding:0 24px max(40px, env(safe-area-inset-bottom));
}
.signin-hero{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:40px; padding-top:40px;
}
.signin-rings{ display:flex; gap:12px; width:min(300px, 100%); }
.signin-rings svg{ flex:1 1 0; min-width:0; height:auto; display:block; }
.signin-brand{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.signin-wordmark{ display:block; width:min(240px, 68vw); height:auto; }
.signin-tagline{ margin:0; font-size:clamp(14px, 4.2vw, 16px); font-weight:600; letter-spacing:0.01em; }
.signin-tagline span{ color:var(--paprika); }

.signin-actions{ display:flex; flex-direction:column; gap:12px; }
.signin-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  border:0; border-radius:999px; padding:18px 12px; font-family:inherit; font-size:16px; font-weight:700;
  cursor:pointer;
}
.signin-btn svg{ width:20px; height:20px; flex:0 0 auto; }
.signin-btn-google{ background:var(--surface); color:var(--ink); }
.signin-btn-google:disabled{ opacity:0.6; cursor:default; }
/* Visual only until Sign in with Apple is set up: clearly off, not a dead-looking black button. */
.signin-btn-apple:disabled{ background:var(--ink-track); color:var(--slate); cursor:not-allowed; }
.signin-soon{ margin:-4px 0 4px; text-align:center; font-size:13px; font-weight:500; color:var(--slate); }
.signin-error{
  background:var(--warn-bg); color:var(--ink); border-radius:16px; padding:12px 16px;
  font-size:14px; font-weight:500;
}