/* ============================================================
   Login / create household / join screen.
   ============================================================ */

/* ===== Auth screen — split layout after the brand board ===== */
#authRoot{
  position:fixed;inset:0;z-index:200;overflow-y:auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  background:var(--bg);
}
/* the navy band: hero gradient, white lockup */
.auth-panel{
  background:var(--hero-bg);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:48px 40px;
  position:relative;overflow:hidden;
}
/* the two dots, blown up and faded, as a quiet backdrop */
.auth-panel::before,.auth-panel::after{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;opacity:.13;pointer-events:none;
}
.auth-panel::before{background:var(--p0);right:-60px;bottom:-140px}
.auth-panel::after{background:var(--p1);right:-250px;bottom:-140px}
.auth-panel-inner{position:relative;max-width:400px;width:100%}
.brand-lockup.auth-logo{font-size:44px;color:#fff}
.auth-tagline{
  font-family:var(--display);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  margin:36px 0 22px;color:#fff;text-wrap:balance;
}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.auth-points li{display:flex;align-items:center;gap:12px;font-size:var(--fs-base);color:rgba(255,255,255,.86)}
.auth-dots{display:inline-flex;width:24px;flex-shrink:0}
.auth-dots span{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.auth-dots span + span{margin-left:-2px}

/* the light side: the form */
.auth-side{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-card{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:32px 30px;
}
.auth-head{font-family:var(--display);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
.auth-sub{color:var(--ink-mute);font-size:var(--fs-sm);margin-top:6px;margin-bottom:22px}
.auth-tabs{display:flex;gap:4px;background:var(--bg-alt);border-radius:var(--radius-ctl);padding:4px;margin-bottom:20px}
.auth-tabs button{
  flex:1;border:none;background:none;cursor:pointer;font-family:inherit;font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-mute);padding:8px 4px;border-radius:var(--radius-sm);transition:all .12s;
}
.auth-tabs button.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-xs)}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-field{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft)}
.auth-field .input{width:100%}
.auth-err{color:var(--bad);font-size:var(--fs-sm);min-height:16px;text-align:center}
.auth-submit{width:100%;justify-content:center;margin-top:2px}   /* sized by .btn-lg */
/* "or" divider + the demo button under the login form */
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--ink-faint);font-size:var(--fs-sm)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-demo{width:100%;justify-content:center}
.auth-demo-hint{text-align:center;color:var(--ink-mute);font-size:var(--fs-sm);margin-top:8px;text-wrap:balance}

/* tablets and phones: the band becomes a header above the form */
@media (max-width:860px){
  /* max-content: the band never gets squeezed when the form outgrows the screen */
  #authRoot{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content 1fr}
  .auth-panel{padding:28px 16px 30px}
  .auth-panel::before,.auth-panel::after{width:220px;height:220px;bottom:-120px}
  .auth-panel::before{right:40px}
  .auth-panel::after{right:-60px}
  .auth-panel-inner{text-align:center}
  .brand-lockup.auth-logo{font-size:34px}
  .auth-tagline{font-size:var(--fs-lg);margin:16px 0 0}
  .auth-points{display:none}
  .auth-side{align-items:flex-start;padding:24px 16px 40px}
}
@media (max-width:600px){
  .auth-card{padding:24px 18px;border-radius:var(--radius-md)}
  .auth-tabs button{min-height:40px}
}