/* Handy Helper Auth Brand Visual R6.2
   Exact top-left brand copy for the auth drawer. */

.hh-auth-brand-r6-panel {
  --hh-r6-navy: #082d49;
  --hh-r6-gold: #c4932f;
  --hh-r6-cream: #fff8ec;
  --hh-r6-ink: #12344d;
  --hh-r6-muted: #657b8d;
  background:
    radial-gradient(circle at 100% 0, rgba(221,180,93,.13), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffdfa 46%, #f9fbfc 100%) !important;
  border-left: 1px solid rgba(196,147,47,.18) !important;
  color: var(--hh-r6-ink) !important;
  box-shadow: -24px 0 78px rgba(8,45,73,.18) !important;
}

.hh-auth-brand-r6-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hh-r6-navy) 0 48%, var(--hh-r6-gold) 48% 100%);
  pointer-events: none;
}

.hh-auth-brand-r6-header {
  position: relative;
  z-index: 2;
  margin: -4px -2px 20px;
  padding: 22px 54px 14px 0;
}

.hh-auth-brand-r6-live {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  user-select: none;
}

.hh-auth-brand-r6-live > * {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  transform-origin: left center;
}

.hh-auth-brand-r6-clone,
.hh-auth-brand-r6-clone * {
  pointer-events: none !important;
}

.hh-auth-brand-r6-clone img,
.hh-auth-brand-r6-clone svg,
.hh-auth-brand-r6-clone picture {
  max-height: 44px;
  width: auto;
}

.hh-auth-brand-r6-rule {
  width: 100%;
  height: 1px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(196,147,47,.46), rgba(8,45,73,.12), transparent);
}

.hh-auth-brand-r6-original { display: none !important; }

.hh-auth-brand-r6-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hh-auth-brand-r6-fallback-mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--hh-r6-navy); }
.hh-auth-brand-r6-fallback-mark svg { width: 40px; height: 40px; }
.hh-auth-brand-r6-fallback-copy strong { display: block; color: var(--hh-r6-navy); font-size: 21px; line-height: 1.05; letter-spacing: -.035em; font-style: normal; }
.hh-auth-brand-r6-fallback-copy strong em { color: var(--hh-r6-gold); font-style: normal; }
.hh-auth-brand-r6-fallback-copy small { display: block; margin-top: 5px; color: var(--hh-r6-muted); font-size: 9px; }

.hh-auth-brand-r6-panel h1,
.hh-auth-brand-r6-panel h2,
.hh-auth-brand-r6-panel h3 { color: var(--hh-r6-navy) !important; }
.hh-auth-brand-r6-panel p,
.hh-auth-brand-r6-panel small { color: var(--hh-r6-muted); }

