/*
  Dependency chain: generated AuthGate markup -> scoped auth overlay styles -> existing
  Friends Circle gate. Palette mirrors the root website: blue/indigo trust base,
  document-level mobile scroll, indigo bordered form surfaces, dark indigo
  auth inputs, and bright golden-orange action.
*/
:root {
  --hf-auth-input-bg: var(--hf-ui-input-bg, #243f78);
  --hf-auth-input-bg-focus: var(--hf-ui-input-bg-focus, #2a4f8e);
  --hf-auth-input-border: var(--hf-ui-input-border, #9ed7ff);
  --hf-auth-input-text: #ffffff;
}

:root[data-hf-auth-entry-redesign] {
  --hf-auth-page-bg: var(--hf-ui-page-bg, #0b1428);
  --hf-auth-panel-bg: var(--hf-ui-panel-bg, #244a82);
  --hf-auth-ink: #243833;
  --hf-auth-muted: #59645f;
  --hf-auth-on-dark: #f8fbff;
  --hf-auth-muted-on-dark: rgba(248, 251, 255, .78);
  --hf-auth-line: #e4d8ce;
  --hf-auth-teal: #166b73;
  --hf-auth-action: #ffa000;
  --hf-auth-action-strong: #ffc247;
  --hf-auth-action-border: #ffa000;
  --hf-auth-gold: var(--hf-ui-gold, #d99a37);
  --hf-auth-indigo: #2e286f;
  --hf-auth-focus: #f2b544;
  --hf-auth-button-border: rgba(158, 215, 255, .64);
  --hf-auth-shadow: var(--hf-ui-panel-shadow, 0 18px 55px rgba(8, 18, 46, .24));
}

:root[data-hf-auth-entry-redesign],
:root[data-hf-auth-entry-redesign] body,
:root[data-hf-auth-entry-redesign] #app {
  min-height: 100%;
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  background-color: var(--hf-auth-page-bg);
}

:root[data-hf-auth-entry-redesign] body {
  background: var(--hf-auth-page-bg);
}

:root[data-hf-auth-entry-redesign] .mobile-app-shell,
:root[data-hf-auth-entry-redesign] .phone-frame-shell {
  min-height: 100dvh;
  height: auto !important;
  overflow: visible !important;
  background-color: var(--hf-auth-page-bg);
  background-image: none !important;
}

:root[data-hf-auth-entry-redesign] .auth-screen {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  height: auto !important;
  align-items: start;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top) + .85rem) max(1rem, env(safe-area-inset-right) + 1rem) max(2rem, env(safe-area-inset-bottom) + 1.5rem) max(1rem, env(safe-area-inset-left) + 1rem);
  overflow: visible !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background-color: var(--hf-auth-page-bg);
  background-image: none !important;
  color: var(--hf-auth-on-dark);
  font-family: Arial, Helvetica, sans-serif;
}

:root[data-hf-auth-entry-redesign] .auth-screen::before,
:root[data-hf-auth-entry-redesign] .auth-screen::after {
  display: none !important;
  content: none !important;
}

:root[data-hf-auth-entry-redesign] .hf-auth-pre-scene-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.95rem;
  margin: 0;
  padding: .38rem .82rem;
  border: 1px solid rgba(157, 217, 136, .58);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(33, 111, 68, .9), rgba(18, 82, 51, .96));
  color: #ecffe7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 .45rem 1rem rgba(4, 24, 16, .18);
}

:root[data-hf-auth-entry-redesign] .hf-auth-brand {
  display: grid;
  justify-items: center;
  gap: .42rem;
  width: 100%;
  margin: 0;
}

:root[data-hf-auth-entry-redesign] .hf-auth-brand__image {
  display: block;
  width: min(12.75rem, 58vw);
  height: auto;
  aspect-ratio: 560 / 403;
  object-fit: cover;
  border: 2px solid rgba(255, 215, 160, .55);
  border-radius: 8px;
  background: rgba(5, 12, 26, .42);
  box-shadow: 0 14px 34px rgba(7, 18, 43, .2);
}

:root[data-hf-auth-entry-redesign] .hf-auth-brand__slogan {
  margin: 0;
  color: #ffd7a0;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

:root[data-hf-auth-entry-redesign] .auth-step-brand__stage {
  display: none;
}

:root[data-hf-auth-entry-redesign] .auth-screen__scene {
  display: none !important;
  width: min(13.5rem, 54vw);
  max-height: 7.6rem;
  object-fit: cover;
  border: 2px solid rgba(255, 215, 160, .55);
  border-radius: 8px;
  box-shadow: var(--hf-auth-shadow);
  filter: saturate(.98) contrast(.98);
}

:root[data-hf-auth-entry-redesign] .auth-panel {
  box-sizing: border-box;
  width: min(100%, 30rem);
  max-height: none !important;
  gap: .72rem;
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 1.35rem);
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background-color: var(--hf-auth-panel-bg);
  background-image: none !important;
  box-shadow: var(--hf-auth-shadow);
  color: var(--hf-auth-on-dark);
}

:root[data-hf-auth-entry-redesign] .auth-panel__scroll {
  display: grid;
  gap: .72rem;
  min-height: 0;
  padding-right: .15rem;
  max-height: none !important;
  overflow: visible !important;
}

:root[data-hf-auth-entry-redesign] .auth-panel__copy,
:root[data-hf-auth-entry-redesign] .hf-auth-intro,
:root[data-hf-auth-entry-redesign] .hf-auth-roadmap,
:root[data-hf-auth-entry-redesign] .hf-auth-trust-note,
:root[data-hf-auth-entry-redesign] .auth-sms-disclosure,
:root[data-hf-auth-entry-redesign] .auth-policy-consent,
:root[data-hf-auth-entry-redesign] .auth-phone-summary {
  box-sizing: border-box;
  width: 100%;
  max-width: 26.5rem;
  justify-self: center;
  border: 1px solid var(--hf-auth-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: var(--hf-auth-on-dark);
}

:root[data-hf-auth-entry-redesign] .auth-panel__copy,
:root[data-hf-auth-entry-redesign] .hf-auth-intro {
  padding: .95rem;
  box-shadow: none;
}

:root[data-hf-auth-entry-redesign] .auth-screen[data-hf-auth-mode="phone"] .auth-panel__copy {
  display: grid;
  justify-items: center;
  gap: .72rem;
  padding: .95rem .9rem;
  border-color: rgba(157, 217, 136, .34);
  background: linear-gradient(180deg, rgba(35, 95, 74, .28), rgba(255, 255, 255, .08));
  text-align: center;
}

:root[data-hf-auth-entry-redesign] .auth-panel__copy h1,
:root[data-hf-auth-entry-redesign] .hf-auth-intro h1,
:root[data-hf-auth-entry-redesign] .auth-panel h1 {
  color: var(--hf-auth-on-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.12rem, 4.2vw, 1.42rem);
  line-height: 1.1;
  letter-spacing: 0;
}

:root[data-hf-auth-entry-redesign] .auth-panel__copy p,
:root[data-hf-auth-entry-redesign] .hf-auth-intro p,
:root[data-hf-auth-entry-redesign] .hf-auth-trust-note,
:root[data-hf-auth-entry-redesign] .auth-sms-disclosure {
  color: var(--hf-auth-muted-on-dark);
  font-size: clamp(.84rem, 3vw, .92rem);
  line-height: 1.4;
}

:root[data-hf-auth-entry-redesign] .hf-auth-circle-copy {
  max-width: 23.5rem;
  margin: 0;
  text-align: center;
}

:root[data-hf-auth-entry-redesign] .hf-auth-support-list {
  display: grid;
  gap: .42rem;
  margin: .78rem 0 0;
  padding: 0;
  list-style: none;
}

:root[data-hf-auth-entry-redesign] .hf-auth-support-list li {
  display: grid;
  grid-template-columns: .62rem 1fr;
  gap: .48rem;
  align-items: start;
  color: var(--hf-auth-muted-on-dark);
  font-size: clamp(.8rem, 3vw, .9rem);
  line-height: 1.28;
  text-align: left;
}

:root[data-hf-auth-entry-redesign] .hf-auth-support-list li::before {
  content: "";
  width: .44rem;
  height: .44rem;
  margin-top: .42rem;
  border-radius: 999px;
  background: var(--hf-auth-gold);
}

:root[data-hf-auth-entry-redesign] .auth-panel__state-label,
:root[data-hf-auth-entry-redesign] .hf-auth-kicker {
  min-height: 1.9rem;
  width: fit-content;
  margin: 0;
  padding: .34rem .62rem;
  border: 1px solid rgba(217, 154, 55, .45);
  border-radius: 999px;
  background: rgba(217, 154, 55, .2);
  color: #ffd7a0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

:root[data-hf-auth-entry-redesign] .hf-auth-kicker--green {
  justify-self: center;
  border-color: rgba(157, 217, 136, .58);
  background: linear-gradient(180deg, rgba(33, 111, 68, .9), rgba(18, 82, 51, .96));
  color: #ecffe7;
}

:root[data-hf-auth-entry-redesign] .auth-info-box {
  display: grid;
  gap: .7rem;
  width: 100%;
  max-width: 26.5rem;
  justify-self: center;
  padding: .95rem;
  border: 1px solid rgba(157, 217, 136, .32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(35, 95, 74, .24), rgba(255, 255, 255, .08));
  color: var(--hf-auth-muted-on-dark);
  text-align: center;
}

:root[data-hf-auth-entry-redesign] .auth-info-box p,
:root[data-hf-auth-entry-redesign] .auth-support-note {
  margin: 0;
  color: var(--hf-auth-muted-on-dark);
  font-size: .96rem;
  line-height: 1.45;
}

:root[data-hf-auth-entry-redesign] .auth-support-note {
  max-width: 26.5rem;
  justify-self: center;
  text-align: center;
}

:root[data-hf-auth-entry-redesign] .auth-screen[data-hf-auth-mode="phone"] .auth-panel__state-label {
  display: none !important;
}

:root[data-hf-auth-entry-redesign] .hf-auth-intro .hf-auth-kicker {
  display: none !important;
}

:root[data-hf-auth-entry-redesign] [data-hf-call-pin-retired="1"] {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top) + 1rem) 1rem max(1rem, env(safe-area-inset-bottom) + 1rem);
  background: linear-gradient(135deg, #253f82 0%, #1e4b76 48%, #3a286f 100%);
}

:root[data-hf-auth-entry-redesign] .hf-auth-retired-card {
  width: min(100%, 32rem);
  display: grid;
  gap: .8rem;
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(37, 63, 130, .96), rgba(46, 40, 111, .97));
  color: var(--hf-auth-on-dark);
  box-shadow: var(--hf-auth-shadow);
}

:root[data-hf-auth-entry-redesign] .hf-auth-retired-card h1,
:root[data-hf-auth-entry-redesign] .hf-auth-retired-card p {
  margin: 0;
}

@media (max-width: 460px) {
  :root[data-hf-auth-entry-redesign] body {
    background: #244a82;
  }

  :root[data-hf-auth-entry-redesign] .auth-screen {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    height: 100dvh !important;
    gap: .62rem;
    margin-inline: 0;
    padding: max(.72rem, env(safe-area-inset-top) + .72rem) max(.72rem, env(safe-area-inset-right) + .72rem) max(5.5rem, env(safe-area-inset-bottom) + 4rem) max(.72rem, env(safe-area-inset-left) + .72rem);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background-color: #244a82;
  }

  :root[data-hf-auth-entry-redesign] .auth-screen::before,
  :root[data-hf-auth-entry-redesign] .auth-screen::after {
    display: none !important;
    content: none !important;
  }

  :root[data-hf-auth-entry-redesign] .auth-panel {
    width: 100%;
    min-height: 0;
    max-height: none !important;
    padding: .84rem .72rem 0;
    box-sizing: border-box;
    overflow: visible !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  :root[data-hf-auth-entry-redesign] .auth-panel__copy,
  :root[data-hf-auth-entry-redesign] .hf-auth-intro,
  :root[data-hf-auth-entry-redesign] .hf-auth-roadmap,
  :root[data-hf-auth-entry-redesign] .hf-auth-trust-note,
  :root[data-hf-auth-entry-redesign] .auth-sms-disclosure,
  :root[data-hf-auth-entry-redesign] .auth-policy-consent,
  :root[data-hf-auth-entry-redesign] .auth-phone-summary,
  :root[data-hf-auth-entry-redesign] .auth-form { max-width: none; }

  :root[data-hf-auth-entry-redesign] .auth-panel__scroll {
    overflow: visible !important;
  }

  :root[data-hf-auth-entry-redesign] .auth-screen[data-hf-auth-mode="phone"] .auth-submit {
    margin-bottom: .75rem;
  }

  :root[data-hf-auth-entry-redesign] .auth-screen__scene {
    width: min(13.5rem, 64vw);
    max-height: 7.6rem;
  }

}