/* login-lyrc.css - LYRC token skin for login.html (sign in / create account).
 *
 * Visual layer only. Every rule is scoped under body.lyrc-app and only
 * recolours / re-radiuses / re-fonts the page's existing classes. No layout
 * geometry (heights, paddings, widths, order) changes, so nothing moves.
 * Linked LAST among stylesheets so it wins over the page's inline <style>.
 *
 * Rules applied (lyrc-design-system.json): Inter only; text 100/70/50/30%;
 * one blue for anything interactive; no gradients on controls; no radial
 * glows on static backgrounds; shadows only on floating things; buttons and
 * inputs 6px, cards 8px, panels 12px; transitions use the three tokens.
 */

/* html[data-portal] beats portal-themes.css's ambient radial wash. */
html[data-portal] body.lyrc-app,
body.lyrc-app {
  background: var(--cf-canvas);
  color: var(--cf-text);
  font-family: var(--cf-font);
}
body.lyrc-app :is(.cf-shell, .cf-check-overlay) a { color: var(--cf-accent); transition: color var(--cf-t-fast); }
body.lyrc-app :is(.cf-shell, .cf-check-overlay) a:hover { color: var(--cf-accent-hover); }
body.lyrc-app input::placeholder { color: var(--cf-text-4); }

/* Static background: no drifting radial glows. */
body.lyrc-app .cf-bg { display: none; }

/* ---------- Header ---------- */
body.lyrc-app .cf-brand img,
body.lyrc-app .cf-card-brand img { border-radius: var(--cf-r-card); }
/* Wordmark: Instrument Serif italic -> Inter bold (one-font rule). */
body.lyrc-app .cf-brand-name,
body.lyrc-app .cf-card-brand span {
  font-family: var(--cf-font);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cf-text);
}
/* Line boxes pinned to the old serif's height so the card does not shift. */
body.lyrc-app .cf-brand-name { font-size: 20px; line-height: 32px; }
body.lyrc-app .cf-card-brand span { font-size: 20px; line-height: 33px; }

body.lyrc-app .cf-toggle-btn {
  border-radius: var(--cf-r-button);
  border: 1px solid var(--cf-border);
  background: var(--cf-surface);
  color: var(--cf-text);
  font-weight: 600;
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast);
}
body.lyrc-app .cf-toggle-btn:hover { background: var(--cf-hover); border-color: var(--cf-border-strong); }
body.lyrc-app .cf-divider { background: var(--cf-border-subtle); }

/* ---------- Card (flat panel, not floating) ---------- */
body.lyrc-app .cf-card {
  background: var(--cf-panel);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-panel);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.lyrc-app .cf-title { color: var(--cf-text); font-weight: 700; }
body.lyrc-app .cf-sub { color: var(--cf-text-3); }

body.lyrc-app .cf-benefits {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
}
body.lyrc-app .cf-benefits-row,
body.lyrc-app .cf-benefits--trust { color: var(--cf-text-2); }
body.lyrc-app .cf-benefits-row strong,
body.lyrc-app .cf-benefits--trust strong { color: var(--cf-text); font-weight: 600; }
body.lyrc-app .cf-benefits-ic { background: var(--cf-accent); color: var(--cf-text); box-shadow: none; }

/* ---------- Google button (secondary: flat surface + border) ---------- */
body.lyrc-app .cf-google {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  color: var(--cf-text);
  font-weight: 600;
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast), opacity var(--cf-t-fast);
}
body.lyrc-app .cf-google:hover { background: var(--cf-hover); border-color: var(--cf-border-strong); }
body.lyrc-app .cf-google:focus-visible { outline: none; box-shadow: var(--cf-focus); }
/* CfKit.busy() spinner on the dark surface: keep it readable. */
body.lyrc-app .cf-google.cfk-btn-busy { opacity: 1; }

body.lyrc-app .cf-or { color: var(--cf-text-3); font-weight: 600; }
body.lyrc-app .cf-or::before,
body.lyrc-app .cf-or::after { background: var(--cf-border); }

