/* =========================================================================
   ClearHarbor — legal document pages (Privacy Policy, Terms of Use)
   Page-specific: only loaded by Pages/Privacy.cshtml and Pages/Terms.cshtml
   (via the _Layout "Styles" section), same pattern as coming-soon.css.
   Token-driven — see tokens.css for the palette this reads from.
   ========================================================================= */

.legal-shell {
  max-width: var(--measure-doc);
  margin: 0 auto;
}

.legal-header { margin-bottom: 2rem; }

/* Same eyebrow-above-title shape as Getting Started's hero (site.css's
   shared .mono-eyebrow utility, not a marketing-only device) — see the
   2026-08 typography pass: the two pages used to open with different header
   shapes even though the title font/size already matched. */
.legal-header .mono-eyebrow { margin: 0 0 0.5rem; }

.legal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.legal-version {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Interim notice — reuses the same warm caution language as .warning-callout
   elsewhere in the app (OCR/PDF processing notes), so an "under review"
   document reads as the same kind of heads-up, not a bespoke component. */
.legal-interim-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 1.25rem 0 2rem;
}
.legal-interim-notice .icon-warn { flex: 0 0 auto; display: inline-flex; margin-top: 0.15rem; }
.legal-interim-notice strong { display: block; font-family: var(--font-sans); font-weight: 700; margin-bottom: 0.15rem; }

/* ---- Document typography --------------------------------------------------
   Shares its scale with getting-started.css's .gs-section-title / body copy
   via the --fs-doc-h2 / --lh-doc / --doc-h2-* tokens in tokens.css — one
   definition, not two copies that happen to agree today. */
.legal-doc { color: var(--text); font-size: var(--fs-base); line-height: var(--lh-doc); }

.legal-doc h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-doc-h2);
  color: var(--ink);
  margin: var(--doc-h2-gap-top) 0 var(--doc-h2-gap-bottom);
  padding-top: var(--doc-h2-pad-top);
  border-top: 1px solid var(--line);
}
.legal-doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.legal-doc p { margin: 0 0 0.9rem; }
.legal-doc ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.legal-doc li { margin: 0.3rem 0; }
.legal-doc strong { color: var(--ink); font-weight: 700; }
.legal-doc a { color: var(--accent); }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1rem;
  font-size: var(--fs-sm);
}
.legal-doc th,
.legal-doc td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-doc th {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-2);
}

/* Uppercase, all-caps statutory boilerplate (warranty disclaimer, liability
   cap) — kept visually distinct so it doesn't blend into the prose above it. */
.legal-doc .legal-statute {
  background: var(--panel-2);
  border-radius: var(--r-sm);
  padding: 0.9rem 1.05rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.legal-footer {
  margin-top: var(--doc-h2-gap-top);
  padding-top: var(--doc-h2-pad-top);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}

@media (max-width: 640px) {
  .legal-doc table,
  .legal-doc thead,
  .legal-doc tbody,
  .legal-doc th,
  .legal-doc td,
  .legal-doc tr { display: block; }
  .legal-doc thead { display: none; }
  .legal-doc tr { margin-bottom: 0.9rem; border-bottom: 1px solid var(--line-strong); }
  .legal-doc td { border-bottom: none; padding: 0.25rem 0; }
  .legal-doc td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: var(--ink);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }
}