/* Auth (sign-in + sign-up) — split-screen ledger layout.
   Loaded only on auth pages via stylesheet_link_tag. */

html, body { height: 100%; }

.auth-shell { display: grid; grid-template-columns: 460px 1fr; min-height: 100vh; }
@media (max-width: 920px) { .auth-shell { grid-template-columns: 1fr; } }

/* ---------- Left panel (dark, editorial) ---------- */
.auth-left {
  background: var(--color-ink); color: #fff;
  padding: calc(32px + env(safe-area-inset-top, 0px)) 40px 40px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.auth-left::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events: none;
}
.auth-left > * { position: relative; }
.auth-left .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; }
.auth-left .brand img { height: 28px; }
.auth-left .brand .tag { font: 500 11px/14px var(--font-mono); color: rgba(255, 255, 255, 0.4); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; }

.auth-left .step-num { font: 700 124px/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-ember); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.auth-left .step-num .of { font-size: 32px; color: rgba(255, 255, 255, 0.35); margin-left: 6px; letter-spacing: -0.02em; }
.auth-left .eyebrow { font: 600 11px/14px var(--font-display); letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 18px; }
.auth-left h1 { font: 700 36px/40px var(--font-display); letter-spacing: -0.02em; color: #fff; margin-bottom: 14px; max-width: 14ch; text-wrap: balance; }
.auth-left .lede { font: 400 16px/24px var(--font-sans); color: rgba(255, 255, 255, 0.72); max-width: 38ch; }

.auth-left .quote-block { margin-top: auto; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.auth-left .qt-mark { font: 700 48px/24px var(--font-display); color: var(--color-ember); height: 24px; }
.auth-left .qt-body { font: 400 14px/22px var(--font-sans); color: rgba(255, 255, 255, 0.85); margin: 14px 0; max-width: 36ch; text-wrap: pretty; }
.auth-left .qt-attr { font: 500 11px/14px var(--font-mono); color: rgba(255, 255, 255, 0.45); letter-spacing: 0.06em; text-transform: uppercase; }
.auth-left .qt-attr b { color: #fff; font-weight: 600; }

@media (max-width: 920px) {
  .auth-left { padding: 24px 20px 32px; }
  .auth-left .step-num { font-size: 88px; }
  .auth-left h1 { font-size: 28px; line-height: 32px; }
  .auth-left .quote-block { display: none; }
}

/* ---------- Right panel (ledger form) ---------- */
.auth-right { padding: 32px 56px 56px; max-width: 720px; display: flex; flex-direction: column; }
@media (max-width: 920px) { .auth-right { padding: 24px 20px 56px; max-width: none; } }

.auth-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-bottom: 14px; border-bottom: 1px solid var(--color-neutral-200); flex-wrap: wrap; gap: 12px; }
.auth-meta .crumb { font: 500 12px/16px var(--font-mono); color: var(--color-neutral-500); letter-spacing: 0.04em; text-transform: uppercase; }
.auth-meta .crumb b { color: var(--color-neutral-900); font-weight: 600; }
.auth-meta .alt-link { font: 500 13px/18px var(--font-sans); color: var(--color-neutral-500); }
.auth-meta .alt-link a { color: var(--color-ember-hover); font-weight: 500; }
.auth-meta .alt-link a:hover { color: var(--color-ember); }

.form-wrap { max-width: 460px; padding-top: 16px; }
.form-wrap h2 { font: 700 32px/36px var(--font-display); letter-spacing: -0.02em; color: var(--color-neutral-900); margin-bottom: 8px; }
.form-wrap > .lede { font: 400 15px/22px var(--font-sans); color: var(--color-neutral-500); margin-bottom: 36px; max-width: 38ch; }

/* Flash banners */
.auth-alert { padding: 12px 14px; margin-bottom: 24px; border-radius: var(--radius-sm); font: 500 13px/18px var(--font-sans); }
.auth-alert.error { background: var(--color-error-soft); color: var(--color-error); border: 1px solid rgba(181, 50, 30, 0.30); }
.auth-alert.notice { background: var(--color-success-soft); color: var(--color-success); border: 1px solid rgba(47, 125, 91, 0.30); }
.auth-error-list { background: var(--color-error-soft); border: 1px solid rgba(181, 50, 30, 0.30); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 24px; }
.auth-error-list .head { font: 500 11px/16px var(--font-mono); color: var(--color-error); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.auth-error-list ul { list-style: disc; padding-left: 18px; font: 400 13px/20px var(--font-sans); color: var(--color-error); }

/* Ledger fields */
.ledger-field { padding: 18px 0; border-bottom: 1px solid var(--color-neutral-200); display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: flex-start; }
.ledger-field:first-of-type { border-top: 1px solid var(--color-neutral-200); }
@media (max-width: 540px) { .ledger-field { grid-template-columns: 1fr; gap: 8px; } }
.lf-label { font: 500 11px/16px var(--font-mono); color: var(--color-neutral-500); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 14px; }
@media (max-width: 540px) { .lf-label { padding-top: 0; } }
.lf-label .req { color: var(--color-ember); }
.lf-control input.bare {
  width: 100%; border: none; background: transparent; padding: 10px 0;
  font: 500 22px/30px var(--font-display); letter-spacing: -0.01em; color: var(--color-neutral-900);
  border-bottom: 1.5px solid var(--color-neutral-300);
  outline: none;
  transition: border-color 120ms var(--ease-out);
}
.lf-control input.bare:focus { border-bottom-color: var(--color-ember); }
.lf-control input.bare::placeholder { color: var(--color-neutral-400); font-weight: 400; }
.lf-control .help-row { display: flex; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; gap: 8px; }
.lf-control .help-row .help-text { font: 400 12px/16px var(--font-sans); color: var(--color-neutral-500); }
.lf-control .help-row a { font: 500 11px/14px var(--font-mono); color: var(--color-neutral-500); letter-spacing: 0.04em; text-transform: uppercase; }
.lf-control .help-row a:hover { color: var(--color-ember-hover); }

.actions { display: flex; gap: 12px; align-items: center; margin-top: 32px; padding-top: 20px; flex-wrap: wrap; }
.actions .btn-primary { padding: 0 28px; }
.actions .right-spacer { flex: 1; }
.actions .keytip { font: 500 11px/14px var(--font-mono); color: var(--color-neutral-400); letter-spacing: 0.04em; text-transform: uppercase; }
.actions .keytip kbd { background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); border-radius: 4px; padding: 2px 6px; font: 500 11px/14px var(--font-mono); color: var(--color-neutral-700); margin: 0 2px; }

.footnote { margin-top: auto; padding-top: 32px; font: 500 11px/16px var(--font-mono); color: var(--color-neutral-400); letter-spacing: 0.04em; text-transform: uppercase; }
.footnote a { color: var(--color-neutral-500); }