/* ==========================================================================
   Google Auth Module — 组件层样式
   仅使用 .ga-* 前缀与 --ga-* 变量，宿主项目可直接覆盖变量完成主题适配。
   视觉基准：Sign in with Google Branding Guidelines
     Light  fill #FFFFFF / stroke #747775 / ink #1F1F1F
     Dark   fill #131314 / stroke #8E918F / ink #E3E3E3
     Neutral fill #F2F2F2 / no stroke / ink #1F1F1F
     Font   Roboto Medium / Google Sans Medium 14px / 20px
     Logo   官方标准四色 G，固定 20px，置于白色背景，禁止改色或拉伸
   ========================================================================== */

.ga-root {
  --ga-font: Roboto, "Google Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ga-btn-height: 48px;
  --ga-btn-radius: 4px;
  --ga-btn-fill: #ffffff;
  --ga-btn-hover: #f7f8f8;
  --ga-btn-stroke: #747775;
  --ga-btn-ink: #1f1f1f;
  --ga-btn-icon-bg: #ffffff;
  --ga-btn-shadow: 0 1px 2px rgba(60, 64, 67, .08);
  --ga-btn-hover-shadow: 0 1px 3px rgba(60, 64, 67, .22), 0 1px 2px rgba(60, 64, 67, .10);
  --ga-focus: #0b57d0;
  --ga-error-ink: #8c1d18;
  --ga-error-fill: #fdf3f2;
  --ga-error-stroke: #f0cfcc;
  --ga-ease: cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  width: 100%;
  font-family: var(--ga-font);
  color: var(--ga-btn-ink);
  box-sizing: border-box;
}

.ga-root *,
.ga-root *::before,
.ga-root *::after { box-sizing: border-box; }

.ga-root__official {
  min-height: var(--ga-btn-height);
  display: flex;
  align-items: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */

.ga-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: var(--ga-btn-width, 320px);
  min-height: var(--ga-btn-height);
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid var(--ga-btn-stroke);
  border-radius: var(--ga-btn-radius);
  background-color: var(--ga-btn-fill);
  color: var(--ga-btn-ink);
  font-family: var(--ga-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .1px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--ga-btn-shadow);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 160ms var(--ga-ease),
    box-shadow 160ms var(--ga-ease),
    border-color 160ms var(--ga-ease),
    transform 160ms var(--ga-ease);
}

.ga-btn:hover:not(:disabled) {
  background-color: var(--ga-btn-hover);
  box-shadow: var(--ga-btn-hover-shadow);
}

.ga-btn:active:not(:disabled) { transform: scale(.99); }

.ga-btn:focus-visible {
  outline: 3px solid var(--ga-focus);
  outline-offset: 2px;
}

.ga-btn:disabled { cursor: progress; opacity: .78; }
.ga-btn[aria-disabled="true"]:not(.is-busy) { cursor: not-allowed; opacity: .6; }

/* logo 白底容器：品牌规范要求标准彩色 G 必须置于白色背景 */
.ga-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  background: var(--ga-btn-icon-bg);
}

.ga-btn__g { display: block; width: 20px; height: 20px; }
.ga-btn__label { flex: 0 1 auto; }

.ga-btn__spinner {
  display: none;
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .7;
  animation: ga-spin 700ms linear infinite;
}

.ga-btn.is-busy .ga-btn__spinner { display: block; }

@keyframes ga-spin { to { transform: rotate(360deg); } }

/* 主题：颜色令牌按品牌规范定义；蓝填充使用 #0B57D0 以满足 WCAG AA 4.5:1 */
.ga-btn--outline {
  --ga-btn-fill: #ffffff; --ga-btn-hover: #f7f8f8; --ga-btn-stroke: #747775; --ga-btn-ink: #1f1f1f;
}
.ga-btn--neutral {
  --ga-btn-fill: #f2f2f2; --ga-btn-hover: #e9e9e9; --ga-btn-stroke: transparent; --ga-btn-ink: #1f1f1f;
  box-shadow: none;
}
.ga-btn--filled_blue {
  --ga-btn-fill: #0b57d0; --ga-btn-hover: #0842a0; --ga-btn-stroke: transparent; --ga-btn-ink: #ffffff;
}
.ga-btn--filled_black {
  --ga-btn-fill: #131314; --ga-btn-hover: #262627; --ga-btn-stroke: #8e918f; --ga-btn-ink: #e3e3e3;
}

/* 尺寸：medium 仍保持 44px 最小触摸目标（WCAG 2.5.8） */
.ga-btn--large { --ga-btn-height: 48px; }
.ga-btn--medium { --ga-btn-height: 44px; }

/* 形状 */
.ga-btn--pill { --ga-btn-radius: 999px; }
.ga-btn--circle { --ga-btn-radius: 999px; }
.ga-btn--square { --ga-btn-radius: 4px; }

/* 纯图标按钮：品牌规范允许仅使用 G，但必须保留可读的 aria-label */
.ga-btn--icon {
  width: var(--ga-btn-height);
  max-width: none;
  padding: 0;
  gap: 0;
}
.ga-btn--icon .ga-btn__spinner { right: 50%; transform: translateX(50%); }

.ga-btn--center { justify-content: center; }

/* --------------------------------------------------------------------------
   错误提示与重试
   -------------------------------------------------------------------------- */

.ga-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--ga-error-stroke);
  border-radius: 6px;
  background: var(--ga-error-fill);
  color: var(--ga-error-ink);
  font-family: var(--ga-font);
  font-size: 13px;
  line-height: 20px;
}

.ga-notice__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #b3261e;
}

.ga-notice__text { flex: 1 1 auto; }

.ga-notice__retry {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms var(--ga-ease);
}

.ga-notice__retry:hover { background: rgba(140, 29, 24, .08); }
.ga-notice__retry:focus-visible { outline: 3px solid var(--ga-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   无障碍适配
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ga-btn { transition: none; }
  .ga-btn:active:not(:disabled) { transform: none; }
  .ga-btn__spinner { animation-duration: 1.6s; }
}

@media (forced-colors: active) {
  .ga-btn { border: 1px solid ButtonBorder; box-shadow: none; }
  .ga-btn:focus-visible { outline: 3px solid Highlight; }
  .ga-notice { border: 1px solid ButtonBorder; }
}