/*
 * public/assets/ymh-signin.css
 *
 * "Continue with Google" button styles (spec 0116). Google brand
 * compliant baseline (white bg, gray hairline border, Google G icon)
 * with light YMH shell fitting (12px radius matching site buttons,
 * 14px medium label, 40px hit target for touch).
 *
 * All rules are namespaced under `.ymh-signin` so a paywall or rail
 * that already ships its own button styling is not affected. Modes are
 * additive tweaks:
 *
 *   [data-mode="paywall"]  wider, more prominent, sits above plan cards
 *   [data-mode="save"]     inline chip variant used inside chat cards
 *   [data-mode="nudge"]    compact rail widget
 *
 * The unavailable state renders a muted chip (or hides entirely per
 * data-fallback) so nobody sees a broken half-wired flow.
 */

.ymh-signin {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.ymh-signin--hidden {
  display: none !important;
}

.ymh-signin-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #dadce0;
  background: #ffffff;
  color: #3c4043;
  cursor: pointer;
  font: 500 14px/1.2 "Roboto", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.15px;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06);
}

.ymh-signin-btn:hover {
  background: #f8f9fb;
  border-color: #cbd0d6;
  box-shadow: 0 2px 6px rgba(60, 64, 67, .10);
}

.ymh-signin-btn:active {
  background: #f1f3f4;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

.ymh-signin-btn:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.ymh-signin-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.ymh-signin-btn-label {
  display: inline-block;
  color: #3c4043;
  font-weight: 500;
}

/* Paywall mount: sits above plan cards, wider prominence, comfortable
   spacing so the eye lands on it before the plan grid. */
.ymh-signin[data-mode="paywall"] {
  max-width: 340px;
  margin: 0 auto 20px;
}
.ymh-signin[data-mode="paywall"] .ymh-signin-btn {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
}

/* Save mount: inline chat card CTA. Constrains width so it does not
   dominate the message stream. */
.ymh-signin[data-mode="save"] {
  max-width: 300px;
  margin: 12px 0;
}

/* Nudge mount: rail widget. Compact, quieter, no shadow. */
.ymh-signin[data-mode="nudge"] .ymh-signin-btn {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  box-shadow: none;
}
.ymh-signin[data-mode="nudge"] {
  margin: 8px 0;
}

/* Unavailable state (env not configured). Muted chip so it does not
   read like a broken affordance. Only rendered when the mount opts in
   with data-fallback="chip"; default is a full hide. */
.ymh-signin--unavailable .ymh-signin-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(60, 64, 67, .06);
  color: rgba(60, 64, 67, .55);
  font: 500 12px/1.2 system-ui, -apple-system, sans-serif;
}