/*
  Dependency chain: hf-design-system.css -> Friends Circle route marker ->
  shared Friends Circle component primitives. Page files own route-specific
  placement only; this file owns shells, panels, brand media, and status pills.
*/
:root[data-hf-friends-circle-entry] {
  --hf-fc-pill-font-size: clamp(.84rem, 3.2vw, .9rem);
  --hf-fc-pill-padding-block-start: var(--hf-ui-pill-padding-block-start, .18rem);
  --hf-fc-pill-padding-block-end: var(--hf-ui-pill-padding-block-end, .2rem);
  --hf-fc-pill-padding-inline: var(--hf-ui-pill-padding-inline, .56rem);
  --hf-fc-list-font-size: clamp(1rem, 4.5vw, 1.13rem);
  --hf-fc-list-line-height: 1.34;
}

:root[data-hf-friends-circle-entry] #hf-friends-circle-fallback-host,
:root[data-hf-friends-circle-entry] .friend-interview-panel,
:root[data-hf-friends-circle-entry] .friend-interview-panel * {
  box-sizing: border-box;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel,
:root[data-hf-friends-circle-entry] .friend-interview-panel__surface,
:root[data-hf-friends-circle-entry] .friend-interview-form,
:root[data-hf-friends-circle-entry] .friend-interview-panel__header,
:root[data-hf-friends-circle-entry] .friend-interview-panel__brand,
:root[data-hf-friends-circle-entry] .friend-interview-panel__intro,
:root[data-hf-friends-circle-entry] .friend-interview-panel__feature-list,
:root[data-hf-friends-circle-entry] .friend-interview-panel__status,
:root[data-hf-friends-circle-entry] .friend-interview-panel__request,
:root[data-hf-friends-circle-entry] .friend-interview-panel__code,
:root[data-hf-friends-circle-entry] .friend-interview-form fieldset,
:root[data-hf-friends-circle-entry] .friend-interview-location,
:root[data-hf-friends-circle-entry] .friend-interview-form > label,
:root[data-hf-friends-circle-entry] .friend-interview-form__privacy-note,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent {
  min-width: 0;
  max-width: 100%;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__surface,
:root[data-hf-friends-circle-entry] .friend-interview-form {
  width: 100%;
  max-width: min(100%, 33rem);
  min-width: 0;
  background-color: #17265f !important;
  background-image: linear-gradient(180deg, #1b3470 0%, #17265f 48%, #13204f 100%) !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__surface {
  display: grid;
  gap: .72rem;
  width: min(100%, 34rem);
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(1rem, 4vw, 1.35rem);
  border: 1px solid rgba(181, 207, 255, .3) !important;
  border-radius: var(--hf-ui-panel-radius, 8px) !important;
  box-shadow:
    0 1rem 2.4rem rgba(3, 10, 30, .38),
    inset 0 0 0 1px rgba(232, 248, 255, .08) !important;
  color: var(--hf-ui-text, #f8fbff) !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__header,
:root[data-hf-friends-circle-entry] .friend-interview-panel__brand,
:root[data-hf-friends-circle-entry] .friend-interview-form,
:root[data-hf-friends-circle-entry] .friend-interview-schedule {
  display: grid;
  gap: .72rem;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__header,
:root[data-hf-friends-circle-entry] .friend-interview-panel__brand {
  justify-items: center;
  text-align: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__mascots,
:root[data-hf-friends-circle-entry] .friend-interview-panel__brand .hf-auth-brand__image {
  display: block;
  object-fit: cover;
  border: 2px solid rgba(255, 215, 160, .56);
  border-radius: var(--hf-ui-panel-radius, 8px);
  background: rgba(5, 12, 26, .42);
  box-shadow: 0 12px 28px rgba(7, 18, 43, .24);
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__mascots {
  width: min(12.5rem, 54vw);
  max-height: 7rem;
  filter: saturate(.98) contrast(.98);
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__brand .hf-auth-brand {
  display: grid;
  justify-items: center;
  gap: .36rem;
  width: 100%;
  margin: 0 0 .12rem;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__brand .hf-auth-brand__image {
  width: min(13.2rem, 56vw);
  height: auto;
  aspect-ratio: 560 / 403;
}

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

:root[data-hf-friends-circle-entry] .friend-interview-panel__eyebrow,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent__kicker {
  width: fit-content;
  margin: 0;
  padding: var(--hf-fc-pill-padding-block-start) var(--hf-fc-pill-padding-inline) var(--hf-fc-pill-padding-block-end);
  border-radius: 999px;
  font-size: var(--hf-fc-pill-font-size);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__eyebrow {
  border: 1px solid rgba(217, 154, 55, .45);
  background: rgba(217, 154, 55, .2);
  color: #ffd7a0 !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__brand > .friend-interview-panel__eyebrow {
  justify-self: center;
  max-width: min(100%, 17rem);
  padding-inline: .58rem;
  color: #f8fbff !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request > .friend-interview-panel__eyebrow {
  margin-inline: auto;
  border-color: rgba(78, 214, 143, .58);
  background: rgba(20, 112, 82, .42);
  color: #c9ffdf !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__important > .friend-interview-panel__eyebrow,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent__kicker {
  justify-self: center;
  margin: 0 auto .08rem !important;
  border: 1px solid var(--hf-ui-important-red-border, rgba(255, 178, 188, .62));
  background: linear-gradient(180deg, var(--hf-ui-important-red-start, #b84658) 0%, var(--hf-ui-important-red-end, #8f2f43) 100%);
  color: var(--hf-ui-important-red-text, #ffe3e7) !important;
  box-shadow: var(--hf-ui-important-red-shadow, 0 .42rem 1rem rgba(68, 10, 25, .24));
}

:root[data-hf-friends-circle-entry] .friend-interview-panel h2,
:root[data-hf-friends-circle-entry] .friend-interview-panel h3,
:root[data-hf-friends-circle-entry] .friend-interview-panel legend {
  color: #f8fbff !important;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel h2 {
  max-width: 12.5em;
  margin: .35rem auto .08rem;
  font-size: clamp(1.45rem, 6.8vw, 2.05rem);
  line-height: 1.06;
  text-align: center;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__brand > p:not(.friend-interview-panel__eyebrow) {
  max-width: 22rem;
  margin: 0 auto;
  color: rgba(248, 251, 255, .82) !important;
  font-size: clamp(1rem, 4.7vw, 1.18rem);
  line-height: 1.32;
  text-align: center;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel p,
:root[data-hf-friends-circle-entry] .friend-interview-panel li,
:root[data-hf-friends-circle-entry] .friend-interview-panel label,
:root[data-hf-friends-circle-entry] .friend-interview-checkbox__text,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent__intro,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent__bullets,
:root[data-hf-friends-circle-entry] .friend-interview-panel__intro-list,
:root[data-hf-friends-circle-entry] .friend-interview-panel__important-list {
  color: rgba(248, 251, 255, .84) !important;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__intro {
  gap: .82rem;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__intro p,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent__intro {
  margin: 0;
  font-size: clamp(1rem, 4.5vw, 1.13rem);
  line-height: 1.34;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__intro,
:root[data-hf-friends-circle-entry] .friend-interview-panel__feature-list,
:root[data-hf-friends-circle-entry] .friend-interview-panel__status,
:root[data-hf-friends-circle-entry] .friend-interview-panel__request,
:root[data-hf-friends-circle-entry] .friend-interview-panel__code,
:root[data-hf-friends-circle-entry] .friend-interview-form fieldset,
:root[data-hf-friends-circle-entry] .friend-interview-location,
:root[data-hf-friends-circle-entry] .friend-interview-form__privacy-note {
  width: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: .86rem;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: var(--hf-ui-panel-radius, 8px) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: var(--hf-ui-text, #f8fbff) !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__error,
:root[data-hf-friends-circle-entry] [data-hf-retired-phone-note="1"] {
  border: 1px solid rgba(255, 179, 41, .46) !important;
  border-radius: 8px;
  background: rgba(11, 20, 50, .5) !important;
  color: #f8fbff !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__status--checking {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .68rem;
  min-height: 4.1rem;
  text-align: center;
  font-weight: 900;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__spinner {
  width: 1.36rem;
  height: 1.36rem;
  border: .22rem solid rgba(232, 248, 255, .28);
  border-top-color: #ffb329;
  border-radius: 50%;
  animation: hf-friends-circle-spin .85s linear infinite;
}

@keyframes hf-friends-circle-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-hf-friends-circle-entry] .friend-interview-panel__spinner {
    animation: none;
  }
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request,
:root[data-hf-friends-circle-entry] .friend-interview-panel__important,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: #f8fbff;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request {
  gap: .42rem;
  background: rgba(13, 25, 62, .55) !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request h3,
:root[data-hf-friends-circle-entry] .friend-interview-panel__request p:not(.friend-interview-panel__eyebrow) {
  margin: 0;
  text-align: center;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request h3 {
  font-size: clamp(1.24rem, 4.6vw, 1.72rem);
  line-height: 1.12;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request p:not(.friend-interview-panel__eyebrow) {
  font-size: .98rem;
  line-height: 1.34;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__feature-list {
  display: grid;
  gap: .55rem;
  list-style: none;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__feature-list li {
  display: block;
  padding: .72rem .82rem;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #f8fbff !important;
  box-shadow: none !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request--approved {
  display: grid;
  justify-items: center;
  gap: .42rem;
  text-align: center;
  background: rgba(10, 29, 74, .62) !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request--approved .friend-interview-panel__eyebrow {
  border-color: rgba(48, 181, 128, .7);
  background: linear-gradient(180deg, var(--hf-ui-forest, #236f44) 0%, var(--hf-ui-forest-dark, #124f31) 100%);
  color: var(--hf-ui-forest-text, #ecffe7) !important;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request--approved h3 {
  margin: 0;
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  line-height: 1.08;
  text-align: center;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__request--approved p:not(.friend-interview-panel__eyebrow) {
  margin: 0;
  text-align: center;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__important,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent {
  gap: .62rem;
  padding: .86rem;
  border: 1px solid rgba(255, 179, 41, .48);
  border-radius: 8px;
  background: rgba(11, 20, 50, .5);
}

:root[data-hf-friends-circle-entry] .hf-friends-circle-consent h3,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent p {
  margin: 0;
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__important p:not(.friend-interview-panel__eyebrow) {
  margin: 0;
  color: rgba(248, 251, 255, .84) !important;
  font-size: var(--hf-fc-list-font-size);
  font-weight: 500;
  line-height: var(--hf-fc-list-line-height);
}

:root[data-hf-friends-circle-entry] .friend-interview-panel__important a,
:root[data-hf-friends-circle-entry] .hf-friends-circle-consent__links a {
  color: #ffd7a0 !important;
  font-weight: 800;
}