/* There & Then legal/informational page styles — public/legal.css.
   Loaded by terms.html, privacy.html, faq.html, contact.html (after /ds/ds.css).
   Token-driven: light + dark come from the design system automatically.
   Footer rules live in styles.css so the login screen can share them. */
.doc-page { max-width: 680px; margin: 0 auto; padding: 32px 20px 64px; }
/* The brand lockup lives in the shared .site-nav header (landing.css),
   loaded before this file — no in-content wordmark anymore. */
.doc-page h1 {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 1.7rem; letter-spacing: var(--ls-tight);
  color: var(--text-strong); line-height: var(--lh-heading); margin: 16px 0 4px;
}
.doc-page .updated {
  font-family: var(--font-mono); color: var(--text-muted);
  font-size: 0.8rem; margin-bottom: 28px;
}
.doc-page h2 {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 1.2rem; letter-spacing: var(--ls-tight);
  color: var(--text-strong); margin: 32px 0 8px;
}
.doc-page p, .doc-page li { color: var(--text-body); line-height: var(--lh-body); }
.doc-page p { margin: 10px 0; }
.doc-page ul { margin: 10px 0; padding-left: 22px; }
.doc-page li { margin: 6px 0; }
.doc-page a { color: var(--text-link); }
.doc-page a:hover { text-decoration: underline; }
.doc-page .callout {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 14px 16px; margin: 16px 0;
}
.doc-page .faq-q { font-weight: var(--fw-semibold); margin: 24px 0 4px; }

#contact-form label { display: block; margin: 16px 0 4px; color: var(--text-body); font-size: 0.95rem; }
#contact-form input, #contact-form textarea {
  width: 100%; background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  /* 16px, not `font: inherit` (which lands at 15.2px here): iOS Safari zooms
     the page when a text field under 16px takes focus and never zooms back,
     leaving every screen after it too wide. Same fix as .delete-gate input. */
  padding: 10px 12px; font-family: inherit; font-size: 16px;
  transition: border-color var(--dur-sm) var(--ease-standard), box-shadow var(--dur-sm) var(--ease-standard);
}
#contact-form input:focus, #contact-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);
}
#contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#submit-btn {
  margin-top: 20px; background: var(--action-primary-bg); color: var(--action-primary-fg);
  border: 0; border-radius: var(--radius-md); padding: 12px 20px;
  font: inherit; font-weight: var(--fw-semibold); cursor: pointer;
}
#submit-btn:hover { background: var(--action-primary-hover); }
#submit-btn:active { transform: translateY(1px); }
#submit-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
#submit-btn:disabled { opacity: 0.6; cursor: default; }
.form-status { margin-top: 12px; min-height: 1.2em; color: var(--text-secondary); }
.form-status.ok { color: var(--success); }
.form-status.err { color: var(--error); }


/* Align the shared nav's content to the 680px page column (legal pages only —
   this file loads after landing.css; the landing keeps its wide nav). */
.site-nav { padding-inline: max(24px, calc((100% - 680px) / 2)); }

/* An inline literal (an email domain, a URL) must not set the page width: at
   320px the relay address in the FAQ made the whole document 34px too wide and
   every paragraph scrolled sideways with it. */
code {
  overflow-wrap: anywhere;
  font-size: 0.92em;
}