/*
 * Codeliance Design System — auth screens (COD-305).
 * ============================================================================
 * Login / signup / password-reset live OUTSIDE the authenticated app shell, so
 * they render on base_auth.html (no sidebar, no header) rather than base.html.
 * This file owns only the auth PAGE SHELL — the centered light-surface layout,
 * the brand lockup, and a few auth-specific compositions (path cards, status
 * blocks, message banners). The controls themselves — buttons, inputs, labels,
 * validation errors — come from the shared .ds-* component layer in
 * design-system-components.css and are NOT redefined here.
 *
 * Every value reads from a named token in design-system-tokens.css — no raw hex
 * or pixel numbers, same convention as the rest of the design system. Load order
 * (see base_auth.html): tokens.css FIRST, then components, then this.
 * ============================================================================
 */

/* ── Box-sizing reset ─────────────────────────────────────────────────────────
   base_auth.html loads only the Bootstrap ICON font, not bootstrap.min.css, so
   (unlike base.html) there is no global `* { box-sizing: border-box }` reset.
   Without it every width:100% control (.ds-input / .ds-textarea / .ds-btn) would
   overflow its container by its own padding + border — the auth shell owns that
   reset itself. Scoped to .auth-body so it can't leak if auth.css is ever reused. */
.auth-body,
.auth-body *,
.auth-body *::before,
.auth-body *::after {
  box-sizing: border-box;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  margin: 0;
  background: var(--gray-bg);
  font-family: var(--sans);
  color: var(--dark);
  display: flex;
  flex-direction: column;
}
.auth-shell {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-5);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-8);
}
/* Multi-field signup screens need more room than a two-field login. */
.auth-card--wide { max-width: 640px; }

/* ── Brand lockup ─────────────────────────────────────────────────────────── */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  font-weight: 800;
  font-size: var(--fs-section);
  letter-spacing: -0.01em;
  color: var(--blue);
  text-decoration: none;
}
.auth-brand__stage {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
}

/* ── Header (title + subtitle) ────────────────────────────────────────────── */
.auth-header {
  text-align: center;
  margin-bottom: var(--sp-7);
}
.auth-title {
  margin: 0;
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--dark);
}
.auth-subtitle {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--text-muted);
}

/* ── Form layout ──────────────────────────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
/* Line the label / hint / error text up with the input's text, which the input
   indents by its own horizontal padding (--ds-input padding is 0.45rem 0.75rem).
   The .ds-input border still spans the full field width; only the text aligns. */
.auth-form .ds-label,
.auth-form .ds-hint,
.auth-form .ds-form-error {
  padding-left: 0.75rem;
}

/* Side-by-side fields (first/last name, password/confirm) that stack when narrow. */
.auth-form__row {
  display: flex;
  gap: var(--sp-4);
}
.auth-form__row > * {
  flex: 1;
  min-width: 0;
}
@media (max-width: 520px) {
  .auth-form__row { flex-direction: column; gap: var(--sp-5); }
}

/* Grouped section within a longer form (company info / your info). */
.auth-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.auth-section__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  /* Line the heading TEXT up with the field labels/inputs below (input's 0.75rem
     text padding). The icon is pulled back into the gutter (see below) so only the
     text aligns, not the icon. */
  padding-left: 0.75rem;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dark);
}
/* Fixed-width icon pulled left by (its width + the flex gap) so it hangs in the
   gutter and the heading text lands at 0.75rem, aligned with the labels. */
.auth-section__title .ds-icon {
  flex-shrink: 0;
  width: 1rem;
  margin-left: calc(-1rem - var(--sp-2));
  color: var(--blue);
}

/* Full-width CTA — the shared .ds-btn is inline-flex; auth CTAs span the card. */
.ds-btn.auth-btn-block {
  width: 100%;
  justify-content: center;
}

/* "or" between a form and "Continue with Google" (App v2 Sign-up 01's divider-or, COD-350). */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-3);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-solid);
}
.auth-divider span {
  font-size: var(--fs-meta);
  color: var(--text-sub);
}

/* ── Terms acceptance on the forms that create an account (COD-477) ───────── */
/* The sentence wraps in the card, so the box sits at its first line, not its middle. */
.auth-terms {
  align-items: flex-start;
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--text-sub);
}
.auth-terms .ds-checkbox-native { margin-top: 0.1rem; }
.auth-terms-note {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.auth-terms a,
.auth-terms-note a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.auth-terms a:hover,
.auth-terms-note a:hover { text-decoration: underline; }

/* ── Two-step signup (App v2 onboarding 01–02, COD-444) ───────────────────── */
.auth-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.auth-step__label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.auth-step__bars { display: flex; gap: var(--sp-1); }
.auth-step__bar { width: 28px; height: 4px; border-radius: var(--r-pill); background: var(--border-solid); }
.auth-step__bar.is-on { background: var(--blue); }
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.2rem 0.7rem;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--green);
}
.auth-chip__sep { color: var(--green-border); }
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.auth-back:hover { color: var(--blue); }
/* The URL field with its scheme drawn in front, as one control. */
.auth-input-group { display: flex; align-items: stretch; }
.auth-input-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.auth-input-group .ds-input { min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ── Secondary links (forgot password, sign up, back to login) ────────────── */
.auth-links {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.auth-links a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }

/* ── In-card notice panels (role explainer, free-period note) ─────────────── */
.auth-note {
  border: 1px solid var(--blue-light);
  border-radius: var(--r-sm);
  background: var(--blue-pale);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--dark);
}
.auth-note--muted {
  border-color: var(--border-solid);
  background: var(--gray-bg);
  color: var(--text-muted);
}
.auth-note__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-weight: 700;
  color: var(--dark);
}
.auth-note ul {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-6);
}

