* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

/* Prevent flash of unstyled content while theme loads.
   #root starts invisible; ThemeReadyGate adds .theme-ready once tokens arrive. */
#root {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

#root.theme-ready {
  opacity: 1;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font-family: inherit;
}

input::placeholder {
  color: inherit;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — mobile-friendly auth screens
   ═══════════════════════════════════════════════════════════════ */

/* Give the page container breathing room so the box never touches edges.
   Minimum 10px (0.625rem) gap between box and screen edge at all sizes.
   !important needed because DS CSS loads after index.css via Module Federation. */
.authgate-unauth-page {
  padding: 0.625rem !important;
  box-sizing: border-box !important;
}

/* Ensure text wraps and doesn't overflow the box */
.authgate-unauth-box {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Ensure inline SVG logos scale responsively within the box */
.authgate-unauth-box svg {
  max-width: 100%;
  height: auto;
}

/* Forms should take full width of their container */
.authgate-unauth-box form {
  width: 100%;
}

/* On small screens: reduce box padding, scale down headings */
@media (max-width: 480px) {
  .authgate-unauth-page {
    padding: 0.625rem;
    align-items: flex-start;
    padding-top: 3rem;
  }

  .authgate-unauth-box {
    padding: 1.25rem 1rem !important;
    border-radius: 0.75rem !important;
  }

  .authgate-unauth-box h2 {
    font-size: 1.25rem;
  }

  .authgate-unauth-box p {
    font-size: 0.875rem;
  }

  /* Scale down code input digit boxes to fit 6 in a row */
  .codeinput-digit {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1rem !important;
  }

  .codeinput-container {
    gap: 0.4rem !important;
  }
}

/* On very small screens (< 360px): further reduce */
@media (max-width: 360px) {
  .authgate-unauth-page {
    padding: 0.625rem;
    padding-top: 2rem;
  }

  .authgate-unauth-box {
    padding: 1rem 0.75rem !important;
  }

  .authgate-unauth-box h2 {
    font-size: 1.1rem;
  }

  /* Smaller digit boxes for very narrow screens */
  .codeinput-digit {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.875rem !important;
    padding: 0.125rem !important;
  }

  .codeinput-container {
    gap: 0.25rem !important;
  }
}