/* Deep Field view styles: auth-admin. Companion to deep-field.css (tokens/components live there).
   Owned by the auth-admin view(s); keep everything token-driven, flat, AA in both themes.

   Sections:
     1. Login  — green brand band atop the login card; live Microsoft button
     2. Onboarding — small wizard helpers (notices, gesture grid)

   (The former Section 3 "Superadmin" moved to deep-field.superadmin.css,
   which owns all .sa-* classes and the #superadmin-tab-body scope.)
*/

/* ===== 1. Login ===================================================== */

/* The card gets a full-bleed green brand band (nav-chrome green in both
   themes), so padding moves from the card onto .login-band/.login-body. */
.login-card { padding: 0; overflow: hidden; }
.login-band { background: var(--green); padding: var(--space-8) var(--space-6); }
.login-band .login-logo { margin-bottom: 0; text-decoration: none; }
.login-band .login-logo-text { color: var(--paper); }
.login-band .login-logo-text span { color: var(--lime); }
.login-body { padding: var(--space-8) var(--space-10) var(--space-10); }

/* deep-field.css ships .login-btn-microsoft as a disabled-looking prototype
   control; in the app it is a live OAuth link — restyle it as a working
   Deep Field secondary button (same shape as the Google button). */
.login-btn-microsoft {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-14);
  cursor: pointer;
}
.login-btn-microsoft:hover { background: var(--panel-2); text-decoration: none; }
.login-btn-microsoft svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 480px) {
  .login-band { padding: var(--space-6) var(--space-5); }
  .login-body { padding: var(--space-6) var(--space-5) var(--space-8); }
}

/* SHORT screens: tighten the card so both sign-in buttons clear the cookie box
 * (D15 follow-up, owner instruction 4 September 2026).
 *
 * WHY HEIGHT AND NOT WIDTH. The reserve added to .login-page in deep-field.css
 * lifts the card as far as the viewport allows, and whether that is far enough
 * is decided by height, not width: at 360x700 the card already clears, and at
 * 360x640 it misses by 39px. A width query would tighten phones that have no
 * problem (390x844) and miss the same 360px phone when it has room. 660px is
 * chosen to sit between the two measured cases — 640 (misses) and 667 (clears)
 * — so 375x667 and 390x844 keep the card exactly as it ships today.
 *
 * It also catches the case a CSS-pixel width cannot see: a 375x667 phone whose
 * browser chrome leaves ~553px of innerHeight is short at that moment and gets
 * the tightening while the toolbars are up, which is when it needs it.
 *
 * WHAT THIS BUYS, MEASURED AT 360x640. The Microsoft button's bottom edge sat
 * 39px below the top of the cookie box. This removes 56px above it — 24 from
 * the brand band's padding, 8 from the logo mark, 8 from the body's top
 * padding, 16 from under the subtitle — clearing it by 17px. Nothing here
 * changes a font size, a button height or a tap target: the two 55px sign-in
 * buttons and the 12px between them are untouched, because shrinking the
 * controls to fit the banner would trade one usability defect for another.
 *
 * 320x568 still does not clear and is not meant to: the card is 624px there
 * against a 257px box on a 568px screen, so no tightening short of gutting the
 * card would do it. It stays reachable by scrolling, which the floor test in
 * tests/e2e-static/login-consent-collision.spec.js pins. */
@media (max-height: 660px) {
  .login-band { padding: var(--space-3) var(--space-5); }
  .login-band .login-logo-icon { width: 40px; height: 40px; border-radius: 11px; }
  .login-body { padding: var(--space-4) var(--space-5) var(--space-8); }
  .login-subtitle { margin-bottom: var(--space-4); }
}

/* ===== 2. Onboarding ================================================ */

/* Soft amber notice used for OAuth-return and gesture nudges. Neutral inset
   ground, amber text via the flipping numeral token: AA in both themes. */
.ob-notice {
  text-align: center;
  color: var(--num-amber);
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  max-width: 420px;
}

/* Wizard gesture picker card (accent border is set inline per gesture). */
.ob-gesture-card {
  appearance: none;
  cursor: pointer;
  text-align: center;
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  font: inherit;
  color: var(--text);
}
.ob-gesture-card:hover { background: var(--panel-2); }