/* Public utility, profile, leaderboard, achievements, and wardrobe responsive family. */

.public-help-page,
.public-contact-page,
.public-achievements-page {
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 5%, rgba(147, 197, 253, 0.22), transparent 26rem),
    linear-gradient(180deg, #f3f8fd 0%, #ffffff 58%, #edf6ff 100%);
  color: #172033;
}

.public-help-page .back-nav,
.public-contact-page .back-nav {
  top: max(1rem, env(safe-area-inset-top, 0px));
  left: max(1rem, env(safe-area-inset-left, 0px));
  z-index: 5;
}

.public-help-page .btn-back-home,
.public-contact-page .btn-back-home {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

.public-help-page .help-container {
  inline-size: min(100%, 50rem);
  margin: 0 auto;
  padding: clamp(5.5rem, 12vw, 7rem) var(--ui-page-gutter) clamp(2rem, 6vw, 3.5rem);
}

.public-help-page .help-header {
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
}

.public-help-page .help-header h1 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.2;
  text-wrap: balance;
}

.public-help-page .help-header p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}

.public-help-page .faq-item {
  cursor: default;
}

.public-help-page .faq-question {
  inline-size: 100%;
  min-height: 56px;
  padding: clamp(1rem, 3vw, 1.25rem) clamp(1rem, 4vw, 1.5rem);
  border: 0;
  background: transparent;
  color: var(--text-dark);
  font-family: inherit;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
}

.public-help-page .faq-question i {
  flex: 0 0 1rem;
  margin-inline-start: 0.75rem;
}

