/* Sign-in screens (layouts/auth.blade.php): the same card, type and controls as dznir.com/hq/login
   (dznir-landing/hq/admin.css → "Sign-in screens"). Keep the two in step. Light/dark tokens match HQ. 8px grid. */
/* Light/dark colours: theme.css (shared with onboarding) */
.auth-page { font-size: 15px; }
.auth-page .wm__z { color: var(--ink); }
/* The card sits in the middle of the window; the help pill is pinned to the bottom (same space kept top and bottom,
   so the card stays centred and the pill never covers it) */
.auth-page .auth { display: grid; place-items: center; align-content: center; gap: 16px; min-height: 100dvh; padding: 64px 16px calc(64px + var(--safe-b)); }
.auth-page .auth__help { position: fixed; left: 16px; right: 16px; bottom: calc(16px + var(--safe-b)); z-index: 2; margin: 0; color: var(--muted); font-size: 13px; line-height: 20px; text-align: center; } /* plain text, no pill */
/* Still plain text (owner: "not a patch"): no box or edge, the drifting name pills just fade out behind the words */
.auth-page .auth__help { isolation: isolate; }
.auth-page .auth__help::before { content: ""; position: absolute; inset: -24px -16px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--paper) 55%, transparent); }
.auth-page .auth__help a { color: var(--ink); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
/* Short windows (a laptop at 600px, a phone on its side): a pinned help line would sit on the form, so it follows the
   card instead (16px under it), never over a field */
@media (max-height: 820px) {
  .auth-page .auth { padding-bottom: calc(24px + var(--safe-b)); }
  .auth-page .auth__help { position: relative; }
}
@media (max-width: 560px) {
  .auth-page .auth { padding-top: 72px; padding-bottom: calc(24px + var(--safe-b)); } /* below the light/dark button (16px + 40px + 16px), so it never sits on the card */
  .auth-page .auth__help { position: relative; } /* follows the card: pinned, it sat on the main button of a tall form */
}

/* The card */
.auth-page .auth__card { display: grid; gap: 20px; /* 20px between field groups; a label sits 8px above its field */ width: min(560px, 100%); /* 560 (was 440): wider and less tall, owner 28 Oct 2026 */ padding: 32px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 32px 64px -40px var(--shadow); }
.auth-page .auth__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-page .wm--lg { justify-self: start; font-size: 28px; }
.auth-page .auth__aside { margin: 0; color: var(--muted); font-size: 14px; text-align: right; }
.auth-page .auth__aside a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.auth-page .auth__fine { margin: -8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-page .auth__fine a { color: var(--muted); }
.auth-page .auth h1 { margin: 8px 0 0; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.auth-page .auth__lede { margin: -12px 0 0; color: var(--muted); font-size: 15px; }
.auth-page .auth__card > form { display: grid; gap: 16px; }

/* Messages: page-level at the top of the card, field-level under the field */
.auth-page .alert, .auth-page .note { margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.auth-page .alert--ok, .auth-page .note { background: var(--ok-bg); color: var(--ok); }
.auth-page .alert--error { background: var(--err-bg); color: var(--err); }
.auth-page .note--warn { background: var(--warn-bg); color: var(--warn); }
.auth-page .err { margin: -12px 0 0; font-size: 13px; }
.auth-page .hint { margin: -12px 0 0; font-size: 13px; }
.auth-page .hint a { color: var(--ink); }

/* Fields */
.auth-page label.field { gap: 8px; font-size: 14px; }
.auth-page label.field small { font-size: 13px; }
.auth-page .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: -12px; font-size: 14px; font-weight: 600; }
.auth-page .label-row a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); font-size: 13px; font-weight: 600; }
.auth-page .label-row a:hover { color: var(--ink); }
.auth-page :is(input[type=text], input[type=email], input[type=password], input[type=url]) { min-height: 0; height: 48px; padding: 0 16px; border-radius: 999px; font: 500 14px var(--sans); }
.auth-page input:focus, .auth-page .prefix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.auth-page .prefix { border-radius: 999px; }
.auth-page .prefix input { height: 46px; padding-left: 16px; }
.auth-page .prefix > span + input { padding-left: 0; } /* "dznir.com/" and the name read as one address; password fields keep their padding */
.auth-page .prefix > span { padding-left: 12px; font-size: 14px; }
.auth-page .prefix > button:not(.pw-eye) { min-height: 40px; margin-right: 4px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.auth-page input[type=password] { letter-spacing: 0.12em; }

/* "Keep me logged in": HQ's toggle */
.auth-page .switch { min-height: 24px; font-size: 14px; }
.auth-page .switch input { width: 44px; height: 24px; }
.auth-page .switch input::after { top: 2px; left: 2px; width: 20px; height: 20px; }

/* Buttons and links */
.auth-page .btn { min-height: 0; height: 48px; margin-top: 4px; font: 600 14px/1 var(--sans); background: var(--ink); color: var(--on-ink); }
.auth-page .btn:hover { background: var(--accent); color: #111110; }
.auth-page .btn--ghost { margin-top: 0; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.auth-page .btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.auth-page .auth__alt { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.auth-page .auth__alt a, .auth-page .auth__alt button { color: var(--ink); font: 600 14px var(--sans); }
.auth-page .auth__alt button { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
.auth-page .auth__invite { margin: -12px 0 0; }
.auth-page .claim-card { border-radius: 12px; }
.auth-page .pw-rules { margin-top: -12px; }

@media (max-width: 560px) {
  .auth-page .auth__card { padding: 24px; }
  .auth-page .auth h1 { font-size: 24px; }
  .auth-page .auth__aside { font-size: 13px; }
  /* 16px stops iPhones zooming into the field */
  .auth-page :is(input[type=text], input[type=email], input[type=password]) { font-size: 16px; }
  .auth-page .prefix > span { font-size: 16px; }
}

/* Phone: country code + number in one row (same as the dznir.com waitlist form) */
.auth-page .phone-field { display: grid; gap: 8px; }
.auth-page .field-label { margin: 0; font-size: 14px; font-weight: 600; }
.auth-page .field-label small { color: var(--muted); font-size: 13px; font-weight: 500; }
.auth-page .phone-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.auth-page .dial { position: relative; }
.auth-page .dial select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.auth-page .dial__face { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 12px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; /* same height and pill as the number field */ background: var(--card); font: 500 14px var(--sans); white-space: nowrap; transition: border-color 0.15s, box-shadow 0.15s; }
.auth-page .dial__face svg { width: 16px; height: 16px; color: var(--muted); }
.auth-page .dial:focus-within .dial__face { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.auth-page input[type=tel] { min-height: 0; height: 48px; padding: 0 16px; border-radius: 999px; font: 500 14px var(--sans); }
@media (max-width: 560px) { .auth-page input[type=tel], .auth-page .dial__face { font-size: 16px; } }

/* ---- Backdrop behind the sign-in card: everyone's dznir.com/name drifting past, "yours" in brand colour.
   Faded out around the card so the form stays the focus; still for reduced motion. Same on HQ and the app. ---- */
.auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(60% 50% at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(55% 50% at 92% 96%, color-mix(in srgb, #7C5CFF 14%, transparent), transparent 70%); }
.auth-bg__rows { position: absolute; inset: -20% -15%; display: grid; align-content: space-evenly; gap: 16px; transform: rotate(-8deg); /* rows spread over the whole screen, any width */
  -webkit-mask-image: radial-gradient(ellipse 30% 38% at 50% 50%, transparent 40%, #000 95%); mask-image: radial-gradient(ellipse 30% 38% at 50% 50%, transparent 40%, #000 95%); }
.auth-bg__row { display: flex; gap: 12px; width: max-content; animation: auth-drift 90s linear infinite; }
.auth-bg__row:nth-child(even) { animation-direction: reverse; animation-duration: 110s; }
.auth-bg__row:nth-child(3n) { margin-left: -120px; }
.auth-bg__pill { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font: 500 14px var(--sans); white-space: nowrap; } /* full-strength text (readable); the fade around the card keeps it in the background */
.auth-bg__pill i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); opacity: 0.85; }
.auth-bg__pill b { color: var(--ink); font-weight: 600; }
.auth-bg__pill--you { border-color: var(--accent); opacity: 1; box-shadow: 0 8px 24px -12px var(--accent); }
.auth-bg__pill--you b { color: var(--accent-ink); }
@keyframes auth-drift { to { transform: translateX(-50%); } }
/* Hidden until auth-bg.js has placed it (fonts in too), then faded in: placed after the first paint, every pill moved
   (a 0.27 layout shift on phones, 29 Oct 2026). Without JavaScript the <noscript> rule shows it straight away. */
.auth-bg__rows { visibility: hidden; opacity: 0; transition: opacity 0.4s ease; }
.auth-bg.is-ready .auth-bg__rows { visibility: visible; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .auth-bg__row { animation: none; } }
/* Phones: the rows fill the whole height and the card's band is cut out (auth-bg.js measures the card), so the names
   sit in the empty space above and below it instead of peeking out at its sides; the top bar (theme switch) and the
   help line at the bottom stay clear */
@media (max-width: 560px) {
  .auth-bg.is-banded { --fade: 24px;
    -webkit-mask-image: linear-gradient(transparent 48px, #000 72px, #000 calc(var(--card-top) - var(--fade)), transparent var(--card-top), transparent var(--card-bottom), #000 calc(var(--card-bottom) + var(--fade)), #000 calc(100% - 80px), transparent calc(100% - 56px));
    mask-image: linear-gradient(transparent 48px, #000 72px, #000 calc(var(--card-top) - var(--fade)), transparent var(--card-top), transparent var(--card-bottom), #000 calc(var(--card-bottom) + var(--fade)), #000 calc(100% - 80px), transparent calc(100% - 56px)); }
  /* the soft glows move onto the page itself, so the cut-outs above don't clip them */
  .auth-bg.is-banded { background: none; }
  body:has(.auth-bg.is-banded) main.auth { background: radial-gradient(60% 50% at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(55% 50% at 92% 96%, color-mix(in srgb, #7C5CFF 14%, transparent), transparent 70%); }
  .auth-bg.is-banded .auth-bg__rows { inset: -8% -60%; align-content: space-evenly; -webkit-mask-image: none; mask-image: none; }
}
.auth-page .auth { position: relative; z-index: 1; }
.auth-page .hint:empty { display: none; }

/* The pay screen after sign-up from dznir.com/pricing (billing/pay.blade.php) */
.auth-page .pay__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-page .pay__opt { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.auth-page .pay__opt[aria-checked="true"] { border: 2px solid var(--ink); padding: 15px; }
.auth-page .pay__opt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.auth-page .pay__opt-name small { padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 12px; line-height: 20px; }
.auth-page .pay__opt b { font-size: 24px; font-variant-numeric: tabular-nums; }
.auth-page .pay__opt-sub { color: var(--muted); font-size: 13px; }
.auth-page .pay__note { margin-top: -8px; }
.auth-page .pay__msg { margin: -8px 0 0; color: var(--err); font-size: 14px; font-weight: 600; }
.auth-page .pay__msg--ok { color: var(--ok); }
@media (max-width: 360px) { .auth-page .pay__opts { grid-template-columns: 1fr; } }

/* Sign-up: Email and Phone share a row from 600px up (each keeps its own error under it) */
.auth-page .auth__pair { display: grid; gap: 20px; }
.auth-page .auth__cell { display: grid; gap: 20px; align-content: start; }
@media (min-width: 600px) {
  .auth-page .auth__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; } /* the phone row needs the code box too */
  .auth-page .auth__pair .phone-row { grid-template-columns: 88px minmax(0, 1fr); }
}