/* Sign-in family (UI pass, round 2): login, magic-link confirm, link expired, verify-2fa,
   accept-invite, and the practice copy's sign-in / link-confirm / bad link. Loaded after
   app.css, which still carries two older .auth-* blocks; everything here is scoped under
   .auth-page so it wins over both without touching them.
   One white card centred on paper, Inter, ink text, one orange primary, 44px controls on a
   phone. .auth-page is <body>: its padding-top keeps the practice banner's height (that
   rule is `html body`, which this class would otherwise beat), and box-sizing is
   border-box, so 100dvh includes it: no scroll.
   Contrast (on white): heading #161513 17.9:1, body #57524C 7.6:1, notes #6E685F 5.3:1,
   error #B3261E on #FBE9E7 5.6:1, success #1F7A4C on #E6F2EB 4.9:1. */

.auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--practice-h, 0px) + 32px) 16px 32px; background: var(--color-bg); color: var(--color-text-primary); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.auth-page .auth-card { width: 100%; max-width: 400px; padding: 32px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(38, 30, 20, .05), 0 8px 24px -12px rgba(38, 30, 20, .14); }

/* brand row: the same TPT chip as the sidebar */
.auth-page .auth-logo { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin: 0 0 24px; }
.auth-page .auth-logo-mark { width: auto; height: auto; display: inline-block; margin: 0; padding: 4px 8px; border-radius: 5px; background: var(--color-gold); color: var(--color-on-orange); font-size: 12px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; }
.auth-page .auth-logo-text { font-size: 14px; font-weight: 600; color: var(--color-text-primary); letter-spacing: 0; text-transform: none; }

.auth-page .auth-card h1, .auth-page .auth-heading { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-align: center; color: var(--color-text-primary); }
.auth-page .auth-subtitle, .auth-page .auth-subheading { margin: 0 0 24px; font-size: 14.5px; line-height: 1.55; text-align: center; color: var(--color-text-secondary); }
.auth-page .auth-subtitle b { color: var(--color-text-primary); font-weight: 600; }
.auth-page .auth-note, .auth-page .auth-foot { margin: 20px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--color-text-muted); }

