/* Public area layout (DESIGN_LANGUAGE §6 public + auth pages). Components live in base.css. */
.area-public { min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(900px 500px at 90% 0%, var(--gold-100), transparent 70%), var(--color-bg); }
.site-header { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.site-header .nav { padding: 18px 0; flex-wrap: wrap; }
.site-main { flex: 1; width: 100%; }

.site-footer { background: var(--color-section); color: var(--color-section-ink); }
.site-footer-inner { max-width: 1120px; margin: 0 auto; padding: 28px 24px; display: flex;
  flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 12px; }
.site-footer-inner > img { width: 36px; height: 36px; border-radius: 50%; background: var(--sand-100); }
.site-footer-eho { display: flex; gap: 6px; align-items: center; }
.site-footer-links { margin-left: auto; display: flex; gap: 16px; }
.site-footer a { color: inherit; }

/* Auth pages + preview holding page: one centered 380px column, one card form. */
.auth-section { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 40px 20px; }
.auth-col { width: min(380px, 100%); display: flex; flex-direction: column; gap: 20px; }
.auth-col form.card { padding: 22px; gap: 14px; }
.auth-head { display: flex; flex-direction: column; gap: 10px; }
.auth-head h2 { margin: 6px 0 0; }
.auth-logo { width: 260px; height: auto; align-self: flex-start; }
.auth-small { font-size: 13px; }
.auth-note { padding: 22px; gap: 8px; }
.auth-note svg { width: 22px; height: 22px; color: var(--color-accent); }
.auth-note p { margin: 0; font-size: 14px; }
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.field-label-row label { font-size: 13px; font-weight: 500; }
.field-label-row a { font-size: 12px; }