/* 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); }
}

/* ===== 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); }