/* Atlas IQ sign-in. Values mirror the real sign-in card: apps/atlas-iq/app/globals.css (:root tokens,
   .auth-shell, .auth-card, .auth-lockup, .auth-heading, .auth-quill, .auth-kicker, .auth-submit, .auth-error)
   and apps/atlas-iq/app/sign-in.css. Small accessibility adjustments: 44px controls, label and placeholder contrast. */
:root {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface2: #fbfaf8;
  --line: #e6e3dc;
  --text: #1b1a17;
  --muted: #6f6b63;
  --accent: #2b7766;
  --accent-ink: #ffffff;
  --danger: oklch(0.58 0.14 25);
  --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--surface));
  --shadow: 0 1px 2px rgba(24, 22, 18, 0.04), 0 8px 24px rgba(24, 22, 18, 0.05);
  --field-line: #8f8a80;
  --font-ui: "DM Sans", Helvetica, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1 { font-family: var(--font-ui); }
.mono { font-family: "IBM Plex Mono", monospace; }

button:focus-visible, input:focus-visible {
  border-color: var(--accent) !important;
  outline: 2px solid color-mix(in oklab, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
::placeholder { color: var(--muted); opacity: 1; }

.auth-shell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100svh; padding: 40px 20px; background: var(--bg); }

.auth-card { width: min(460px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.screen-fade { animation: atlasFade 300ms ease; }
@keyframes atlasFade { from { opacity: 0; } to { opacity: 1; } }

.auth-lockup { display: block; width: 118px; height: 48px; background: var(--text); -webkit-mask: url("../../assets/brand/atlas-iq-mask.png") left center / contain no-repeat; mask: url("../../assets/brand/atlas-iq-mask.png") left center / contain no-repeat; }
.auth-heading { display: flex; align-items: center; gap: 18px; margin-top: 42px; }
.auth-quill { display: block; width: 30px; height: 58px; flex: none; background: var(--accent); -webkit-mask: url("../../assets/brand/atlas-mark-mask.png") center / contain no-repeat; mask: url("../../assets/brand/atlas-mark-mask.png") center / contain no-repeat; }
.auth-kicker { color: var(--accent); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; }
.auth-card h1 { margin: 5px 0 0; font-size: 27px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.auth-card > p { max-width: 370px; margin: 24px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.auth-card form { margin-top: 24px; }
.auth-card form > label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.auth-card input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--surface); font-size: 14px; appearance: none; -webkit-appearance: none; }

.auth-status:empty { display: none; }
.auth-error { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 12px; border: 1px solid color-mix(in oklab, var(--danger) 35%, var(--line)); border-radius: 10px; background: var(--danger-soft); color: var(--text); font-size: 13px; line-height: 1.5; animation: atlasFade 300ms ease; }
.auth-error > span { width: 8px; height: 2px; flex: none; margin-top: 8px; border-radius: 1px; background: var(--danger); }
.auth-error strong { font-weight: 600; }

.auth-submit { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 10px 18px; border: 0; border-radius: 11px; background: var(--accent); color: var(--accent-ink); cursor: pointer; font-size: 14px; font-weight: 600; }
.auth-submit:disabled { opacity: 0.55; cursor: wait; }
.auth-submit:disabled.is-busy { opacity: 0.75; }

.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.auth-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--muted); font-size: 13px; text-decoration: none; border-radius: 6px; }
.auth-links a:hover { color: var(--text); text-decoration: underline; }
.auth-links a:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 45%, transparent); outline-offset: 2px; }

@media (max-width: 480px) {
  .auth-shell { padding: 20px 16px; }
  .auth-card { padding: 24px 20px; }
  .auth-heading { margin-top: 32px; gap: 16px; }
  .auth-card input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .screen-fade, .auth-error { animation: none; } }