/* ═══════════════════════════════════════════════════════════════════════
   The sign-in box
   ───────────────────────────────────────────────────────────────────────
   Replaces the inline styles that used to live on every element inside
   #auth-step-1. Inline styles cannot express :focus-within, :focus-visible
   or a media query, which is why the old box had a country-code chip that
   stayed grey while the input beside it turned green, and no visible focus
   ring for anyone navigating by keyboard.

   One rule it exists to enforce: the error line is hidden until something
   is actually wrong. The old markup carried `display:none` AND
   `display:block` in the same style attribute — the later declaration won,
   so a freshly-opened modal always greeted the visitor with a red
   "Please enter a valid 10-digit number" under an empty field.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --auth-err:#B3261E;
  --auth-ring:rgba(24,201,121,.16);
}
[data-theme="dark"]{
  --auth-err:#F0776B;
  --auth-ring:rgba(24,201,121,.22);
}

/* ── Why am I being asked to log in? ──────────────────────────────────────
   This used to be a full-width saturated green slab — the loudest thing in
   the box, louder than the actual heading under it. It is context, not the
   headline, so it reads as a quiet eyebrow now and the hierarchy runs
   eyebrow → heading → help text, in that order. */
.gate-note{
  display:inline-block;
  margin:0 0 14px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(31,164,99,.08);
  border:1px solid rgba(31,164,99,.18);
  color:var(--brand-green,#0E7C4A);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.4;
}
[data-theme="dark"] .gate-note{
  background:rgba(24,201,121,.10);
  border-color:rgba(24,201,121,.24);
  color:#5FD9A0;
}

/* Visible to a screen reader, not on screen. The phone field needs a real
   label; a placeholder is not one — it disappears the moment you type. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ── Heading ──────────────────────────────────────────────────────────── */
.auth-title{
  font-size:21px;
  font-weight:800;
  margin:0 0 6px;
  color:var(--text-color);
  letter-spacing:-.3px;
}
.auth-sub{
  font-size:13px;
  color:var(--text-muted,#888);
  margin:0 0 20px;
  line-height:1.5;
}

/* ── Phone field ──────────────────────────────────────────────────────────
   +91 and the number are one control, so they get one border and they
   light up together. Two separate boxes with a gap between them read as
   two unrelated inputs, and only the right-hand one ever responded to
   focus. */
.auth-phone{
  display:flex;
  align-items:stretch;
  height:50px;
  border:1.5px solid var(--border-glass);
  border-radius:12px;
  background:var(--card-bg);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.auth-phone:focus-within{
  border-color:var(--brand-green,#18C979);
  box-shadow:0 0 0 4px var(--auth-ring);
}
.auth-phone__cc{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  font-size:14px;
  font-weight:700;
  color:var(--text-color);
  white-space:nowrap;
  border-right:1px solid var(--border-glass);
  background:rgba(0,0,0,.015);
}
[data-theme="dark"] .auth-phone__cc{ background:rgba(255,255,255,.03); }

.auth-phone__input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  padding:0 14px;
  font-size:16px;              /* 16px stops iOS Safari zooming on focus */
  font-weight:600;
  letter-spacing:.4px;
  background:transparent;
  color:var(--text-color);
  font-variant-numeric:tabular-nums;
}
.auth-phone__input::placeholder{
  font-weight:500;
  letter-spacing:0;
  color:var(--text-muted,#9a9a9a);
}

/* Only turns red once the field is genuinely wrong — see auth.js */
.auth-phone.is-invalid{
  border-color:var(--auth-err);
}
.auth-phone.is-invalid:focus-within{
  box-shadow:0 0 0 4px rgba(179,38,30,.12);
}

/* ── Error line ───────────────────────────────────────────────────────────
   Hidden by default and kept out of the flow, but the row below reserves
   its height so showing it does not shove the button down the screen. */
.auth-error{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:18px;
  margin:7px 2px 0;
  font-size:12px;
  font-weight:600;
  text-align:left;
  color:var(--auth-err);
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.auth-error.is-shown{
  opacity:1;
  transform:none;
}

/* ── Primary action ───────────────────────────────────────────────────── */
.auth-submit{
  width:100%;
  height:50px;
  margin-top:12px;
  background:var(--brand-green,#18C979);
  color:#fff;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.3px;
  cursor:pointer;
  transition:filter .18s ease, transform .12s ease, box-shadow .18s ease;
}
.auth-submit:hover{ filter:brightness(1.05); }
.auth-submit:active{ transform:translateY(1px); }
.auth-submit:disabled{ opacity:.6; cursor:default; transform:none; filter:none; }

/* ── OR rule ──────────────────────────────────────────────────────────── */
.auth-or{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0;
}
.auth-or::before,
.auth-or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border-glass);
}
.auth-or span{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--text-muted,#aaa);
}

/* ── Google ───────────────────────────────────────────────────────────── */
.auth-google{
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--card-bg);
  border:1.5px solid var(--border-glass);
  border-radius:12px;
  font-size:14.5px;
  font-weight:600;
  color:var(--text-color);
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.auth-google:hover{
  border-color:#4285F4;
  box-shadow:0 0 0 3px rgba(66,133,244,.10);
}

/* ── Trust line ───────────────────────────────────────────────────────── */
.auth-trust{
  font-size:11px;
  color:var(--text-muted,#aaa);
  margin:16px 0 0;
  line-height:1.65;
}
.auth-trust a{ color:var(--brand-green); text-decoration:none; }
.auth-trust a:hover{ text-decoration:underline; }

/* ── Keyboard users get a visible ring on everything focusable ─────────── */
#auth-step-1 button:focus-visible,
#auth-step-1 a:focus-visible{
  outline:2px solid var(--brand-green,#18C979);
  outline-offset:2px;
  border-radius:12px;
}

/* ── Reduce Motion means reduce, not remove: the fade stays, the slide goes.
   Matches the standing rule used across the rest of the site. */
@media (prefers-reduced-motion: reduce){
  .auth-error{ transition:opacity .18s ease; transform:none; }
  .auth-submit:active{ transform:none; }
}