.hh-auth-brand-r6-panel .hh-auth-brand-r6-tabs {
  background: #f4f2ed !important;
  border: 1px solid rgba(196,147,47,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.hh-auth-brand-r6-panel .hh-auth-brand-r6-tab { color: var(--hh-r6-navy) !important; }
.hh-auth-brand-r6-panel input,
.hh-auth-brand-r6-panel select,
.hh-auth-brand-r6-panel textarea { border-color: #d8e1e7 !important; color: var(--hh-r6-ink) !important; background: #fff !important; }
.hh-auth-brand-r6-panel input:focus,
.hh-auth-brand-r6-panel select:focus,
.hh-auth-brand-r6-panel textarea:focus { border-color: var(--hh-r6-gold) !important; outline: 3px solid rgba(196,147,47,.13) !important; }
.hh-auth-brand-r6-panel .hh-auth-r2-provider,
.hh-auth-brand-r6-panel .hh-auth-r5-provider,
.hh-auth-brand-r6-panel [data-hh-provider] { border-radius: 14px !important; box-shadow: 0 5px 18px rgba(8,45,73,.035); }
.hh-auth-brand-r6-panel .hh-auth-brand-r6-email-action { border-color: rgba(8,45,73,.20) !important; background: linear-gradient(180deg, #f7fbfe, #eef6fb) !important; color: var(--hh-r6-navy) !important; font-weight: 850 !important; }
.hh-auth-brand-r6-panel .hh-auth-brand-r6-close { z-index: 8 !important; border-color: rgba(8,45,73,.12) !important; background: rgba(255,255,255,.94) !important; color: var(--hh-r6-navy) !important; box-shadow: 0 5px 16px rgba(8,45,73,.06) !important; }

@media (max-width: 700px) {
  .hh-auth-brand-r6-panel { border-left: 0 !important; border-top: 1px solid rgba(196,147,47,.20) !important; box-shadow: 0 -20px 70px rgba(8,45,73,.17) !important; }
  .hh-auth-brand-r6-header { margin-bottom: 14px; padding-top: 18px; padding-bottom: 12px; }
  .hh-auth-brand-r6-live > * { transform: scale(.92); transform-origin: left center; }
  .hh-auth-brand-r6-clone img,
  .hh-auth-brand-r6-clone svg,
  .hh-auth-brand-r6-clone picture { max-height: 40px; }
}

/* -------------------------------------------------------------------------
   R6.8 geometry correction

   IMPORTANT: geometry is applied ONLY to the real auth shell created by
   auth-modern-r2.js:
       #hhAuthR2 > .hh-auth-r2-dialog

   The full-screen #hhAuthR2 overlay remains only the backdrop.  We do not
   scale/zoom the guessed inner panel anymore, so there is no old white frame
   left behind and no stretched content.
   ------------------------------------------------------------------------- */

/* Purge any geometry a prior visual pass may have left on the inner target. */
.hh-auth-brand-r6-panel {
  zoom: 1 !important;
  transform: none !important;
}

/* Desktop: shrink the ACTUAL drawer/shell as one complete object by 25%. */
@media (min-width: 821px) {
  #hhAuthR2.hh-auth-brand-r68-overlay {
    /* Keep the overlay as backdrop only and anchor the real shell top-right. */
    align-items: start !important;
    justify-items: end !important;
    place-items: start end !important;
  }

  #hhAuthR2 > .hh-auth-r2-dialog.hh-auth-brand-r68-shell {
    transform: scale(.75) !important;
    transform-origin: top right !important;
    /* The shell itself contains its background/border/shadow, therefore all of
       them reduce with the contents and no second/empty frame remains. */
  }
}

/* Mobile/tablet: deterministic branded bottom sheet.
   This uses the REAL auth shell and the REAL R2 card; no scaling or zoom. */
@media (max-width: 820px) {
  #hhAuthR2.hh-auth-brand-r68-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(8, 28, 30, .52) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #hhAuthR2 > .hh-auth-r2-dialog.hh-auth-brand-r68-shell {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    zoom: 1 !important;
    background:
      radial-gradient(circle at 100% 0, rgba(221,180,93,.11), transparent 30%),
      linear-gradient(180deg, #ffffff 0%, #fffdfa 48%, #f9fbfc 100%) !important;
    box-shadow: 0 -20px 70px rgba(8,45,73,.22) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* The legacy R2 left/hero pane is a desktop concept. On mobile the exact
     homepage brand clone in the card becomes the header instead. */
  #hhAuthR2 > .hh-auth-r2-dialog > .hh-auth-r2-brand {
    display: none !important;
  }

  #hhAuthR2 > .hh-auth-r2-dialog > .hh-auth-r2-main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    align-items: stretch !important;
  }

  #hhAuthR2 .hh-auth-r2-card.hh-auth-brand-r6-panel {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    zoom: 1 !important;
    box-sizing: border-box !important;
  }

  #hhAuthR2 .hh-auth-r2-card.hh-auth-brand-r6-panel::before {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 4px !important;
  }

  #hhAuthR2 .hh-auth-brand-r6-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 16px !important;
    padding: 2px 48px 13px 0 !important;
  }

  #hhAuthR2 .hh-auth-brand-r6-live {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #hhAuthR2 .hh-auth-brand-r6-live > * {
    max-width: calc(100vw - 96px) !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #hhAuthR2 .hh-auth-brand-r6-clone img,
  #hhAuthR2 .hh-auth-brand-r6-clone svg,
  #hhAuthR2 .hh-auth-brand-r6-clone picture {
    max-height: 42px !important;
    width: auto !important;
  }

  #hhAuthR2 .hh-auth-brand-r6-rule {
    margin-top: 12px !important;
  }

  #hhAuthR2 .hh-auth-r2-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 20 !important;
    width: 38px !important;
    height: 38px !important;
  }

  #hhAuthR2 .hh-auth-r2-head {
    margin-bottom: 18px !important;
  }

  #hhAuthR2 .hh-auth-r2-head h2 {
    font-size: clamp(27px, 7.2vw, 31px) !important;
    line-height: 1.08 !important;
  }

  #hhAuthR2 .hh-auth-r2-badge {
    display: none !important;
  }

  #hhAuthR2 .hh-auth-r2-tabs {
    margin-bottom: 15px !important;
  }

  #hhAuthR2 .hh-auth-r2-provider,
  #hhAuthR2 .hh-auth-r2-email-toggle,
  #hhAuthR2 .hh-auth-r2-action {
    min-height: 48px !important;
  }

  #hhAuthR2 .hh-auth-r2-form {
    gap: 11px !important;
    margin-top: 12px !important;
  }

  #hhAuthR2 .hh-auth-r2-field input,
  #hhAuthR2 .hh-auth-r2-field select {
    min-height: 48px !important;
  }

  #hhAuthR2 .hh-auth-r2-foot {
    margin-top: 14px !important;
  }

  #hhAuthR2 .hh-auth-r2-note {
    margin-top: 12px !important;
  }
}

