@import url("/shared/styles/design-tokens.css");
@import url("/shared/styles/primitives.css");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

html,
body.hn-qlik-auth-pending {
  min-height: 100%;
}

body.hn-qlik-auth-pending {
  overflow: hidden !important;
  background: var(--hn-surface-muted);
}

body.hn-qlik-auth-pending > :not(.hn-qlik-auth-gate) {
  visibility: hidden !important;
}

.hn-qlik-auth-gate {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  overflow: auto;
  box-sizing: border-box;
  min-height: 100dvh;
  place-items: center;
  padding: var(--hn-space-5);
  background: var(--hn-surface-muted);
  color: var(--hn-foreground);
  font-family: var(--hn-font-sans);
}

.hn-qlik-auth-gate__content {
  display: grid;
  width: min(36rem, 100%);
  box-sizing: border-box;
  gap: var(--hn-space-6);
  padding: clamp(var(--hn-space-6), 5vw, var(--hn-space-10));
  border: 0;
  border-radius: var(--hn-radius-panel);
  background: var(--hn-surface);
}

.hn-qlik-auth-gate__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hn-space-4);
}

.hn-qlik-auth-gate__logo {
  display: block;
  width: auto;
  height: 2.25rem;
  object-fit: contain;
  object-position: left center;
}

.hn-qlik-auth-gate__logo--dark {
  display: none;
}

.hn-qlik-auth-gate__product {
  margin: 0;
  color: var(--hn-foreground-muted);
  font-size: .6875rem;
  font-weight: var(--hn-weight-bold);
  letter-spacing: var(--hn-tracking-label);
  text-align: right;
  text-transform: uppercase;
}

.hn-qlik-auth-gate__status {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--hn-space-5);
  padding: var(--hn-space-5);
  border-radius: var(--hn-radius-card);
  background: var(--hn-surface-muted);
}

.hn-qlik-auth-gate__indicator {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: var(--hn-radius-control);
  background: var(--hn-gray-950);
}

.hn-qlik-auth-gate__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: .1875rem solid color-mix(in srgb, var(--hn-primary) 28%, transparent);
  border-top-color: var(--hn-primary);
  border-radius: 50%;
  animation: hn-qlik-auth-spin .8s linear infinite;
}

.hn-qlik-auth-gate__copy {
  min-width: 0;
}

.hn-qlik-auth-gate__eyebrow {
  margin: 0 0 var(--hn-space-2);
  color: var(--hn-primary-hover);
  font-size: .6875rem;
  font-weight: var(--hn-weight-bold);
  letter-spacing: var(--hn-tracking-label);
  text-transform: uppercase;
}

.hn-qlik-auth-gate__copy h1 {
  margin: 0;
  color: var(--hn-foreground);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: var(--hn-weight-extrabold);
  letter-spacing: var(--hn-tracking-tight);
  line-height: 1.05;
}

.hn-qlik-auth-gate__copy [data-qlik-auth-status] {
  margin: var(--hn-space-3) 0 0;
  color: var(--hn-foreground-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.hn-qlik-auth-gate__return {
  display: none;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  justify-self: start;
  box-sizing: border-box;
  padding: var(--hn-space-3) var(--hn-space-5);
  border: 0;
  border-radius: var(--hn-radius-control);
  background: var(--hn-primary);
  color: var(--hn-gray-950);
  font-weight: var(--hn-weight-bold);
  text-decoration: none;
  transition: background-color var(--hn-duration-fast) var(--hn-ease-direct);
}

.hn-qlik-auth-gate__return:hover {
  background: var(--hn-primary-hover);
  color: var(--hn-gray-950);
}

.hn-qlik-auth-gate__return:focus-visible {
  outline: 3px solid var(--hn-primary-hover);
  outline-offset: 3px;
}

.hn-qlik-auth-gate__note {
  margin: 0;
  color: var(--hn-foreground-muted);
  font-size: .75rem;
  line-height: 1.45;
}

.hn-qlik-auth-gate[data-state="error"] .hn-qlik-auth-gate__indicator {
  background: var(--hn-danger);
}

.hn-qlik-auth-gate[data-state="error"] .hn-qlik-auth-gate__spinner {
  width: .55rem;
  height: .55rem;
  border: 0;
  background: var(--hn-white);
  animation: none;
}

.hn-qlik-auth-gate[data-state="error"] .hn-qlik-auth-gate__return {
  display: inline-flex;
}

:root[data-theme="dark"] .hn-qlik-auth-gate__logo--light,
:root.theme-dark .hn-qlik-auth-gate__logo--light {
  display: none;
}

:root[data-theme="dark"] .hn-qlik-auth-gate__logo--dark,
:root.theme-dark .hn-qlik-auth-gate__logo--dark {
  display: block;
}

@keyframes hn-qlik-auth-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 32rem) {
  .hn-qlik-auth-gate {
    padding: var(--hn-space-3);
  }

  .hn-qlik-auth-gate__content {
    gap: var(--hn-space-5);
    padding: var(--hn-space-5);
    border-radius: var(--hn-radius-card);
  }

  .hn-qlik-auth-gate__brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .hn-qlik-auth-gate__product {
    text-align: left;
  }

  .hn-qlik-auth-gate__status {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--hn-space-4);
    padding: var(--hn-space-4);
  }

  .hn-qlik-auth-gate__indicator {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hn-qlik-auth-gate__return {
    width: 100%;
  }
}

@media (max-height: 34rem) and (orientation: landscape) {
  .hn-qlik-auth-gate {
    padding: var(--hn-space-3);
  }

  .hn-qlik-auth-gate__content {
    gap: var(--hn-space-4);
    padding: var(--hn-space-4) var(--hn-space-6);
  }

  .hn-qlik-auth-gate__status {
    padding: var(--hn-space-4);
  }

  .hn-qlik-auth-gate__note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hn-qlik-auth-gate__spinner {
    animation-duration: 2s;
  }
}