/* terms.css -- variant A's terms page (terms.html).
 *
 * A quiet reading page on the same wall colour as the rest of variant A:
 * ring.css supplies the palette, fonts and the floating nav; this file only
 * sets the document column and the typography of the rendered markdown
 * (tools/render_terms.py pastes the form between the terms:* markers).
 */

.t-page {
  min-height: 100vh; min-height: 100svh;
  background: radial-gradient(90% 40% at 50% 0%, var(--a-bg-hi) 0%, var(--a-bg) 70%);
}

/* ring.css positions .nav absolutely over the hero; here it simply sits at the
   top of a long page and scrolls away with it. */
.t-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(max(env(safe-area-inset-top), clamp(14px, 2.4vw, 28px)) + 96px) clamp(20px, 5vw, 40px) clamp(56px, 10vh, 112px);
}

/* ---------- intro ---------- */

.t-intro { padding-bottom: clamp(28px, 5vh, 44px); border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.t-eyebrow { margin: 0; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--a-ink-3); }
.t-title { margin: 0.5rem 0 0; font-size: clamp(2rem, 4vw + 1rem, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.t-lede { margin: 1rem 0 0; max-width: 36em; font-size: 1rem; line-height: 1.8; color: var(--a-ink-2); text-wrap: pretty; }
.t-langs { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--a-ink-3); }

.t-page a { color: var(--a-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.t-page a:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 3px; border-radius: 2px; }
.t-page .brand, .t-page .nav-link { text-decoration: none; }

/* ---------- the form (rendered markdown) ---------- */

.t-doc {
  padding-top: clamp(32px, 6vh, 56px);
  font-size: 0.95rem; line-height: 1.8; color: var(--a-ink-2);
  overflow-wrap: anywhere; text-wrap: pretty;
}
.t-doc + .t-doc { margin-top: clamp(40px, 8vh, 72px); border-top: 1px solid rgba(17, 17, 17, 0.12); }
.t-doc > * { margin: 0; }
.t-doc > * + * { margin-top: 1em; }

/* The form puts each sub-clause ((a), (b) ...) on its own source line; keep those breaks. */
.t-doc p { white-space: pre-line; }

.t-form-title { font-size: clamp(1.35rem, 1.2vw + 1rem, 1.7rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--a-ink); }
.t-doc h3 { margin-top: 2.5em; font-size: 1.05rem; font-weight: 500; color: var(--a-ink); }
.t-doc strong { font-weight: 500; color: var(--a-ink); }
.t-doc blockquote { padding: 0.75em 1em; border-left: 2px solid rgba(17, 17, 17, 0.18); background: rgba(255, 255, 255, 0.55); }
.t-doc blockquote p { margin: 0; }
.t-doc ul { padding-left: 1.2em; }
.t-doc hr { border: 0; border-top: 1px solid rgba(17, 17, 17, 0.12); margin: 2.5em 0; }

/* Tables scroll sideways on a phone instead of squashing the checkbox column. */
.t-doc table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.86rem; }
.t-doc th, .t-doc td { padding: 0.5em 0.75em; border-bottom: 1px solid rgba(17, 17, 17, 0.1); text-align: left; vertical-align: top; }
.t-doc th { font-weight: 500; color: var(--a-ink); white-space: nowrap; }
.t-doc td:first-child { color: var(--a-ink-3); font-variant-numeric: tabular-nums; }

.t-back { margin: clamp(40px, 8vh, 72px) 0 0; font-size: 0.85rem; text-align: center; }