/* Auth archetype (/DESIGN.md section 8): an asymmetric split - the form on the left at a fixed
   440px, the product's own proof on the right. Deliberately NOT the centred card on a full-bleed
   field, which is the default composition this pass exists to break. Below 900px the proof panel
   drops and the form takes the page. */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  min-height: 100vh;
}

.auth__main {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.auth__topbar { display: flex; justify-content: flex-start; }
.auth__card-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.auth-card { width: 100%; max-width: 360px; }
.auth-card__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4);
  letter-spacing: var(--track-display);
  color: var(--text);
  margin-bottom: var(--sp-7);
}
.auth-card__title { font-size: var(--fs-5); margin: 0 0 var(--sp-2); }
.auth-card__sub { margin-top: 0; margin-bottom: var(--sp-5); }

/* The proof panel: the product's actual claim, stated in the authorization vocabulary the app
   itself uses once you are inside. Content, not decoration. */
.auth__proof {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-7);
  background: var(--bg);
}
.auth__proof-lead {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--text);
  max-width: 26ch;
  margin: 0;
}
.auth__proof-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  max-width: 48ch;
}
.auth__proof-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-2);
}
.auth__proof-list .icon { color: var(--accent); margin-top: 3px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__main { border-right: 0; }
  .auth__proof { display: none; }
}

/* Error archetype (/DESIGN.md section 8): single column, max 520px, LEFT aligned internally.
   Only an error page may centre its block on the canvas, and even then the text is not centred. */
.errorpage {
  max-width: 520px;
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}
.errorpage__code {
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.errorpage__title { margin: 0; font-size: var(--fs-5); }
.errorpage__text { margin: 0 0 var(--sp-3); color: var(--text-muted); }