/* ═══════════════════════════════════════════════════════════
   BRAVOS: CONTINUE WITH GOOGLE
   Loaded by every page that shows the button. responsive.css still lands last.

   The "G" keeps Google's four colours. That is Google's branding rule for
   sign in buttons, and the one exception to the four-accent palette; the
   sign up page's old grey "G" broke it.
   ═══════════════════════════════════════════════════════════ */

.g-form{ margin:0; }
.g-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:50px; padding:12px 20px;
  border:1.5px solid var(--gray-300); border-radius:12px;
  background:#ffffff; color:#1f1f1f;
  font-family:var(--font); font-size:.95rem; font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.g-btn:hover{ border-color:var(--gray-400); background:var(--gray-50); }
.g-btn svg{ width:20px; height:20px; flex-shrink:0; }
.g-hint{ margin-top:10px; font-size:.8rem; color:var(--gray-500); text-align:center; line-height:1.5; }

.g-or{
  display:flex; align-items:center; gap:12px;
  margin:22px 0; font-size:.78rem; color:var(--gray-500);
}
.g-or::before, .g-or::after{ content:''; flex:1; height:1px; background:var(--gray-200); }

/* "Signed in with Google as ..." on a sign up form that Google started. */
.g-as{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  margin-bottom:20px; padding:12px 14px; border-radius:12px;
  background:var(--gray-50); box-shadow:0 0 0 1px var(--gray-200);
  font-size:.85rem; color:var(--gray-700);
}
.g-as svg{ width:18px; height:18px; flex-shrink:0; }
.g-as span{ flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
.g-as a{ font-weight:700; color:var(--gray-900); }

/* The email Google verified: shown, not editable. */
.g-locked{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:12px 14px; border-radius:11px; background:var(--gray-100);
  font-size:.92rem; color:var(--gray-800); overflow-wrap:anywhere;
}
.g-ok{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:100px;
  background:var(--success-tint); color:var(--success);
  font-size:.75rem; font-weight:700; white-space:nowrap;
}
.g-ok svg{ width:12px; height:12px; }

/* Disconnect in Account settings: secondary, so outlined rather than black. */
.ac-btn.ac-btn-ghost, .ac-btn.ac-btn-ghost:hover{
  background:#ffffff; color:var(--gray-900); box-shadow:0 0 0 1.5px var(--gray-300);
}
.ac-btn.ac-btn-ghost:hover{ box-shadow:0 0 0 1.5px var(--gray-500); }

/* The seeker finish step. */
.g-finish{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  display:flex; align-items:center; justify-content:center;
  padding:48px 16px; background:var(--stone-lt);
}
.g-card{
  width:100%; max-width:480px; padding:36px 40px; border-radius:16px;
  background:#ffffff; box-shadow:0 0 0 1px var(--gray-200);
}
.g-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.g-avatar{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--c-indigo); color:#ffffff; font-size:1.2rem; font-weight:700;
}
.g-card-head h1{ font-size:1.45rem; letter-spacing:-.02em; margin:0; }
.g-card-head p{ font-size:.88rem; color:var(--gray-500); margin:3px 0 0; }
.g-names{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 12px; }
.g-foot a{ font-weight:700; color:var(--gray-900); }
.g-terms{
  display:flex; gap:10px; align-items:flex-start;
  margin:4px 0 22px; font-size:.85rem; color:var(--gray-700); line-height:1.5;
}
.g-terms input{ width:16px; height:16px; margin-top:2px; accent-color:var(--navy); flex-shrink:0; }
.g-terms a{ font-weight:700; }
.g-foot{ margin-top:16px; font-size:.8rem; color:var(--gray-500); text-align:center; line-height:1.6; }

@media (max-width:480px){
  .g-card{ padding:28px 20px; }
  .g-card-head h1{ font-size:1.25rem; }
}