/* Targeted fixes discovered by rendered Chromium validation. */

/* Keep the result hero artwork inside its own stacking context. The legacy
   wave layer is absolutely positioned and otherwise expands against the page
   viewport, where it can sit above result actions and intercept pointer input. */
body[data-page-path$="/result"] .result-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-page-path$="/result"] .result-hero::before,
body[data-page-path$="/result"] .result-hero::after {
  pointer-events: none;
}

/* Give each Discovery Review step an explicit number/content layout. The
   legacy two-column grid left the paragraph to browser auto-placement, which
   put descriptions under the number rather than under their heading. */
body[data-page-path$="/result"] .four-step-process article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  align-items: start;
  column-gap: .85rem;
  row-gap: .55rem;
}

body[data-page-path$="/result"] .four-step-process article > span {
  grid-column: 1;
  grid-row: 1;
}

body[data-page-path$="/result"] .four-step-process article > strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: block;
  min-width: 0;
  line-height: 1.35;
}

body[data-page-path$="/result"] .four-step-process article > p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
}

/* Service recommendations can contain two or three cards. Auto-fit prevents
   an empty third column, while block-level titles and duration pills keep the
   metadata from running into the service name. */
body[data-page-path$="/result"] .recommended-service-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body[data-page-path$="/result"] .recommended-service-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .55rem;
}

body[data-page-path$="/result"] .recommended-service-grid article > strong {
  display: block;
  line-height: 1.35;
}

body[data-page-path$="/result"] .recommended-service-grid article > span {
  width: fit-content;
  min-height: 28px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--gocx-purple-deep);
  background: var(--gocx-purple-soft);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}

body[data-page-path$="/result"] .recommended-service-grid article > p {
  margin: 0;
}

/* MFA enrolment uses a locally rendered QR code rather than depending on a
   desktop browser to handle the otpauth custom protocol. */
body[data-page-path="/account/mfa/setup"] .mfa-setup-card {
  width: min(820px, calc(100% - 32px));
  margin: 28px auto 64px;
  padding: clamp(26px, 4vw, 42px);
}

body[data-page-path="/account/mfa/setup"] .mfa-setup-card > h1 {
  max-width: 16ch;
  margin-bottom: 14px;
  font-size: clamp(2.1rem, 5vw, 3.55rem);
}

body[data-page-path="/account/mfa/setup"] .mfa-enrolment-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: stretch;
}

body[data-page-path="/account/mfa/setup"] .mfa-qr-card,
body[data-page-path="/account/mfa/setup"] .mfa-manual-card,
body[data-page-path="/account/mfa/setup"] .mfa-confirmation-panel {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--gocx-line);
  border-radius: 16px;
  background: var(--gocx-surface-soft);
}

body[data-page-path="/account/mfa/setup"] .mfa-qr-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  text-align: center;
}

body[data-page-path="/account/mfa/setup"] .mfa-qr-card img {
  width: min(240px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border: 1px solid var(--gocx-line);
  border-radius: 12px;
  background: #fff;
}

body[data-page-path="/account/mfa/setup"] .mfa-qr-card figcaption {
  max-width: 32ch;
  color: var(--gocx-muted);
  font-size: .82rem;
  line-height: 1.5;
}

body[data-page-path="/account/mfa/setup"] .mfa-manual-card {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 12px;
}

body[data-page-path="/account/mfa/setup"] .mfa-manual-card h2,
body[data-page-path="/account/mfa/setup"] .mfa-confirmation-panel h2 {
  margin: 4px 0 6px;
  font-size: 1.35rem;
}

body[data-page-path="/account/mfa/setup"] .mfa-manual-card p,
body[data-page-path="/account/mfa/setup"] .mfa-confirmation-panel p {
  margin: 0;
}

body[data-page-path="/account/mfa/setup"] .mfa-setup-key {
  width: 100%;
  padding: 14px;
  display: block;
  overflow-wrap: anywhere;
  border: 1px solid var(--gocx-line);
  border-radius: 10px;
  color: var(--gocx-ink);
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem;
  letter-spacing: .08em;
  line-height: 1.5;
}

body[data-page-path="/account/mfa/setup"] .mfa-regenerate-form {
  margin-top: 4px;
}

body[data-page-path="/account/mfa/setup"] .mfa-confirmation-panel {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: 24px;
  align-items: end;
  background: #fff;
}

body[data-page-path="/account/mfa/setup"] .mfa-confirmation-panel form {
  margin: 0;
}

@media (max-width: 680px) {
  body[data-page-path$="/result"] .four-step-process article {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  body[data-page-path="/account/mfa/setup"] .mfa-enrolment-grid,
  body[data-page-path="/account/mfa/setup"] .mfa-confirmation-panel {
    grid-template-columns: 1fr;
  }

  body[data-page-path="/account/mfa/setup"] .mfa-setup-card {
    width: min(100% - 20px, 820px);
    margin-top: 16px;
    padding: 22px;
  }

  body[data-page-path="/partners/login"] .auth-main {
    padding-top: 96px !important;
  }

  body[data-page-path="/partners/login"] .auth-main > .page-shell.narrow {
    margin-top: 0;
  }
}