@media (max-width: 430px) {
  #hhAuthR2 .hh-auth-r2-card.hh-auth-brand-r6-panel {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* -------------------------------------------------------------------------
   R6.10 mobile size adjustment

   Desktop is intentionally unchanged from R6.9/R6.8/R6.7.

   Mobile requirements:
   - shrink the ACTUAL auth shell to 80% as one complete object;
   - keep the real background/border/shadow with the shell (no ghost frame);
   - when email sign-in is opened, keep email + password + submit visible
     together without requiring user scrolling on normal phone viewports;
   - scrolling remains fallback only for exceptionally short viewports.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  #hhAuthR2.hh-auth-brand-r68-overlay {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Scale the REAL shell, never an inner content panel. The overlay is only
     the dimmed backdrop, so shrinking this element cannot leave a white frame. */
  #hhAuthR2 > .hh-auth-r2-dialog.hh-auth-brand-r68-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    /* 125dvh logical cap × .80 visual scale = about one visual viewport. */
    max-height: 125vh !important;
    max-height: 125dvh !important;
    margin: 0 !important;
    transform: scale(.80) !important;
    transform-origin: bottom center !important;
    zoom: 1 !important;
    border-radius: 26px 26px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* The card must remain natural-size inside the shell. Its parent shell is
     the only element being scaled, preventing double-scaling or stretching. */
  #hhAuthR2 .hh-auth-r2-card.hh-auth-brand-r6-panel {
    transform: none !important;
    zoom: 1 !important;
  }

  /* Once email login is chosen, mobile becomes a focused credential screen.
     Removing the social chooser and low-priority explanatory copy is what lets
     the fields and submit control all stay visible, even when the visual
     viewport is reduced by the software keyboard. */
  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-providers,
  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-divider,
  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-foot,
  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-note {
    display: none !important;
  }

  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-brand-r6-header {
    margin-bottom: 11px !important;
    padding-bottom: 10px !important;
  }

  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-head {
    margin-bottom: 13px !important;
  }

  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-tabs {
    margin-bottom: 10px !important;
  }

  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-form {
    margin-top: 8px !important;
    gap: 9px !important;
  }

  /* Keep the submit immediately following the credential fields. */
  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-action {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 1px !important;
  }
}

/* Very short visual viewports (typically while the keyboard is open): keep
   secondary copy out of the credential path. The action remains in normal
   document flow directly after the fields; no floating/overlay button. */
@media (max-width: 820px) and (max-height: 560px) {
  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-head p {
    display: none !important;
  }

  #hhAuthR2.hh-auth-brand-r69-email-open .hh-auth-r2-head h2 {
    margin-bottom: 0 !important;
  }
}