/* `/terms` and `/privacy`. The words come from web/legal/*.md, rendered by
   scripts/web/legal.mjs and set between the website's header and footer by
   scripts/web/site-pages.mjs; this file, loaded after site.css, only dresses
   the document in the website's clay look. The reading rules are the ones
   these pages had before the website (30 Sep 2026): three readers — someone
   who tapped "Privacy Policy" under a sign-in button, an App Review engineer,
   and a lawyer — all reading long prose on a phone, so a column of about 68
   characters, type that grows on wider screens instead of the column, and
   tables that scroll inside their own box instead of the page. */

html { scroll-padding-top: calc(var(--header-h) + 14px); }

.legal-page { background: var(--color-surface-quote); }


.legal-main { padding: 12px var(--gutter) 72px; }

.doc-card {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5.5vw, 76px);
  border-radius: 34px;
  background: var(--color-surface-card);
  box-shadow: var(--clay-card);
}

.doc { color: var(--color-text-primary); font-size: 18px; line-height: 30px; }
.doc > * { max-width: 68ch; margin-left: auto; margin-right: auto; }

.masthead { margin-bottom: 32px; }
.doc h1 {
  margin: 0 0 10px;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: var(--tracking-title);
  font-weight: 600;
  text-wrap: balance;
}
.dates { color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }
.dates p { margin: 0; }

/* A section heading sits on a hairline: in a numbered legal document it is
   the landmark you scan back to. */
.doc h2 {
  margin: 40px auto 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-divider);
  font-size: 23px;
  line-height: 31px;
  letter-spacing: -.02em;
  font-weight: 600;
}
.doc h2:first-of-type { margin-top: 24px; padding-top: 0; border-top: 0; }
.doc :is(h3, h4, h5, h6) { margin: 24px auto 8px; font-size: 18px; line-height: 26px; font-weight: 600; }
.doc :is(h4, h5, h6) { color: var(--color-text-secondary); }
.doc p { margin-top: 0; margin-bottom: 16px; text-wrap: pretty; }
.doc strong { font-weight: 600; }
.doc a { color: var(--color-text-link); border-bottom: 1px solid var(--color-border-link); overflow-wrap: anywhere; }
.doc a:hover, .doc a:focus-visible { border-bottom-color: currentColor; }
.doc ul { margin-top: 0; margin-bottom: 16px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--color-text-muted); }
.doc blockquote { margin-top: 0; margin-bottom: 16px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--color-surface-quote); }
.doc blockquote p { margin: 0; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; padding: 1px 5px; border-radius: var(--radius-xs); background: var(--color-surface-quote); }
/* The `---` between sections: each h2 already draws its own rule. */
.doc hr { display: none; }

/* Tables scroll inside their own box on a phone, never the page. Only tables
   of three or more columns get a minimum width. */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
  border: 1px solid var(--color-border-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.doc table[data-cols="3"] { min-width: 30rem; }
.doc table[data-cols="4"] { min-width: 38rem; }
.doc :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--color-border-divider); text-align: left; vertical-align: top; }
.doc thead th { color: var(--color-text-secondary); background: var(--color-surface-quote); font-weight: 600; white-space: nowrap; }
.doc tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* The contents list: one line until you open it. */
.toc { margin-bottom: 40px; padding: 16px 24px; border-radius: var(--radius-lg); background: var(--color-surface-quote); box-shadow: var(--clay-chip); }
.toc-title {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.toc-title::-webkit-details-marker { display: none; }
.toc-title::after {
  content: '';
  float: right;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.toc[open] .toc-title::after { margin-top: 9px; transform: rotate(-135deg); }
.toc ol { margin: 16px 0 4px; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 8px; break-inside: avoid; font-size: 15px; line-height: 22px; }
.toc a { color: var(--color-text-secondary); border-bottom: 0; }
.toc a:hover, .toc a:focus-visible { color: var(--color-text-primary); }

@media (max-width: 850px) {
  .legal-main { padding-top: 4px; padding-bottom: 40px; }
  .doc-card { border-radius: 26px; }
  .doc { font-size: 17px; line-height: 28px; }
  .doc h2 { font-size: 21px; line-height: 29px; }
  .toc { padding: 14px 18px; }
  .toc ol { columns: 1; }
}

@media print {
  .site-header, .toc, .site-footer { display: none; }
  .legal-main { padding: 0; }
  .doc-card { max-width: none; padding: 0; box-shadow: none; }
  .doc { font-size: 11pt; line-height: 1.5; }
  .doc h2 { break-after: avoid; }
  .scroller, .doc table { overflow: visible; min-width: 0; break-inside: avoid; }
}