.legal-page {
  margin: 0;
  background: #f4f6fb;
  color: #20284b;
  font:
    1rem/1.65 system-ui,
    sans-serif;
}
.legal-page main {
  max-width: 850px;
  margin: auto;
  padding: 24px;
}
.legal-page h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}
.legal-page h2 {
  font-size: 1.2rem;
}
.legal-page a {
  color: #253b80;
}
.legal-hash {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}
#account-action-dialog {
  width: min(720px, calc(100vw - 32px));
  /* Follow the visual viewport so the iOS keyboard never pushes the dialog off screen. */
  max-height: calc(var(--chat-height, 100dvh) - 24px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  padding: 20px;
  box-sizing: border-box;
}
#account-action-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(var(--chat-height, 100dvh) - 64px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
}
.account-action-content {
  min-height: 0;
  overflow-y: auto;
  padding: 0 4px 12px;
}
.account-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 8px;
}
.account-action-buttons button {
  flex: 1 1 160px;
  min-height: 44px;
  margin: 0;
}
#first-access-terms {
  margin-top: 16px;
}
#first-access-terms h3 {
  font-size: 1rem;
}
#terms-text {
  max-height: 32dvh;
  min-height: 140px;
  overflow-y: auto;
  border: 1px solid #b4bdd3;
  border-radius: 12px;
  padding: 14px;
  line-height: 1.6;
  background: #f7f8fc;
}
/* The acceptance boxes come first, so they stay in view; the terms follow right below. */
#first-access-terms .terms-check + #terms-text {
  margin-top: 8px;
}
@media (max-width: 550px) {
  #terms-text {
    max-height: min(30vh, 220px);
  }
}
#terms-text h4 {
  margin: 12px 0 6px;
}
#terms-text p {
  color: #20284b;
}
#first-access-terms .terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 0;
  line-height: 1.5;
}
#first-access-terms input[type='checkbox'] {
  appearance: auto;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 2px 0;
  accent-color: #20284b;
}
@media print {
  .legal-page main {
    padding: 0;
  }
  .legal-page a {
    color: inherit;
  }
}
.profile-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  flex-shrink: 0;
}
.profile-legal-row p {
  margin: 0;
}
.profile-legal-row button {
  padding: 0;
  font-size: 12px;
  min-height: 32px;
}
/* Short phones: a tighter header, so both acceptance boxes sit above the sticky buttons. */
@media (max-height: 640px) {
  #account-action-dialog .eyebrow {
    display: none;
  }
  #account-action-dialog h2 {
    margin-bottom: 8px;
    font-size: 1.5rem;
  }
  #first-access-terms {
    margin-top: 8px;
  }
  #first-access-terms h3,
  #terms-version {
    margin: 0 0 4px;
  }
  #first-access-terms .terms-check {
    padding: 4px 0;
  }
}