/*
 * Self-hosted login page stylesheet (LoginView / html/login.php).
 * Standalone by design: the login page is a pre-auth document with its
 * own head and does not load app.css - it loads tokens.css (the shared
 * design-token source; its own parallel token block was folded there)
 * followed by this file. Type and component styling are a subset of
 * the PracticeCFO design system (the practicecfo-design kit, Brand
 * Standard June 2026): orange is the ONLY accent and appears on the
 * primary action; white inputs with warm hairline borders; flat warm
 * surfaces, near-zero shadows; Lato is the only typeface (Bold
 * headings, Regular body).
 */

/* ---------------------------------------------------- self-hosted fonts */
@font-face {
  font-family: "Lato";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Lato-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/Lato-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/Lato-Bold.woff2") format("woff2");
}

/* -------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The hidden attribute must beat component display rules (the UA
   stylesheet's display:none loses to any authored display value) */
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: #FFFFFF;
  /* Grayscale antialiasing per the design system base - macOS subpixel
     rendering (the default) draws glyphs visibly heavier than the comp */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin: 0;
}
a { color: #2B2723; }

/* ---------------------------------------------------- split layout */
/* Brand panel left (0.82fr), auth card right (1fr) - single column on
   small screens with a shortened brand band on top */
.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.82fr 1fr;
}
@media (max-width: 840px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { min-height: 200px; }
}

/* ---------------------------------------------------- brand panel */
.login-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #FAF8F4 0%, #EFEAE0 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
}
/* Dotted motif accent, faded toward the top-right corner */
.login-dots {
  position: absolute;
  right: 48px;
  top: 20px;
  width: 150px;
  height: 108px;
  opacity: 0.7;
  background-image:
    radial-gradient(#CBC5BA 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(45deg, transparent 30%, #000);
  mask-image: linear-gradient(45deg, transparent 30%, #000);
}
.login-brand img { height: 53px; margin-bottom: 44px; align-self: start; }
.login-brand h2 {
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  font-weight: 700;
  /* Cap the measure so the headline breaks after "dental" (per the
     comp) at any viewport width - unconstrained, the wrap point
     drifts with the panel width. Tuned to Lato metrics: the first
     line needs ~339px and gains "financial" at ~480px, so 420px
     pins the break after "dental" */
  max-width: 420px;
}
.login-brand h2 span { color: var(--color-accent); }
.login-brand p {
  color: var(--color-text);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 400px;
  margin: 18px 0 0;
}
.login-rule {
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  margin: 30px 0 18px;
}
.login-help { color: var(--color-text-muted); font-size: 14.5px; }
.login-help a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

/* ------------------------------------------------------- auth card */
.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px;
  width: 100%;
  background: #FFFFFF;
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.03);
}
@media (max-width: 840px) {
  .login-card { border-left: none; box-shadow: none; }
}
.login-card-inner { width: 100%; max-width: 420px; margin: 0 auto; }
.login-card h3 { font-size: 30px; margin-bottom: 22px; font-weight: 700; }
.login-sub { margin: 0 0 24px; font-size: 15.5px; }
/* A sub-line directly under a heading tucks up close to it (the wide
   heading margin is sized for headings that sit alone on content) */
.login-card h3 + .login-sub { margin-top: -16px; }

/* ------------------------------------------------------ social buttons */
.login-social { display: flex; flex-direction: column; gap: 10px; }

/* Magic-link row: the help icon overlays the button (a button cannot
   nest inside a button, so the icon is a positioned sibling that opens
   the what-is-a-magic-link modal). It sits just past the right edge of
   the centered 210px label column so it reads as attached to the
   label text rather than floating at the control's far edge */
