/* [PPS-ACCOUNTS] Sign-in / sign-up pages and "Finish creating your account".
   1. The Google button ("Sign in with Google" / "Sign up with Google"). Google's sign-in branding, light theme: white
      fill, 1px #747775 border, #1F1F1F text, 14/20 medium, the standard color "G" at 20px, 10px between the G and the
      text. 48px tall like the site's own buttons (and a 44px+ tap target).
   2. The forms, a little more polished (v2 look only, scoped to .acx): softer card, 48px fields with a clear border and
      a brass focus ring, a Show/Hide button in password fields (accounts.js), "Forgot password?" next to the label,
      tidy footer links with 44px tap targets. Field names, actions and checks are unchanged. */
.gsi-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 12px; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #747775; border-radius: 4px; color: #1F1F1F;
  font-family: "Google Sans", Roboto, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .25px;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.gsi-btn:hover { background: #F8F9FA; color: #1F1F1F; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.gsi-btn:active { background: #EEEEEE; }
.gsi-btn:focus-visible { outline: 2px solid #1F1F1F; outline-offset: 2px; }
.gsi-btn-g { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; }
.gsi-btn-g img { display: block; width: 20px; height: 20px; }
.gsi-btn-text { white-space: nowrap; }

.gsi-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 20px; color: var(--ink-mute, #5F636A);
  font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.gsi-or::before, .gsi-or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line, #E3DED2); }

.gsi-msg { margin-bottom: 18px; }

/* Finish creating your account */
.gsi-email[readonly] { background: var(--paper-2, #ECE8DE) !important; color: var(--ink-mute, #5F636A) !important; cursor: default; }
.gsi-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-mute, #5F636A); }
.gsi-finish .account-alt { line-height: 1.4; }
.gsi-finish .account-alt a { display: inline-flex; align-items: center; min-height: 44px; }

/* 2. the sign-in and sign-up forms (body.hv2 = the site's v2 look) */
body.hv2 .acx { padding: 56px 0 80px !important; }
body.hv2 .acx .account-card { border: 1px solid var(--line, #D9D3C6); border-radius: 12px; padding: 40px 36px 28px;
  box-shadow: 0 1px 2px rgba(31, 33, 36, .05), 0 14px 32px -16px rgba(31, 33, 36, .22); }
body.hv2 .acx .account-title { margin-bottom: 6px; }
body.hv2 .acx .account-sub { margin-bottom: 26px; color: var(--ink-3, #5F636A); }
body.hv2 .acx .form-row { position: relative; gap: 6px; margin-bottom: 18px; }
body.hv2 .acx .form-grid { column-gap: 14px; row-gap: 0; }
body.hv2 .acx .form-row input:not([type=checkbox]) {
  height: 48px; min-height: 48px; padding: 0 14px; font-size: 16px; line-height: 1.25;
  background: #FFFEFB; border: 1px solid var(--ink-4, #8A8E94); border-radius: 4px; color: var(--ink, #1F2124);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.hv2 .acx .form-row input:not([type=checkbox]):hover { border-color: var(--ink-3, #5F636A); }
body.hv2 .acx .form-row input:not([type=checkbox]):focus {
  outline: 2px solid transparent; outline-offset: 0; border-color: var(--ink, #1F2124);
  box-shadow: 0 0 0 3px rgba(176, 141, 62, .45);
}
body.hv2 .acx .form-row input[aria-invalid="true"] { border-color: #9A3412; }
body.hv2 .acx .form-row input::placeholder { color: var(--ink-4, #8A8E94); }
body.hv2 .acx .btn-block { min-height: 48px; border-radius: 4px; }
body.hv2 .acx .alert { border-radius: 6px; }
/* "Forgot password?" on the label's line, at the right */
body.hv2 .acx .acx-forgot { position: absolute; top: -12px; right: 0; height: 44px; display: flex; align-items: center;
  margin: 0 !important; text-align: right; }
body.hv2 .acx .acx-forgot a { margin: 0 !important; min-height: 44px; font-size: 13px !important; color: var(--ink-3, #5F636A) !important; }
body.hv2 .acx .acx-forgot a:hover { color: var(--ink, #1F2124) !important; }
/* Show / Hide in password fields */
body.hv2 .acx .acx-pw { position: relative; }
body.hv2 .acx .acx-pw input { width: 100%; padding-right: 76px !important; }
body.hv2 .acx .acx-eye { position: absolute; top: 2px; right: 2px; height: 44px; min-width: 64px; padding: 0 12px;
  border: 0; border-radius: 3px; background: transparent; color: var(--ink-2, #3A3D42); cursor: pointer;
  font: 600 13px/1 var(--font-body, Arial, sans-serif); letter-spacing: .04em; }
body.hv2 .acx .acx-eye:hover { background: var(--paper-2, #ECE8DE); }
body.hv2 .acx .acx-eye:focus-visible { outline: 2px solid var(--brass, #7F6320); outline-offset: -2px; }
/* footer links: one per line, 44px tall */
body.hv2 .acx .account-alt { margin-top: 22px; padding-top: 14px; font-size: 14px; line-height: 1.4; }
body.hv2 .acx .account-alt a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .3em; padding: 0 2px; }
@media (max-width: 480px) {
  body.hv2 .acx { padding: 24px 0 48px !important; }
  body.hv2 .acx .account-card { padding: 28px 20px 20px; border-radius: 10px; }
}