.public-help-page .faq-answer {
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.public-help-page .faq-item.active .faq-answer {
  max-height: 62.5rem;
  padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.25rem;
}

.public-help-page .contact-cta {
  margin-top: clamp(2rem, 6vw, 3.125rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: clamp(1rem, 3vw, 1.25rem);
}

.public-help-page .contact-cta h3 {
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  text-wrap: balance;
}

.public-help-page .btn-white {
  min-height: 44px;
  justify-content: center;
}

.public-contact-page .contact-container {
  inline-size: min(100%, 62.5rem);
  margin: 0 auto;
  padding: clamp(5.5rem, 12vw, 7rem) var(--ui-page-gutter) clamp(2rem, 6vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: start;
}

.public-contact-page .contact-info,
.public-contact-page .contact-form-card {
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: clamp(1rem, 3vw, 1.5rem);
}

.public-contact-page .contact-info h2 {
  font-size: clamp(1.55rem, 4vw, 2rem);
}

.public-contact-page .info-item {
  min-width: 0;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
}

.public-contact-page .info-item i {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.public-contact-page .contact-socials {
  flex-wrap: wrap;
}

.public-contact-page .social-link {
  width: 44px;
  height: 44px;
}

.public-contact-page .form-control,
.public-contact-page .btn-submit {
  min-height: 44px;
}

.public-leaderboard-page .leaderboard-container,
.public-profile-page .profile-content,
.public-achievements-page .achievements-content,
.public-wardrobe-page .container {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.public-leaderboard-page .score-sort {
  min-height: 44px;
}

.public-profile-page .profile-topbar,
.public-profile-page .profile-topbar-actions,
.public-profile-page .profile-level-chip {
  min-width: 0;
}

.public-profile-page :where(.profile-admin-button, .profile-wardrobe-button, .profile-logout-button, .btn-checkin-widget, .btn-view-achievements) {
  min-height: 44px;
}

.public-achievements-page .achievements-container {
  min-height: 100dvh;
  padding: var(--ui-page-gutter);
  background: transparent;
}

.public-achievements-page .achievements-header,
.public-achievements-page .achievements-content {
  inline-size: min(100%, 62.5rem);
}

.public-achievements-page .achievements-header {
  padding: clamp(1rem, 5vw, 2.5rem) 0 clamp(1rem, 3vw, 1.5rem);
}

.public-achievements-page .achievements-header h1 {
  font-size: clamp(1.65rem, 5vw, 2.5rem);
  line-height: 1.25;
  text-wrap: balance;
}

.public-achievements-page .achievements-stats,
.public-achievements-page .badge-card {
  padding: clamp(1rem, 4vw, 1.875rem);
  border-radius: clamp(1rem, 3vw, 1.25rem);
}

.public-achievements-page .stats-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.625rem, 2vw, 1.25rem);
}

.public-achievements-page .badges-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(0.75rem, 3vw, 1.25rem);
}

.public-achievements-page .stat-box,
.public-achievements-page .badge-info {
  min-width: 0;
}

.public-achievements-page .stat-value {
  font-size: clamp(1.65rem, 6vw, 2.5rem);
  overflow-wrap: anywhere;
}

.public-achievements-page .badge-header {
  align-items: flex-start;
}

.public-achievements-page .btn-back {
  min-height: 44px;
}

.public-wardrobe-page {
  min-height: 100dvh;
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
}

.public-wardrobe-page .header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.75rem;
}

.public-wardrobe-page .header::after {
  content: '';
  width: 44px;
  height: 1px;
}

.public-wardrobe-page .header .btn-back {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

.public-wardrobe-page .page-title {
  min-width: 0;
  justify-content: center;
  font-size: clamp(1rem, 4vw, 1.4rem);
  text-align: center;
}

.public-wardrobe-page .development-container {
  min-height: calc(100dvh - 5rem);
  padding-block: 1rem;
}

.public-wardrobe-page .dev-card {
  inline-size: min(100%, 31.25rem);
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(1rem, 4vw, 1.875rem);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.3);
  text-align: center;
  backdrop-filter: blur(1.25rem);
}

.public-wardrobe-page .dev-icon {
  margin-bottom: 1.25rem;
  color: #60a5fa;
  font-size: clamp(3rem, 6vw, 5rem);
  text-shadow: 0 0 1.875rem rgba(96, 165, 250, 0.4);
}

.public-wardrobe-page .dev-card h2 {
  margin-bottom: 0.9375rem;
  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
  background-clip: text;
  color: #fff;
  font-size: clamp(1.3rem, 3vw, 2rem);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.public-wardrobe-page .dev-card p {
  margin-bottom: 1.875rem;
  color: #94a3b8;
  line-height: 1.6;
}

.public-wardrobe-page .loading-bar {
  width: 100%;
  height: 0.375rem;
  margin-bottom: 0.9375rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.public-wardrobe-page .loading-progress {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.1s linear;
}

.public-wardrobe-page .dev-status {
  margin-bottom: 0 !important;
  color: #64748b !important;
  font-size: 0.9rem !important;
}

.public-wardrobe-page .dev-status span {
  color: #60a5fa;
  font-family: monospace;
}

@media (max-width: 48rem) {
  .public-contact-page .contact-container {
    grid-template-columns: 1fr;
  }

  .public-contact-page .contact-info,
  .public-contact-page .contact-form-card {
    padding: clamp(1.25rem, 5vw, 1.75rem);
  }

  .public-leaderboard-page .leaderboard-list-heading {
    align-items: flex-start;
  }

  .public-profile-page .profile-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 30rem) {
  .public-help-page .help-header,
  .public-help-page .contact-cta {
    text-align: start;
  }

  .public-help-page .btn-white {
    width: 100%;
  }

  .public-contact-page .contact-container {
    padding-inline: 0.75rem;
  }

  .public-leaderboard-page .leaderboard-list-heading {
    flex-direction: column;
  }

  .public-leaderboard-page .score-sort {
    width: 100%;
    justify-content: center;
  }

  .public-profile-page .profile-topbar {
    flex-wrap: wrap !important;
  }

  .public-profile-page .profile-level-chip {
    width: 100%;
    margin-left: 0 !important;
  }

  .public-profile-page .profile-level-chip > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .public-achievements-page .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-achievements-page .badge-header {
    gap: 0.75rem;
  }

  .public-achievements-page .badge-icon-large {
    flex: 0 0 2.5rem;
  }

  .public-wardrobe-page .header .btn-back span {
    display: none;
  }
}