/* Sign-in screens, passkeys and the setup wizard. Builds on tasktracker.css. */

.auth-notice {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--ok-wash, #e8f4ec);
  color: var(--ink);
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 13px;
}

.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}

.auth-passkey {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.auth-errors {
  margin: 0;
  padding-left: 18px;
}

/* Smaller screens: the art panel steps aside and the form takes the page. */
@media (max-width: 860px) {
  .auth {
    grid-template-columns: 1fr;
  }

  .auth-art {
    display: none;
  }
}

/* Sign-in methods on My preferences */
.signin-methods {
  display: grid;
  gap: 10px;
}

.signin-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.signin-method-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}

.signin-method-text small {
  color: var(--ink-3);
}

.signin-method form {
  margin: 0;
}

.passkey-rename {
  display: flex;
  gap: 6px;
}

.passkey-rename .input {
  width: 180px;
}

.passkey-name {
  max-width: 260px;
}

/* The business list in the sidebar switcher */
.org-menu form {
  margin: 0;
}

.org-menu .menu-item small {
  display: block;
}

/* Setup wizard steps: done and current outrank the plain step colour. */
.pf-steps li.pf-step-on {
  color: var(--carbon-dark);
}

.pf-steps li.pf-step-done {
  color: var(--ok);
}

/* The sign-in panel: the brand mark, over a photo of the work, darkened so the ticket and text stay readable. */
.auth-art {
  background:
    linear-gradient(180deg, rgb(19 28 51 / 0.82) 0%, rgb(19 28 51 / 0.55) 45%, rgb(19 28 51 / 0.9) 100%),
    url("/assets/brand/sign-in-photo-ed107889.webp") center 30% / cover no-repeat,
    var(--night);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* QuickBooks settings: Intuit's own logo, at the size their brand rules allow. */
.qb-logo {
  display: block;
  width: 180px;
  height: auto;
}