/* Keep the shared header in the login page's layout so the card starts below it. */
.account-page > .site-header { position: relative; }
.account-shell { width: min(100% - 2rem, 960px); margin: 2rem auto 4rem; }
.account-shell section { padding: clamp(1.25rem, 4vw, 2rem); margin: 1rem 0; }
.account-shell h1 { margin: .25rem 0 1rem; }
.account-shell h2 { margin: 0 0 .75rem; }
.account-shell [hidden] { display: none !important; }
.account-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; align-items: center; }
.account-shell a:not(.button) { text-decoration: underline; text-underline-offset: .2em; }
.account-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: .75rem; }
.appointment { padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; overflow-wrap: anywhere; }
.appointment h3 { margin: .25rem 0 .5rem; }
.appointment p { margin: .4rem 0; white-space: pre-wrap; }
.appointment-status { color: var(--muted); font-size: .85rem; text-transform: capitalize; }
.account-shell button { cursor: pointer; }
.account-shell button:disabled { opacity: .6; cursor: wait; }
.account-shell input[readonly] { width: 100%; min-width: 0; }

.account-shell .account-auth { max-width: 32rem; margin-inline: auto; }
.account-auth .contact-form { margin-block: 1rem; }
.account-auth .contact-form .button { justify-content: center; min-height: 44px; width: 100%; }
.account-auth input:not([type="hidden"]) { min-height: 44px; font-size: max(16px, 1rem); }
.account-small { font-size: .875rem; color: var(--muted); }
.account-legal { margin-top: 1.25rem; }
@media (max-width: 560px) {
  .account-shell { margin-top: 1.25rem; }
  .account-auth .account-actions .button { width: 100%; justify-content: center; min-height: 44px; }
}

@media (max-width: 620px) {
  .account-page > .site-header:has(.site-nav.is-open) {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    height: auto;
    min-height: 44px;
  }
  .account-page .site-header .brand { justify-self: start; }
  .account-page .site-header .header-actions { grid-column: 2; grid-row: 1; }
  .account-page .site-header .site-nav.is-open {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}