/* Auth bar (welcome screen) + sign-in modal.
   Uses the shared palette from style.css (--turquoise, --cream, --ink, --leaf). */

:root{
  --auth-radius:16px;
  --auth-shadow:0 12px 34px -14px rgba(15,111,104,.5);
  --auth-google-blue:#4285f4;
  --auth-error:#c0392b;
}

/* ── Account gate (first screen) ───────────────────────────────────────────── */
.gate-actions{
  display:flex; flex-direction:column; gap:12px;
  width:100%; max-width:320px; margin:8px auto 0;
}
.gate-actions .auth-primary-btn,
.gate-actions .auth-google-btn{ width:100%; }
.gate-note{
  font-size:12.5px; color:var(--ink); opacity:.6; text-align:center;
  margin-top:16px; line-height:1.6; max-width:320px;
}

/* ── Account bar on the welcome screen ─────────────────────────────────────── */
.auth-bar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin:2px 0 16px; min-height:34px;
}
.auth-bar-status{ font-size:13px; color:var(--turquoise-deep); font-weight:600; }
.auth-bar-email{ font-weight:700; }
.auth-bar-btn{
  border:none; cursor:pointer; background:transparent;
  color:var(--turquoise-deep); font-family:"Vazirmatn",sans-serif; font-weight:700;
  font-size:13px; padding:6px 12px; border-radius:20px; transition:background .15s;
}
.auth-bar-btn:hover{ background:rgba(31,158,149,.1); }
.auth-verify{ flex-basis:100%; margin-top:6px; font-size:12px; color:#b8791f; background:rgba(245,166,35,.12); border:1px solid #e6a52a; border-radius:12px; padding:7px 12px; text-align:center; }
.auth-verify .auth-toggle{ color:#b8791f; text-decoration:underline; font-size:12px; padding:0 4px; }
.auth-verify-msg{ display:block; margin-top:4px; color:#c0392b; }
.auth-bar-cta{
  background:var(--turquoise); color:#fff;
  box-shadow:0 4px 0 var(--turquoise-deep);
}
.auth-bar-cta:hover{ background:var(--turquoise-deep); }

/* ── Sign-in modal ─────────────────────────────────────────────────────────── */
.auth-modal-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(20,16,14,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.auth-modal{
  position:relative; width:100%; max-width:360px;
  background:var(--cream); border-radius:var(--auth-radius);
  box-shadow:var(--auth-shadow); padding:26px 22px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.auth-modal-close{
  position:absolute; top:10px; right:12px; border:none; background:transparent;
  cursor:pointer; font-size:18px; color:var(--ink); opacity:.55;
}
.auth-modal-close:hover{ opacity:1; }
.auth-modal-title{
  font-family:"Fraunces",serif; font-size:22px; color:var(--turquoise-deep);
  text-align:center; margin-bottom:2px;
}
.auth-modal-sub{ font-size:12.5px; color:var(--ink); opacity:.7; text-align:center; margin-bottom:6px; }
.auth-input{
  width:100%; border:2px solid rgba(15,111,104,.2); border-radius:12px;
  padding:11px 13px; font-size:15px; font-family:"Vazirmatn",sans-serif;
  background:#fff; color:var(--ink); transition:border-color .15s;
}
.auth-input:focus{ outline:none; border-color:var(--turquoise); }
.auth-error{ color:var(--auth-error); font-size:13px; min-height:16px; text-align:center; font-weight:600; }
.auth-error.auth-ok{ color:var(--leaf); }
.auth-primary-btn{
  border:none; cursor:pointer; background:var(--turquoise); color:#fff;
  font-family:"Vazirmatn",sans-serif; font-weight:700; font-size:16px;
  padding:12px; border-radius:26px; box-shadow:0 5px 0 var(--turquoise-deep);
  transition:transform .1s,box-shadow .1s;
}
.auth-primary-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--turquoise-deep); }
.auth-primary-btn:disabled{ opacity:.6; cursor:default; }
.auth-divider{
  display:flex; align-items:center; gap:10px; color:var(--ink); opacity:.5;
  font-size:12px; margin:2px 0;
}
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:rgba(42,35,32,.2); }
.auth-google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:2px solid rgba(42,35,32,.15); background:#fff; cursor:pointer;
  font-family:"Vazirmatn",sans-serif; font-weight:600; font-size:15px; color:var(--ink);
  padding:11px; border-radius:26px; transition:background .15s;
}
.auth-google-btn:hover{ background:#f4f4f4; }
.auth-google-btn:disabled{ opacity:.6; cursor:default; }
.auth-google-g{ color:var(--auth-google-blue); font-weight:900; font-size:17px; font-family:"Fraunces",serif; }
.auth-toggle{
  border:none; background:transparent; cursor:pointer; color:var(--turquoise-deep);
  font-family:"Vazirmatn",sans-serif; font-weight:600; font-size:13px; padding:4px; margin-top:2px;
}
.auth-toggle:hover{ text-decoration:underline; }
.auth-consent{ font-size:10.5px; color:var(--ink); opacity:.55; text-align:center; margin-top:2px; line-height:1.4; }