/* fields and the one button */
.auth-page .form-group { margin-bottom: 16px; }
.auth-page .form-label { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; }
.auth-page .form-input { height: 44px; padding: 0 12px; font-size: 16px; border-radius: 8px; }
.auth-page .form-input:disabled { background: var(--color-bg); color: var(--color-text-secondary); border-color: var(--color-border); -webkit-text-fill-color: var(--color-text-secondary); opacity: 1; }
.auth-page .btn { height: 44px; min-height: 44px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.auth-page .btn-full, .auth-page form .btn-primary { width: 100%; justify-content: center; }
.auth-page form .btn-primary { margin-top: 4px; }

/* notices: error (had no CSS before), danger (verify-2fa / accept-invite), success */
.auth-page .alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 14px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; line-height: 1.5; text-align: left; }
.auth-page .alert::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: currentColor; -webkit-mask: var(--auth-alert-ic) center / 16px no-repeat; mask: var(--auth-alert-ic) center / 16px no-repeat; }
.auth-page .alert-error, .auth-page .alert-danger { background: var(--color-danger-bg); border-color: var(--color-danger-line); color: var(--color-danger); --auth-alert-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm-.9 4h1.8v5H7.1zm0 6.3h1.8v1.8H7.1z'/%3E%3C/svg%3E"); }
.auth-page .alert-success { background: var(--color-success-bg); border-color: var(--color-success-line); color: var(--color-success-ink); --auth-alert-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.6 5.4L7 10.6 4.4 8l1.2-1.2L7 8.2l3.4-3.9z'/%3E%3C/svg%3E"); }

@media (max-width: 480px) {
  .auth-page { justify-content: flex-start; padding: calc(var(--practice-h, 0px) + 24px) 16px 24px; }
  .auth-page .auth-card { padding: 24px 20px; }
  .auth-page .auth-card h1, .auth-page .auth-heading { font-size: 20px; }
}

/* ── Clerk sign-in: TPT's real logo, light and dark (feat/clerk-signin-design) ────────────────
   The staff and client sign-in pages, the "Signing you in…" page, and every refusal page carry
   `auth-branded` on <body>. The CRM itself has no dark mode; for a device set to dark these pages
   take the sidebar's ink palette (app.css --color-ink-*), so they still read as the CRM. The older
   sign-in pages (emailed link, authenticator code) do not carry the class and are unchanged.
   Dark contrast (on #1A1917): heading #F2EFEA 15.6:1, body #C9C4BC 10.4:1, notes #A8A39C 7.2:1,
   error #FFB4AB on #3A1714 9.6:1, success #9AD9B4 on #12291D 9.7:1. */
.auth-page.auth-branded { color-scheme: light; }
.auth-page .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 28px; }
.auth-page .auth-brand img { display: block; width: 200px; max-width: 100%; height: auto; }
.auth-page .auth-brand-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.auth-page.auth-branded .auth-card { max-width: 420px; padding: 40px 36px 32px; }
.auth-page.auth-branded .auth-card h1 { font-size: 24px; }
.auth-page.auth-branded .alert { margin-bottom: 24px; }
.auth-page .btn .auth-ms { flex: none; width: 18px; height: 18px; padding: 2px; margin-right: 10px; border-radius: 3px; background: #fff; }
.auth-page .auth-steps { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); text-align: left; }
.auth-page .auth-steps b { color: var(--color-text-primary); font-weight: 600; }
.auth-page.auth-branded .auth-subtitle, .auth-page.auth-branded .auth-foot { text-wrap: pretty; }
.auth-page.auth-branded .auth-card h1 { text-wrap: balance; }
.auth-page .auth-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth-page .btn-secondary-link { display: block; margin: 14px auto 0; font-size: 14px; font-weight: 600; text-align: center; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.auth-page .btn:focus-visible, .auth-page .btn-secondary-link:focus-visible { outline: none; box-shadow: var(--color-ring); }
/* "Signing you in…": a quiet spinner, still for anyone who asks for less motion. */
.auth-page .auth-spinner { width: 28px; height: 28px; margin: 4px auto 20px; border: 3px solid var(--color-border); border-top-color: var(--color-gold); border-radius: 50%; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-page .auth-spinner { animation: none; border-top-color: var(--color-border); border-right-color: var(--color-gold); } }

@media (prefers-color-scheme: dark) {
  .auth-page.auth-branded {
    color-scheme: dark;
    --color-bg: #0E0E0D; --color-surface: #1A1917; --color-border: rgba(242,239,234,0.12); --color-border-strong: rgba(242,239,234,0.22);
    --color-text-primary: #F2EFEA; --color-text-secondary: #C9C4BC; --color-text-muted: #A8A39C;
    --color-danger: #FFB4AB; --color-danger-bg: #3A1714; --color-danger-line: #6B2A24;
    --color-success-ink: #9AD9B4; --color-success-bg: #12291D; --color-success-line: #24523A;
  }
  .auth-page.auth-branded .auth-card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); }
  .auth-page.auth-branded .form-input { background: var(--color-ink-800); color: var(--color-text-primary); border-color: var(--color-border-strong); }
}

@media (max-width: 480px) {
  .auth-page.auth-branded { justify-content: center; }
  .auth-page.auth-branded .auth-card { padding: 32px 20px 24px; }
  .auth-page .auth-brand { margin-bottom: 24px; }
  .auth-page .auth-brand img { width: 172px; }
  .auth-page.auth-branded .auth-card h1 { font-size: 21px; }
}

/* ── The client consent page (views/portal/consent.ejs): a wider card, the wording in a box that
   scrolls on its own, and the two answers as plain buttons. ── */
.auth-page.auth-branded .auth-card.auth-consent { max-width: 560px; }
.auth-page .auth-consent-text { max-height: 46vh; overflow-y: auto; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); font-size: 14.5px; line-height: 1.6; color: var(--color-text-primary); text-align: left; }
.auth-page .auth-consent-text p { margin: 0 0 10px; }
.auth-page .auth-consent-text ul { margin: 0 0 10px; padding-left: 20px; }
.auth-page .auth-consent-text li { margin: 0 0 4px; }
.auth-page .auth-consent-text:focus-visible { outline: none; box-shadow: var(--color-ring); }
.auth-page button.btn-secondary-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.auth-page .auth-consent-out button { font-weight: 500; font-size: 13px; color: var(--color-text-muted); }