/* ═══════════════════════════════════════
   WOBAZI — Sign-in buttons (Google, LINE, email), everywhere they appear:
   /signin, the menu drawer, the Oracle gate, the People guest card, the "Keep this chart"
   card, the invite and profile pages. Loaded after every other stylesheet so it wins;
   the header's plain "Sign in" pill (.nav-signin) is not a provider button and is untouched.

   Layout: one stacked column, max 360px, centred, 44px tall, 12px apart, one radius.
   Full width only below 480px. Labels never wrap (Thai is the longest).

   Google — "Sign in with Google" branding, light theme: #FFFFFF fill, 1px #747775 stroke,
   #1F1F1F text, Roboto Medium 14/20, standard multicolour G, 12px side padding, 10px between
   logo and text, label "Continue with Google". Rectangular shape (4px corners).
   LINE — LINE Login button guidelines: #06C755 base, white official LINE logo, a thin
   separator between logo and text, white bold text "Log in with LINE", pressed/hover states
   are black overlays (10% hover, 30% pressed) — the green itself never changes.
   Email — an outlined button of the same size and radius.
   Bump ?v= where this is linked (views/partials/head.ejs, app/index.html) on every change.
═══════════════════════════════════════ */

:root { --auth-radius: 4px; --auth-height: 44px; --auth-gap: 12px; --auth-max: 360px; }

html .google-login-btn:not(.nav-signin) {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: var(--auth-max); min-height: var(--auth-height); height: var(--auth-height);
  margin: 0 auto; padding: 0 12px;
  border-radius: var(--auth-radius);
  font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden;
  text-decoration: none; cursor: pointer;
  transition: box-shadow 0.15s;
}
html .google-login-btn:not(.nav-signin) > span { overflow: hidden; text-overflow: ellipsis; }
html .google-login-btn:not(.nav-signin) + .google-login-btn:not(.nav-signin) { margin-top: var(--auth-gap); }
html .google-login-btn:not(.nav-signin):focus-visible { outline: 2px solid var(--gold, #f0c040); outline-offset: 2px; }

/* Google (the button without a LINE/email modifier). */
html .google-login-btn:not(.nav-signin):not(.line-login-btn):not(.email-login-btn) {
  background: #FFFFFF; color: #1F1F1F;
  border: 1px solid #747775; box-shadow: none;
  font-family: 'Roboto', 'Noto Sans Thai', 'Noto Sans SC', Arial, sans-serif; font-weight: 500;
}
html .google-login-btn:not(.nav-signin):not(.line-login-btn):not(.email-login-btn):hover { background: #FFFFFF; box-shadow: inset 0 0 0 999px rgba(48, 48, 48, 0.08); }
html .google-login-btn:not(.nav-signin):not(.line-login-btn):not(.email-login-btn):active { box-shadow: inset 0 0 0 999px rgba(48, 48, 48, 0.12); }
html .google-login-btn:not(.nav-signin) .google-logo { width: 18px; height: 18px; }

/* LINE */
html .google-login-btn.line-login-btn {
  background: #06C755; color: #FFFFFF; border: 0; box-shadow: none;
  font-weight: 700;
}
html .google-login-btn.line-login-btn:hover { background: #06C755; box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1); }
html .google-login-btn.line-login-btn:active { background: #06C755; box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.3); }
html .google-login-btn.line-login-btn .line-logo {
  box-sizing: content-box; width: 22px; height: 22px;
  padding-right: 10px; border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Email */
html .google-login-btn.email-login-btn {
  background: transparent; color: var(--text, #f0f0ff);
  border: 1px solid var(--w2, rgba(240, 240, 255, 0.2)); box-shadow: none;
  font-weight: 600;
}
html .google-login-btn.email-login-btn:hover { background: var(--w06, rgba(240, 240, 255, 0.06)); box-shadow: none; }

/* Containers that laid the buttons out in a row now stack them. */
html .portal-keep .portal-actions { flex-direction: column; align-items: stretch; gap: var(--auth-gap); }
html .portal-keep .portal-actions .google-login-btn + .google-login-btn { margin-top: 0; }
html .portal-keep .portal-actions .portal-keep-dismiss { align-self: center; }

@media (max-width: 479px) {
  html .google-login-btn:not(.nav-signin) { max-width: none; }
}