/* Authentication owns the viewport; only overflowing form content can scroll.
   Keep controls readable rather than scaling the whole screen down. */
@media (max-width: 1180px), (max-height: 600px) {
  body:has(.auth-layout), body:has(.terminal-pin-shell), body:has(.api-lock-shell) { overflow: hidden; }
  main.auth-layout, .api-login-shell:is(.terminal-pin-shell, .api-lock-shell) {
    position: fixed; inset: var(--auth-viewport-top, 0px) 0 auto;
    height: var(--auth-viewport-height, 100dvh); min-height: 0;
    overflow: hidden; box-sizing: border-box;
  }
  .auth-layout .auth-page {
    height: 100%; min-height: 0; width: min(520px, calc(100% - 32px));
    padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
    grid-template-rows: auto minmax(0, 1fr) auto; box-sizing: border-box;
  }
  .auth-layout::before, .auth-layout .auth-story { display: none; }
  .auth-layout .auth-brand { color: var(--color-text); }
  .auth-layout .auth-topbar { min-height: 56px; gap: var(--space-2); }
  .auth-layout .auth-stage {
    display: flex; align-self: stretch; align-items: flex-start; min-height: 0;
    padding-top: clamp(var(--space-2), calc((100svh - 650px) / 2), 96px);
    padding-bottom: var(--space-2); overflow: hidden;
  }
  .auth-layout .auth-form-area {
    width: 100%; max-height: 100%; min-height: 0; overflow: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
    padding: var(--space-1); box-sizing: border-box; scroll-padding-block: var(--space-3);
  }
  .auth-layout .auth-form { gap: var(--space-3); }
  .auth-layout .auth-form .auth-form { gap: var(--space-2); }
  .auth-layout .auth-form .setup-field { gap: var(--space-1); }
  .auth-layout .auth-form .setup-field input,
  .auth-layout .auth-form .setup-field select { height: var(--control-md); font-size: 16px; }
  .auth-layout .auth-form .google-signin { gap: var(--space-2); }
  .auth-layout .auth-form .signup-fields { gap: var(--space-2); }
  .auth-layout .auth-form p { font-size: var(--text-sm); }
  .auth-layout .auth-form h1 { font-size: var(--text-xl); }
  .auth-layout .auth-footer { min-height: 44px; padding: 0; justify-content: center; }
  .auth-layout .auth-form .setup-branches { display: grid; gap: var(--space-2); }
  .auth-layout .auth-form .auth-branch { min-height: 64px; }
  .api-login-shell:is(.terminal-pin-shell, .api-lock-shell) { padding: 0; background: var(--color-surface); }
  .api-login-shell .api-login-card.terminal-pin-card {
    width: min(520px, 100%); height: 100%; max-height: 100%; min-height: 0;
    align-content: safe center; border: 0; border-radius: 0; overflow: auto;
    padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    overscroll-behavior: contain; box-sizing: border-box;
  }
  .api-login-shell .terminal-pin-card .pin-input input { font-size: 24px; min-height: 44px; }
  .api-login-shell .terminal-pin-card .pin-pad > button { min-height: 56px; }
  .api-login-shell .terminal-pin-card .terminal-pin-submit { min-height: 52px; }
}
@media (max-width: 1180px) and (max-height: 740px) {
  .auth-layout .auth-form .setup-field > small { font-size: var(--text-xs); }
  /* The registration form already contains its legal links. */
  .auth-layout:has(.business-terms) .auth-footer { display: none; }
}
@media (max-height: 440px) and (min-width: 600px) {
  .api-login-shell .api-login-card.terminal-pin-card { width: min(760px, 100%); align-content: center; height: 100%; }
}
@media (max-width: 1180px) and (max-height: 620px) {
  .auth-layout .business-setup > form:has(> .business-terms) { grid-template-columns: minmax(0, 1fr); }
  .auth-layout .business-setup > form:has(> .business-terms) > * { grid-column: 1 / -1; }
  .auth-layout .business-setup > form:has(> .business-terms):has(input[autocomplete="email"]) > .auth-field:has(input:is([autocomplete="name"], [autocomplete="email"])) { grid-column: auto; }
}

/* Reserve the same row before and after the Google iframe arrives. */
.google-signin .google-button,
.google-signin .google-signin-status { height: 44px; min-height: 44px; margin: 0; box-sizing: border-box; }
.google-signin .google-button { align-items: center; }