/* ── Message banners (Django messages + non-field errors) ─────────────────── */
.auth-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
}
.auth-alert .ds-icon { flex-shrink: 0; margin-top: 0.1rem; }
.auth-alert--error   { background: var(--red-bg);    border-color: var(--red-border);   color: var(--red-text); }
.auth-alert--warning { background: var(--amber-bg);  border-color: var(--amber-border); color: var(--amber-text); }
.auth-alert--success { background: var(--green-bg);  border-color: var(--green-border); color: var(--green); }
.auth-alert--info,
.auth-alert--debug   { background: var(--blue-pale); border-color: var(--blue-light);   color: var(--blue); }

/* ── Status confirmation block (password reset sent / complete) ───────────── */
.auth-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.auth-status__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-status__icon--info    { background: var(--blue-pale); border: 1px solid var(--blue-light);   color: var(--blue); }
.auth-status__icon--success { background: var(--green-bg);  border: 1px solid var(--green-border); color: var(--green); }
.auth-status__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.auth-status__text {
  margin: 0;
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--text-muted);
}

/* ── Path-selection cards (get started) ───────────────────────────────────── */
.auth-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 640px) {
  .auth-paths { grid-template-columns: 1fr; }
}
.auth-path {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
  background: var(--gray-bg);
  padding: var(--sp-6);
}
.auth-path__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  border: 1px solid var(--blue-light);
  color: var(--blue);
}
.auth-path__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--dark);
}
.auth-path__text {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.auth-path__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--dark);
}
.auth-path__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.auth-path__list .ds-icon { flex-shrink: 0; color: var(--green); }
.auth-path .ds-btn { margin-top: auto; }

/* ── Notice ───────────────────────────────────────────────────────────────── */
/* A warning inside a form that is still going to submit — the unreachable-URL confirmation
   on onboarding 02 (COD-444). Amber, not red: the form is not refusing, it is asking. */
.auth-notice {
  border: 1px solid var(--amber-border);
  background: var(--amber-bg);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.auth-notice__title {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--amber-text);
}
.auth-notice__text {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--amber-text);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.auth-footer {
  flex-shrink: 0;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--text-sub);
}
.auth-footer a { color: var(--text-muted); }

/* ── The blurred app behind the sign-up card (App v2 onboarding 01–02) ─────────
   includes/_auth_backdrop.html: the app's layout in bars, blurred under a chrome
   scrim, fixed behind the shell. The card and footer sit above it. */
.auth-body--backdrop .auth-shell,
.auth-body--backdrop .auth-footer { position: relative; z-index: var(--z-base); }
.auth-body--backdrop .auth-footer,
.auth-body--backdrop .auth-footer a { color: var(--white); }

.auth-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--gray-bg);
}
.auth-backdrop__app {
  display: flex;
  height: 100%;
  filter: blur(7px);
  transform: scale(1.02);
}
.auth-backdrop__sidebar {
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--chrome);
}
.auth-backdrop__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.auth-backdrop__topbar {
  display: flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 var(--sp-6);
  background: var(--chrome);
}
.auth-backdrop__stats,
.auth-backdrop__panel { margin: 0 var(--sp-8); }
.auth-backdrop__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.auth-backdrop__stat,
.auth-backdrop__panel {
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
.auth-backdrop__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
.auth-backdrop__row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border-solid);
}
.auth-backdrop__bar {
  display: block;
  width: 8rem;
  height: 0.6rem;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}
.auth-backdrop__bar--short { width: 4rem; }
.auth-backdrop__bar--wide { flex: 1; width: auto; min-width: 8rem; }
.auth-backdrop__sidebar .auth-backdrop__bar--wide { flex: none; width: 100%; }
.auth-backdrop__bar--light { background: var(--text-muted); }
.auth-backdrop__pill {
  width: 5rem;
  height: 1.1rem;
  border-radius: var(--r-pill);
  background: var(--amber-bg);
}
.auth-backdrop__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--chrome) 32%, transparent);
}

/* ── Legal documents and the contact page (COD-477) ───────────────────────── */
/* Long-form reading pages on the public shell: wider than a form, and prose-styled. The
   document body is rendered Markdown, so its elements carry no classes and are styled by
   descendant selectors under .legal-doc. */
.auth-card--document { max-width: 820px; }
.legal-doc {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--dark);
}
.legal-doc h2 {
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--fs-section);
  font-weight: 700;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p,
.legal-doc ul { margin: 0 0 var(--sp-4); }
.legal-doc ul { padding-left: var(--sp-6); }
.legal-doc li { margin-bottom: var(--sp-2); }
.legal-doc a { color: var(--blue); }
.legal-doc code { font-family: var(--mono); font-size: 0.9em; }
.legal-doc table {
  width: 100%;
  margin: 0 0 var(--sp-5);
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.legal-doc th,
.legal-doc td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-solid);
  text-align: left;
  vertical-align: top;
}
.legal-doc th { font-weight: 700; }
@media (max-width: 640px) {
  /* A four-column table cannot fit a phone; let it scroll inside its own box. */
  .legal-doc table { display: block; overflow-x: auto; }
}

/* The contact page's form (core/contact.html), set in the document's reading column. The
   report fields are always shown, grouped, rather than revealed by script: the form has to
   work with JavaScript off. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-body);
  line-height: normal;
}
.contact-form__report {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
}
.contact-form__report legend { padding: 0 var(--sp-2); }
.contact-form > .ds-btn { align-self: flex-start; }