/* auth.css — the sign-in page (auth.html) on top of the kit's site.css
   (GENERATED from limoaudio-web; never edit that one here). One quiet centred
   column: family mark + wordmark, the host's domain, a card with the two
   sign-in buttons, and a way back. */
.auth-body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.auth { width: min(100%, 400px); text-align: center; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 30px; color: var(--ink); text-decoration: none; }
.auth-logo { display: block; width: 28px; height: 28px; }
.auth-logo svg { width: 28px; height: 28px; display: block; }
.auth-domain { margin-top: 8px; font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.auth-card { margin-top: 28px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-alt); }
.auth-card h1 { font-size: 18px; font-weight: 400; color: var(--ink-2); }
/* Under the title: the one account every Limo tool shares. */
.auth-lede { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.auth-notice { margin-top: 14px; text-align: left; }
.auth-actions { display: grid; gap: 10px; margin-top: 20px; }
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 16px; font: 500 15px/1 var(--font); border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.auth-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.auth-ico svg { width: 18px; height: 18px; display: block; }
.auth-btn-google { background: #fff; color: #1d1d1f; border-color: var(--line-2); }
.auth-btn-google:hover { border-color: var(--ink); }
.auth-btn-apple { background: #000; color: #fff; }
.auth-btn-apple:hover { background: #222; }
.auth-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.auth-legal { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.auth-legal a { color: var(--ink-2); }
.auth-optin { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.auth-optin input { margin-top: 3px; }
.auth-back { margin-top: 22px; font-size: 14px; }
/* The terms card (js/modules/terms-card.js): the key points, then the one box that unlocks the button. */
.auth-terms-head { margin-top: 18px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.auth-terms-points { margin: 10px 0 0; padding-left: 18px; text-align: left; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.auth-terms-points li + li { margin-top: 6px; }
.auth-terms-points strong { color: var(--ink); font-weight: 500; }
.auth-accept { text-align: left; font-size: 14px; color: var(--ink); }
/* Dark: the black Apple button needs an edge against the near-black card. */
:root[data-theme="dark"] .auth-btn-apple { border-color: var(--line-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-btn-apple { border-color: var(--line-2); }
}

/* --- Passwordless email sign-in ------------------------------------------
   The third way in, for people with neither a Google nor an Apple account.
   Only the BUTTONS live here; the address/code panel carries its own scoped
   styles (js/modules/email-auth-ui.js), so one implementation serves both this
   page and the in-app login screen. */
.auth-btn-email { background: transparent; color: var(--ink); border-color: var(--line-2); }
.auth-btn-email:hover { border-color: var(--ink); }
/* The submit inside the panel — the one filled button on the card. */
.auth-btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.auth-btn-primary:hover { filter: brightness(1.15); }
.auth-btn-primary:disabled { opacity: 0.6; cursor: default; filter: none; }
/* Steered here from the email panel: "use Google instead". */
.auth-btn.is-suggested { outline: 2px solid var(--acc); outline-offset: 2px; }