/* ==========================================================
   VERYQUERY · legal pages (terms, privacy)
   Page-specific styling for long-form policy prose. Shared
   prose primitives (bullets, email links, inline emphasis
   spacing) live in styles.css — keep those out of here.
========================================================== */

/* Metadata strip at the top of each page: entity, effective date. */
.legal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: var(--s-6) 0 var(--s-8);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
}
.legal-meta__row > span:first-child {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  margin-bottom: 0.2em;
  font-size: var(--t-2xs);
}
.legal-meta__row > span:last-child {
  color: var(--ink);
}

/* Section body tightens up on legal pages: long prose reads better
   at 66ch max. Override the default wide layout. */
.legal .sec__inner { max-width: 56rem; }
.legal .sec__h { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }

/* Sub-headings inside clauses: used for grouping rules (e.g.
   "prohibited content" inside the acceptable-use section). */
.legal-subh {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-2);
}

/* Numbered rule lists: enumerated items within a clause. */
.legal-list {
  margin: var(--s-3) 0;
  padding-left: var(--s-5);
  list-style: decimal;
}
.legal-list > li {
  margin-bottom: var(--s-3);
  color: var(--ink);
  line-height: 1.6;
}
.legal-list > li::marker {
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Dense key/value block for single-pair metadata (e.g. governing law). */
.legal-kv {
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-4) 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}
.legal-kv dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
}
.legal-kv dd { color: var(--ink); margin: 0; }

/* Inline code inside the legal-list specifically — the generic prose
   inline-code rule in styles.css covers .prose and .bullets, but
   .legal-list is legal-only so its inline-code rule lives here. */
.legal-list code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  margin-inline: 0.15em;
  padding: 0.05em 0.3em;
  background: var(--paper-tint, rgba(0, 0, 0, 0.04));
  border-radius: 2px;
}
.legal-list strong,
.legal-list em {
  margin-inline: 0.08em;
}

@media (max-width: 640px) {
  .legal-meta { font-size: var(--t-2xs); }
  .legal-kv { grid-template-columns: 1fr; gap: var(--s-1); }
  .legal-kv dt { margin-top: var(--s-2); }
}