/* Shared responsive refinements. Load after each page's design styles. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { overflow-wrap: anywhere; }
img { max-width: 100%; }
input, select, textarea { max-width: 100%; }
.site-navigation__links { flex-wrap: wrap; }
.site-navigation__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-navigation {
  position: fixed;
  box-shadow: none;
  transition: box-shadow 200ms ease;
}
.site-navigation.is-scrolled {
  box-shadow: 0 4px 18px rgba(23, 19, 67, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .site-navigation { transition: none; }
}
/* Leave space for the fixed navigation when following section links. */
.room-section, #signup-form, .research-intro, .research-feature, .research-cta {
  scroll-margin-top: 100px;
}

/* Preserve the hero artwork while allowing its content to determine height. */
body#top > header:not(.research-hero) {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}
header .header-content .btn,
header .header-content .tooltip1 {
  height: auto;
  min-height: 44px;
  max-width: 100%;
  padding: 12px 18px;
  white-space: normal;
}
.room-copy > *, .room-intro, .room-summary,
.section-form > *, .research-hero > *, .research-feature > *,
.research-intro > * { min-width: 0; }
.section-form {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
.section-form #form-container { width: 100%; min-width: 0; }
.section-form .submit { max-width: 100%; height: auto; min-height: 48px; }
.section-form input:not([type="checkbox"]):not([type="radio"]),
.activation-card input:not([type="checkbox"]),
.login-form input:not([type="checkbox"]) { min-height: 44px; font-size: 16px; }
.password-field .password-toggle { width: 44px; height: 44px; bottom: 0; }
.password-field input { padding-right: 48px; }
footer .row > * { min-width: 0; }
footer #form-content { gap: 12px; }
footer #form-inputs { flex: 1; width: auto; min-width: 0; }
footer .text-center { margin: 24px 0; }
footer .footer-legal-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Override the legacy global 260px button width in the image dialog. */
.room-preview button { width: auto; height: auto; margin: 0; }
.room-preview .room-preview-toolbar { align-items: flex-start; }
.room-preview #room-preview-title { width: auto; min-width: 0; text-align: left; }
.room-preview .room-preview-footer { gap: 8px; flex-wrap: wrap; }
.room-preview { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
#myModal .modal-dialog { width: min(600px, 100%); }
#myModal .modal-footer .btn { width: auto; min-height: 44px; }
#popup .popup-content, #popup1 .popup-content { max-height: calc(100dvh - 24px); }

/* Password recovery and activation pages. */
.auth-page .section-form { display: block; }
.auth-page #form-container { max-width: 600px; margin: auto; padding: 0; }
.auth-page .form-content { width: 100%; margin: 0; padding: 24px 16px; }
.auth-page .form { width: 100%; padding: 16px 0; }
.auth-page .form label { width: 100%; }
.activation-card { min-width: 0; }
.activation-card input, .activation-card button { max-width: 100%; }
.activation-card label { max-width: 100%; }

/* Admin login remains in normal flow when a phone keyboard opens. */
.login-page { min-height: 100svh; padding: 32px 16px; background: #000; }
.login-page .login-form {
  position: relative; inset: auto; transform: none;
  width: min(400px, 100%); margin: auto;
  padding: 24px clamp(16px, 4vw, 40px);
}
.login-page .avatar {
  display: block; position: static; width: min(250px, 100%);
  height: auto; margin: 0 auto 28px; border-radius: 0;
}
.login-page .login-form label { width: auto; margin-left: 0; }
.login-page .login-form input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; margin: 0 8px 16px 0; }

/* Keep wide report tables scrollable within their own region. */
.analytics-page .tab { display: flex; flex-wrap: wrap; }
.analytics-page .tab button { float: none; width: auto; min-height: 44px; height: auto; padding: 10px 16px; }
.analytics-page .tab form { margin-left: auto; }
.analytics-page .table-scroll { width: 100%; overflow-x: auto; }
.analytics-page .table-scroll table { width: 100%; min-width: 600px; }
.analytics-page .table-scroll th, .analytics-page .table-scroll td { padding: 8px; }
.analytics-page select { font-size: 16px; min-height: 44px; }
.analytics-page .tabcontent .col-md-10 { width: 100%; padding: 0; }
.analytics-page .tabcontent .col-md-1 { display: none; }

/* Fit the local venue frame; the remote Unity application controls its own UI. */
.webgl-page { place-items: start center; overflow-x: visible; }
.webgl-page .webgl-shell { width: min(1152px, 100%); max-width: 100%; height: auto; }
.webgl-shell .iframe { width: 100%; height: auto; aspect-ratio: 960 / 638; padding: 0; transform: none; }
.webgl-shell .unity-loading { inset: 0; padding: 16px; }
.webgl-mobile-note { margin: 16px 0 0; color: #282463; font: 16px/1.6 Arial, sans-serif; }

@media (min-width: 861px) and (max-width: 1200px) {
  .research-hero__content, .research-feature__content { padding-right: 32px; padding-left: 32px; }
  .research-hero h1 { font-size: clamp(48px, 6vw, 72px); }
}
@media (max-width: 1024px) {
  .section-form { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .signup-intro { position: static; }
  .section-form #form-container { max-width: 680px; margin: 0 auto; }
}
@media (max-width: 767px) {
  header .header-content { width: 100%; }
  .site-navigation + header .header-content { padding-top: 100px; }
  header .header-content .hero-text { max-width: 100%; }
  .research-hero__content { min-height: auto; padding-top: 112px; padding-bottom: 56px; }
  .research-hero h1 { font-size: clamp(40px, 11vw, 70px); line-height: .95; }
  .research-feature__content { padding: 48px 24px; }
  .research-feature__image img { height: auto; }
  .capability-list article { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .room-section { padding-right: clamp(16px, 5vw, 24px); padding-left: clamp(16px, 5vw, 24px); }
  .room-section .room-heading { font-size: clamp(28px, 7vw, 42px); }
  .room-section .room-view figcaption { gap: 10px; }
  .activation-shell { padding: 20px 12px; }
  .activation-card { padding: 28px 20px; }
}
@media (max-width: 480px) {
  header .header-content .btn-group { display: grid; width: 100%; }
  header .header-content .btn-group > .btn { width: 100%; }
  header .header-content .tooltip1 { width: 100%; font-size: 16px; }
  .section-form .form-content { padding: 28px 16px; }
  .room-preview .room-preview-toolbar { gap: 10px; }
  .room-preview button { padding: 8px; font-size: 12px; }
  .analytics-page .tab button { font-size: 15px; }
}

/* Legal panels stay within the available screen after their outer padding. */
#popup, #popup1 { height: 100dvh !important; }
#popup .popup-content, #popup1 .popup-content { max-height: 100%; }
@media (max-width: 767px) {
  .signup-intro h2 { font-size: clamp(30px, 8vw, 42px); }
}
@media (max-height: 540px) {
  .room-preview .room-preview-image { height: 48vh; height: 48dvh; }
}