/* ---------- Form ---------- */
body.lyrc-app .cf-field { color: var(--cf-text-3); font-weight: 600; }
body.lyrc-app .cf-field input {
  border-radius: var(--cf-r-button);
  background: var(--cf-input);
  border: 1px solid var(--cf-border);
  color: var(--cf-text);
  transition: border-color var(--cf-t-fast), box-shadow var(--cf-t-fast);
}
body.lyrc-app .cf-field input:hover { border-color: var(--cf-border-strong); }
body.lyrc-app .cf-field input:focus { border-color: var(--cf-accent) !important; box-shadow: var(--cf-focus); }
/* Errors are status: pink border + text, never a control colour. */
body.lyrc-app .cf-field input.is-invalid { border-color: var(--cf-pink) !important; }
body.lyrc-app .cf-field-err { color: var(--cf-pink); }

body.lyrc-app .cf-err {
  border-radius: var(--cf-r-card);
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.32);
  color: var(--cf-text);
}
body.lyrc-app .cf-ok {
  border-radius: var(--cf-r-card);
  background: var(--cf-accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.32);
  color: var(--cf-text);
}

/* Primary CTA: flat accent, no glow. */
body.lyrc-app .cf-cta {
  border-radius: var(--cf-r-button);
  background: var(--cf-accent);
  color: var(--cf-text);
  font-weight: 600;
  box-shadow: none;
  transition: background var(--cf-t-fast), transform var(--cf-t-fast), opacity var(--cf-t-fast);
}
body.lyrc-app .cf-cta:hover { background: var(--cf-accent-hover); box-shadow: none; }
body.lyrc-app .cf-cta:active { background: var(--cf-accent-active); }
body.lyrc-app .cf-cta:focus-visible { outline: none; box-shadow: var(--cf-focus); }
body.lyrc-app .cf-cta:disabled { opacity: 0.85; }
body.lyrc-app .cf-spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: var(--cf-text); }

body.lyrc-app .cf-switch-line { color: var(--cf-text-3); }
body.lyrc-app .cf-switch-btn,
body.lyrc-app .cf-forgot-btn:hover { color: var(--cf-accent); transition: color var(--cf-t-fast); }
body.lyrc-app .cf-switch-btn { font-weight: 600; }
body.lyrc-app .cf-switch-btn:hover { color: var(--cf-accent-hover); }
body.lyrc-app .cf-forgot-btn { color: var(--cf-text-2); transition: color var(--cf-t-fast); }
body.lyrc-app :is(.cf-switch-btn, .cf-forgot-btn, .cf-toggle-btn):focus-visible { outline: none; box-shadow: var(--cf-focus); border-radius: var(--cf-r-button); }

body.lyrc-app .cf-terms { color: var(--cf-text-4); }
body.lyrc-app .cf-terms a { color: var(--cf-text-2); }
body.lyrc-app .cf-terms a:hover { color: var(--cf-accent); }
body.lyrc-app .cf-foot { color: var(--cf-text-4); }
body.lyrc-app .cf-foot a { color: var(--cf-text-3); }
body.lyrc-app .cf-foot a:hover { color: var(--cf-text); }

/* ---------- "Checking secure sign-in" overlay (also the submit overlay) ----------
   Same motion (beat pulse + scan line + JS-driven fill height), recoloured:
   single blue, no purple, no gradient fill, Inter label. */
@keyframes lyrcLoginBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
body.lyrc-app .cf-check-overlay { background: var(--cf-bg); }
body.lyrc-app .cf-check-box {
  border-radius: var(--cf-r-panel);
  border: 1.5px solid var(--cf-accent);
  background: var(--cf-surface);
  animation: lyrcLoginBeat 1s ease-in-out infinite;
}
body.lyrc-app .cf-check-fill { background: var(--cf-accent); }
body.lyrc-app .cf-check-scan { background: var(--cf-text); box-shadow: none; }
body.lyrc-app .cf-check-label {
  font-family: var(--cf-font);
  font-size: var(--cf-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cf-text-2);
}

@media (prefers-reduced-motion: reduce) {
  body.lyrc-app .cf-check-box { animation: none; }
}