/* ---------- login screen ---------- */
/* Full-screen grid backdrop + hide the shared header, only on login */
body:has(#view-login:not([hidden])) {
   background:
      linear-gradient(rgba(250,250,249,.7), rgba(250,250,249,.7)),
      repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 34px);
}
body:has(#view-login:not([hidden])) main {
   max-width:none;
   min-height:100vh;
   display:grid;
   place-items:center;
   padding:24px;
}
body:has(#view-login:not([hidden])) > main > h1,
body:has(#view-login:not([hidden])) > main > .sub { 
   display:none; 
}

.login-card {
   width:380px;
   max-width:100%;
   padding:36px 32px;
   text-align:center;
   border-radius:14px;
   box-shadow:0 20px 50px -20px rgba(20,25,20,.28);
}
.brand-logo { 
   width:52px; 
   height:52px; 
   margin:0 auto 14px; 
   display:block; 
}
.brand-name { 
   font-size:20px; 
   letter-spacing:-.02em; 
   margin:0 0 4px; 
}
.brand-tag  { 
   color:var(--muted); 
   font-size:14px; 
   margin:0 0 24px; 
}

/* Google button (overrides the default filled button) */
.gbtn {
   width:100%;
   display:flex; 
   align-items:center; 
   justify-content:center; 
   gap:10px;
   padding:11px;
   background:#fff; color:var(--fg);
   border:1px solid var(--line); border-radius:9px;
   font-weight:600;
}
.gbtn:hover { 
   background:#faf9f6; 
}

.login-foot { 
   margin-top:20px; 
   font-size:12px; 
   color:var(--muted); 
   line-height:1.5; 
}
.login-foot a { 
   color:var(--accent); 
   font-weight:600; 
   text-decoration:none; 
}

/* Error only shows as a box when it actually has a message */
#login-error:empty { 
   display:none; 
}
#login-error {
   background:#f8e7e5; 
   color:#b91c1c;
   text-align:left; 
   padding:9px 12px; 
   border-radius:8px; 
   margin-bottom:16px;
}