/* Phone auth screens while the keyboard is open (v1).

   Two separate causes, both measured on the create-account screen:

   1. iOS zooms the page when a focused input is smaller than 16px, so tapping a field
      blew the whole card up and pushed the next one off screen. 15px was inherited from
      app.css, so the inputs are pinned at 16px on phone widths.
   2. The iOS shell runs Capacitor's Keyboard plugin in resize:"body" mode, which pins
      document.body to (screen height - keyboard height). The card keeps its full-screen
      margins inside that clamped box, so the password fields sit below the clamp and the
      page cannot scroll to them.

   The data-keyboard attribute is set by auth-keyboard-v1.js only inside the app, so the
   open web never sees any of the keyboard rules. */

@media (max-width: 820px) {
  .mtv-auth__form input:not([type=checkbox]) { font-size: 16px; }
}

html[data-keyboard="open"] body { height: auto !important; }

@media (max-width: 820px) {
  html[data-keyboard="open"] .mtv-auth {
    margin-top: 14px;
    margin-bottom: calc(var(--mtv-keyboard, 0px) + 28px);
    padding: 18px 16px 22px;
    border-radius: 22px;
  }

  html[data-keyboard="open"] .mtv-auth__logo,
  html[data-keyboard="open"] .mtv-auth__sub,
  html[data-keyboard="open"] .mtv-auth__form small { display: none; }

  html[data-keyboard="open"] .mtv-auth h1 { font-size: 24px; margin: 0 0 8px; }

  html[data-keyboard="open"] .mtv-auth__form { gap: 10px; }

  html[data-keyboard="open"] .mtv-auth__form label { gap: 4px; }

  html[data-keyboard="open"] .mtv-auth__form input:not([type=checkbox]) { padding: 11px 14px; }

  html[data-keyboard="open"] .mtv-auth__or { margin: 14px 0 10px; }

  html[data-keyboard="open"] .mtv-auth__alt { margin-top: 12px; }
}