.login-magic-wrap { position: relative; }
.login-magic-wrap .pc-social-btn { width: 100%; }
.login-help-icon {
  position: absolute;
  left: calc(50% + 100px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 7px;
  /* Quieter than the mail icon: lighter ink and a smaller mark, so
     the affordance is discoverable without competing with the label */
  color: #B3ACA1;
  cursor: pointer;
}
.login-help-icon svg { width: 17px; height: 17px; }
.login-help-icon:hover { color: var(--color-ink); }
.pc-social-btn {
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  color: #3C4043;
  height: 46px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: none;
}
.pc-social-btn:hover { background: #FAF8F4; }
.pc-social-btn > span {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 210px;
  white-space: nowrap;
}
.pc-social-btn svg { flex-shrink: 0; }
/* Every brand mark occupies the same 20px layout slot. Apple (23px)
   and LinkedIn (25px) render in larger boxes to compensate for the
   internal margins their artwork carries, so centered negative
   margins absorb the overflow - keeping glyph centers and label
   starts aligned down the whole stack */
.pc-social-btn svg[width="23"] { margin: 0 -1.5px; }
.pc-social-btn svg[width="25"] { margin: 0 -2.5px; }

/* Section heading between the delegated identity providers and the
   platform's own email-based methods (password / magic link) - a
   labeled rule, not an "OR" */
.login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.login-divider span {
  font-size: 14px;
  color: var(--color-text-muted);
}
/* Small-caps treatment for the section label */
.login-divider--caps span {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Extra air around the method stack: below the "Choose a sign-in
   method" line above it, and before the legal footer after it */
#login-panel-select .login-sub { margin-bottom: 32px; }
#login-panel-select .login-legal { margin-top: 34px; }

/* ------------------------------------------------------ error banner */
.login-banner {
  display: flex;
  /* Icon rides the FIRST line of wrapped copy, not the block center */
  align-items: flex-start;
  gap: 10px;
  background: var(--color-accent-tint);
  border: 1px solid #F3C9BC;
  border-radius: var(--radius);
  padding: 16px 14px;
  margin-bottom: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-error);
}
/* Optical alignment with the first text line's cap height, and a
   gentler multi-line rag on the copy itself */
.login-banner svg { flex-shrink: 0; margin-top: 3px; }
.login-banner span { text-wrap: pretty; }
/* Informational variant (e.g. "check your email" confirmations):
   a calm blue cue - blue icon, soft blue field, dark gray copy -
   distinct from the error red */
.login-banner--info {
  background: #EDF4FA;
  border-color: #C9DEEF;
  color: var(--color-text);
}
.login-banner--info svg { color: #3878B8; }

/* ---------------------------------------------------------- fields */
.pc-label {
  display: block;
  font-size: 14.5px;
  color: var(--color-ink);
  margin-bottom: 6px;
  font-weight: 500;
}
.pc-required { color: var(--color-error-mark); }
.pc-field {
  width: 100%;
  background: #FFFFFF;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.pc-field:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(225, 96, 44, 0.12);
}
.pc-field-error {
  color: var(--color-error);
  font-size: 14.5px;
  margin-top: 6px;
}
.login-field { margin-bottom: 16px; }

/* Quiet field hint riding right-aligned in a label row (e.g. the
   signup password policy floor) */
.login-hint {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Side-by-side first / last name pair on the signup panel */
.login-name-row { display: flex; gap: 12px; }
.login-name-row .login-field { flex: 1; min-width: 0; }

/* Password field wrapper hosting the in-field visibility toggle */
.login-password-wrap { position: relative; }
.login-password-wrap .pc-field { padding-right: 42px; }
.login-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 7px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.login-eye:hover { color: var(--color-ink); }

/* Label row pairing a field label with a right-aligned action (the
   password field's "Forgot password?" link, per the hosted page) */
.login-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* MFA remember-this-device row */
.login-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 0 20px;
  font-size: 14px;
}
.login-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-row input[type="checkbox"] { accent-color: var(--color-accent); }

/* ---------------------------------------------------------- buttons */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius);
  padding: 13px 26px;
  border: 1px solid transparent;
  cursor: pointer;
}
.pc-btn--primary {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  width: 100%;
  /* Breathing room between the last field and the primary action */
  margin-top: 8px;
  /* Noticeable-but-quiet fade when the gated state flips */
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}
.pc-btn--primary:not([disabled]):hover {
  background: var(--color-accent-hover);
}
.pc-btn--primary:not([disabled]):active {
  background: var(--color-accent-press);
}
/* Gated (form not yet valid): unmistakably unavailable - warm light
   gray field, medium gray label, not-allowed cursor - so the enabled
   orange reads as "ready" at a glance */
.pc-btn--primary[disabled] {
  background: #F0EEE9;
  border-color: #E6E2DA;
  color: #A6A096;
  cursor: not-allowed;
}
/* In-flight (submitting): also [disabled], but visually stays the
   confident primary orange with the spinner - gray means "not yet",
   never "working" */
.pc-btn--primary.pc-btn--busy[disabled] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  cursor: default;
  opacity: 0.85;
}
.pc-link-cta {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.pc-link-cta:hover { color: var(--color-accent-hover); }
/* Secondary outlined navigation back to method selection: full width
   in the same white bordered treatment as the method buttons */
.login-switch-method { width: 100%; margin-top: 12px; }

/* Button-embedded loading spinner */
.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: login-spin 0.7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- footers */
.login-alt {
  text-align: center;
  margin-top: 22px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.login-legal {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.login-legal a { color: var(--color-text-muted); }

/* ------------------------------------------------------ panel switching */
/* login.js swaps between the method-selection / email login / signup /
   MFA / backup-code / forgot / magic-link / signing-in panels (and the
   banner) via the hidden attribute - covered by the global [hidden]
   rule in the base section */

/* --------------------------------------------------------- help modal */
/* Small centered dialog over a dimmed backdrop (the what-is-a-magic-
   link explainer); login.js toggles the hidden attribute */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(56, 52, 47, 0.45);
}
.login-modal-card {
  background: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  max-width: 380px;
  padding: 26px 28px;
}
/* The base heading reset covers h1-h3 only, so the h4 (and the
   paragraphs) zero their UA default top margins explicitly - otherwise
   they stack on the card padding */
.login-modal-card h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  font-size: 18px;
  margin: 0 0 10px;
}
.login-modal-card p {
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.55;
  /* Short scannable paragraphs; the last one clears the button */
  margin: 0 0 12px;
}
.login-modal-card p:last-of-type { margin-bottom: 18px; }

/* Full-card "signing you in" wait state */
.login-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 48px 0;
  color: var(--color-text-muted);
}
.login-wait .login-spinner {
  width: 28px;
  height: 28px;
  border-color: rgba(225, 96, 44, 0.25);
  border-top-color: var(--color-accent);
}