/* Phone layout for /login.html (loaded at (max-width: 760px)). */
/* On a phone the form sat vertically centred under a lone glyph, so the
   keyboard pushed it around and half the first screen was empty. Here the
   card starts right under a full wordmark header, the sign-in / create
   tabs and every button are full-height tap targets, and the 11-12px mono
   labels and "Forgot?" link are brought up to readable sizes. */

/* Header row: brand.css hides the wordmark on phones because the site nav
   is crowded; this page has no nav, just the mark and the floating bell. */
.back { padding: 14px 0 6px; }
.back .mark .word { display: inline; font-size: .95rem; }
.back .mark svg { width: 30px; height: 30px; }
/* The bell floats at top:12px right:12px; keep the header row clear of it. */
.back .shell { padding-right: 64px; }

/* Card starts at the top instead of the middle of a 100vh column. The
   page's own inline override (.auth-wrap{margin:48px auto;padding:0 20px})
   comes after the main styles at equal specificity, and this sheet loads
   after it, so plain selectors win here. */
.auth-wrap { place-items: start center; margin: 14px auto 32px; padding: 0 16px; }
.rail { margin-bottom: 18px; }
.rail h1 { font-size: 28px; text-wrap: balance; }
.auth-card { padding: 20px 18px; }

/* Tabs were 35px tall. */
.tabs { margin-bottom: 20px; }
.tabs button { min-height: 44px; font-size: .95rem; }

label.field { font-size: .75rem; }
/* "Forgot?" was a 12px link on a 14px line; give it a thumb-sized hit area
   without moving the label row. */
.row-head a { font-size: .82rem; padding: 12px 0 12px 16px; margin: -12px 0; }
.pw-hint { font-size: .82rem; }

/* Inputs: brand.css already sets 16px on phones (no iOS zoom); make them a
   comfortable 48px and match the select. */
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], #heard { min-height: 48px; }

#submit, .oauth button, #inboxContinue { min-height: 50px; font-size: 1rem; }
.toggle-link { min-height: 44px; font-size: .92rem; }
.msg { font-size: .92rem; }
.or { margin: 18px 0; font-size: .75rem; }