/* Ticket AUTHw: the web sign-in pages (D-AUTH, design/brand/proposed/sign-in/, approved #262): Log in,
   Forgot password, Check your email, Set a new password, Password saved and the link-error page. One
   centred phone-width column on every screen size: wordmark and tagline, a mint greeting with at most one
   pose, then a white card. Tokens only. The logged-out layout wraps every page in main.auth, whose older
   padding and width are for older pages; this frame (also used by the hidden public booking pages) sets
   it aside. */
main.auth:has(> .authw) { max-width: none; margin: 0; padding: 0; }

.authw { padding: var(--g-space-24) var(--g-space-18) var(--g-space-48); }
.authw h1, .authw h2, .authw p { margin: 0; }
.authw h1 { font-size: var(--g-font-size-display); line-height: var(--g-line-height-heading); overflow-wrap: anywhere; }
.authw h2 { font-size: var(--g-font-size-heading-small); line-height: var(--g-line-height-heading); }
.authw__column { max-width: var(--g-size-phone); margin: 0 auto; display: grid; gap: var(--g-space-24); }
.authw__column > * { min-width: 0; }

.authw__brand { text-align: center; padding: var(--g-space-16); display: grid; justify-items: center; gap: var(--g-space-8); }
.authw__logo { display: block; width: calc(var(--g-space-48) * 4); height: auto; }
.authw__brand p { font-size: var(--g-font-size-small); }

.authw__greeting { display: flex; align-items: center; gap: var(--g-space-16); background: var(--g-color-mint); color: var(--g-color-navy); padding: var(--g-space-16); border-radius: var(--g-radius-hero); }
.authw__greeting > div { flex: 1; min-width: 0; }
.authw__greeting p { margin-top: var(--g-space-12); }
.authw__greeting img { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 3); object-fit: contain; flex-shrink: 0; }
.authw__greeting--plain { background: transparent; padding: 0; }
.authw__greeting--moment { flex-direction: column; text-align: center; padding: var(--g-space-24); }
.authw__greeting--moment img { order: -1; }

.authw__card { background: var(--g-color-white); padding: var(--g-space-16); border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); display: grid; gap: var(--g-space-24); }
.authw__card > * { min-width: 0; }
.authw__form { display: grid; gap: var(--g-space-24); }
.authw__form .field { margin: 0; }
.authw__form .field label { font-weight: 600; }
.authw__hint, .authw__footnote, .authw__field-error { font-size: var(--g-font-size-small); }
.authw__hint, .authw__footnote { color: var(--g-color-muted); }
.authw__footnote { text-align: center; }
.authw__field-error { color: var(--g-color-error); }
.authw__notice { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-error-surface); color: var(--g-color-navy); }
.authw__notice[hidden], .authw__greeting[hidden], .authw__show[hidden], .authw__waiting[hidden] { display: none; }

/* A password field with its own Show/Hide button inside the same box (D-AUTH frames 1, 6a–6c). */
.authw__input { display: flex; align-items: center; border: var(--g-space-4) solid var(--g-color-muted); border-radius: var(--g-radius-input); background: var(--g-color-white); }
.authw__input:has([aria-invalid=true]) { border-color: var(--g-color-error); }
.authw__input input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]) { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; }
.authw__show { flex-shrink: 0; min-height: var(--g-size-touch); min-width: var(--g-size-touch); padding: var(--g-space-8); border-radius: var(--g-radius-input); background: var(--g-color-white); color: var(--g-color-navy); }

/* While the server answers (frames 3, 11, 12): only the held button and "Keep this page open." stay. */
.authw--waiting .authw__card > :not(.authw__form):not(.authw__waiting),
.authw--waiting .authw__form > :not([type=submit]) { display: none; }

/* Buttons and the links that look like them: 48 px primary, 44 px quiet. */
.authw__primary, .authw__quiet { display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: var(--g-radius-button); padding: var(--g-space-8) var(--g-space-16); font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.authw__primary { min-height: var(--g-size-primary); background: var(--g-color-teal); color: var(--g-color-white); box-shadow: var(--g-shadow-raised); text-decoration: none; }
.authw__primary:active { background: var(--g-color-teal-pressed); box-shadow: none; }
.authw__primary:disabled { background: var(--g-color-line); color: var(--g-color-navy); box-shadow: none; cursor: wait; }
.authw__quiet { min-height: var(--g-size-touch); background: var(--g-color-white); color: var(--g-color-navy); text-decoration: underline; text-underline-offset: var(--g-space-4); }

@media (max-width: 390px) {
  .authw { padding-inline: var(--g-space-14); }
  .authw__greeting { gap: var(--g-space-8); }
  .authw__greeting h1 { font-size: var(--g-font-size-heading); }
  .authw__greeting img { width: calc(var(--g-space-32) * 2); height: calc(var(--g-space-48) * 2); }
}