/*
 * Module 17 section 17.3 — legal and informational pages (FR-LGL-01..06).
 *
 * Loaded from the Legal views themselves, not from a layout: the layouts are
 * another lane's territory. Plain, readable typography for ordinary readers:
 * a comfortable measure, generous line height, short paragraphs.
 *
 * On the public (signed-out) shell the auth layout renders a two-column
 * marketing split with the content in a narrow card column. A legal document
 * needs the full width, so when the right column holds a legal page the
 * marketing column is hidden and the grid collapses to one column. :has() is
 * supported by every current browser; where it is not, the page still reads
 * correctly, just narrower.
 */

.hero-split:has(.legal-page),
.hero-split:has(.legal-contact) {
  grid-template-columns: 1fr;
}
.hero-split:has(.legal-page) > .hero-content,
.hero-split:has(.legal-contact) > .hero-content {
  display: none;
}

.legal-page,
.legal-contact {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--apple-card, #fff);
  border: 1px solid var(--card-border, #e5e5ea);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  padding: 32px 36px 36px;
  color: var(--text-primary, #1d1d1f);
  font-size: 16px;
  line-height: 1.65;
  text-align: left;
}

.legal-draft-banner {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--apple-amber-bg, #fff4e0);
  color: var(--apple-amber-text, #7a4b00);
  border: 1px solid var(--apple-amber, #f5a623);
  font-size: 15px;
}

.legal-header { margin-bottom: 20px; }
.legal-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apple-blue-text, #0058b0);
}
.legal-header h1 { margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.15; }
.legal-meta { margin: 0; font-size: 14px; color: var(--text-secondary, #515154); }

.legal-page h2 {
  margin: 32px 0 10px;
  font-size: 21px;
  scroll-margin-top: 80px;
}
.legal-page h3 { margin: 20px 0 6px; font-size: 17px; }
.legal-page p,
.legal-page ul,
.legal-page ol { margin: 0 0 12px; }
.legal-page ul,
.legal-page ol { padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }

/* A placeholder the owner or the lawyer must fill. Visible on purpose. */
.legal-placeholder {
  background: var(--apple-amber-bg, #fff4e0);
  color: var(--apple-amber-text, #7a4b00);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}

/* "We have not built this yet" statements: the policy admits a gap. */
.legal-gap {
  border-left: 4px solid var(--apple-amber, #f5a623);
  background: var(--apple-slate-bg, #f5f5f7);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}

.legal-toc {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--apple-slate-bg, #f5f5f7);
  border-radius: var(--radius-lg, 14px);
}
.legal-toc h2 { margin: 0 0 8px; font-size: 16px; }
/* The brand blue on this grey panel is 4.1:1, under WCAG AA's 4.5:1 for body
   text (axe, 2026-10-08); the text-blue token is 6.0:1. */
.legal-toc a { color: var(--apple-blue-text); }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { margin-bottom: 4px; break-inside: avoid; }

.legal-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border, #e5e5ea);
  font-size: 15px;
}

/* Contact form */
.legal-contact h1 { margin: 0 0 8px; font-size: 28px; }
.legal-contact .legal-notice {
  margin: 16px 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--apple-blue-subtle, #eaf3ff);
}
.legal-contact .legal-notice p { margin: 0; }
.legal-contact .legal-notice p + p { margin-top: 6px; font-size: 15px; }
.legal-field { margin-bottom: 16px; }
.legal-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.legal-field input,
.legal-field select,
.legal-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--control-border, #c7c7cc);
  border-radius: var(--radius-md, 10px);
  background: var(--surface, #fff);
  color: inherit;
}
.legal-field textarea { min-height: 160px; resize: vertical; }
.legal-field .legal-hint { font-size: 14px; color: var(--text-secondary, #515154); margin-top: 4px; }
.legal-field-error { color: var(--apple-crimson-text, #b3261e); font-size: 14px; margin-top: 4px; }
.legal-form-error {
  padding: 12px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--apple-crimson-bg, #fdecea);
  color: var(--apple-crimson-text, #b3261e);
  margin-bottom: 16px;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.legal-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .legal-page,
  .legal-contact { padding: 22px 18px 26px; font-size: 16px; }
  .legal-header h1 { font-size: 25px; }
  .legal-toc ol { columns: 1; }
}

@media print {
  .legal-related { display: none; }
  .legal-page { border: 0; padding: 0; max-width: none; }
}

/* Apple Health redesign: on a phone the reading card keeps a 16px gutter. */
@media (max-width: 600px) {
  .legal-page, .legal-contact { padding: 20px 16px 24px; }
  .legal-header h1 { font-size: 24px; }
}