/* Release-level interaction, accessibility and responsive refinements. */
:root {
  --release-focus: #0b6ea8;
  --release-ease-out: cubic-bezier(.23, 1, .32, 1);
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #102f4c;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms var(--release-ease-out);
}
.skip-link:focus { transform: translateY(0); }
.brand { text-decoration: none; }

.site-footer {
  border-top: 1px solid #dce6ee;
  color: #65788b;
  background: rgba(249, 251, 253, .9);
}
.site-footer-inner {
  width: min(1280px, 100%);
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 13px 24px;
  font-size: .84rem;
}
.footer-separator { width: 3px; height: 3px; border-radius: 50%; background: #9aabba; }

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--release-focus) 38%, transparent);
  outline-offset: 3px;
}
:where(button, .button-link, [role="button"]) {
  transition-property: transform, background-color, border-color, box-shadow, color;
  transition-duration: 160ms;
  transition-timing-function: var(--release-ease-out);
}
:where(button, .button-link, [role="button"]):active { transform: scale(.98); }

.lazy-section-state {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #60758a;
  text-align: center;
}
.lazy-section-state strong { color: #17314d; font-size: 1rem; }
.lazy-section-state > span:last-child { font-size: .9rem; }
.lazy-section-state .spinner { width: 30px; height: 30px; }
.lazy-section-state.is-error button {
  margin-top: 6px;
  padding: 9px 14px;
  border: 1px solid #bdd5e7;
  border-radius: 10px;
  background: #fff;
  color: #145f91;
  font-weight: 750;
  cursor: pointer;
}

.error-page {
  max-width: 720px;
  min-height: 360px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  margin: clamp(40px, 10vh, 110px) auto;
  border: 1px solid #dce6ee;
  text-align: center;
}
.error-page .error-code { margin: 0; color: #2474a8; font-size: .82rem; font-weight: 850; letter-spacing: .14em; }
.error-page h1 { margin: 0; color: #102a46; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.035em; }
.error-page > p:not(.error-code) { max-width: 520px; margin: 2px 0 12px; color: #667b8f; line-height: 1.65; }
.error-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
.error-actions > a:not(.button-link) { color: #1769a4; font-weight: 750; text-decoration: none; }
.error-actions > a:not(.button-link):hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .site-header .nav-wrap { padding-inline: 14px; gap: 8px; }
  .site-header .primary-nav {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .site-header .primary-nav::-webkit-scrollbar { display: none; }
  .site-header .primary-nav a { flex: 0 0 auto; font-size: .92rem; padding: 9px 11px; }
  .site-footer-inner { flex-wrap: wrap; padding-inline: 16px; text-align: center; }
  main { margin-top: 18px; padding-inline: 14px; }
}

@media (hover: none), (pointer: coarse) {
  .primary-nav a:hover, .module-card:hover, .phenotype-overview-card:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Account recovery and sign-in feedback */
.login-card .eyebrow,
.login-card .login-intro {
  text-align: center;
}

.login-intro { margin: 0; }

.account-error-card {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  text-align: left;
}

.account-error-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #a83d32;
}

.account-error-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.account-error-card strong {
  display: block;
  color: #87342d;
  font-size: 14px;
}

.account-error-card p {
  margin: 4px 0 0;
  color: #93483f;
  font-size: 13px;
  line-height: 1.5;
}

.account-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
}

.account-error-actions a {
  color: #7f332d;
  font-size: 12px;
  font-weight: 750;
  text-underline-offset: 2px;
}

.account-form input[aria-invalid="true"] { border-color: #d79a93; }

.account-form input[aria-invalid="true"]:focus {
  border-color: #ba645b;
  box-shadow: 0 0 0 4px rgba(186, 100, 91, .12);
}