/* Shared styling for the customer-facing legal documents served at
   /terms, /privacy and /hipaa.

   One stylesheet for all three, so a change to fonts or colour happens once
   rather than in three copies. Every colour is a token in :root below —
   changing --navy repaints every heading, rule and link.

   Deliberately light-only. These pages previously carried three copies of each
   colour (a light set, a prefers-color-scheme block, and a [data-theme] block)
   because the artifact viewer they were drafted in has a theme toggle. Served
   from our own site that machinery earns nothing and triples the cost of
   changing a colour. */

:root {
  --ground:    #f7f6f3;  /* page background */
  --ink:       #1a1a18;  /* body text */
  --ink-soft:  #55554f;  /* lead paragraphs, definition bodies */
  --ink-faint: #86867e;  /* clause numbers, metadata, footer */
  --rule:      #ddddd6;  /* hairlines */
  --navy:      #01273d;  /* h1, section rules, links */
  --accent:    #7a2417;  /* draft notice */
  --accent-bg: #f6e9e5;
  --good:      #2c5f34;  /* the summary / answer panels */
  --good-bg:   #e8f0e8;
  --code-bg:   #ecebe5;
  --fill-bg:   #fff2c9;  /* unmade decisions — deliberately loud */
  --fill-ink:  #6b4c00;
  --focus:     #01273d;
}

* { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 2.5rem 1.25rem 5rem;
}

.doc { max-width: 43rem; margin: 0 auto; }

/* ── Draft notice (Terms only, until counsel signs off) ─────────────── */
.draft {
  border: 1px solid var(--accent);
  background: var(--accent-bg);
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
}
.draft h2 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.5rem;
}
.draft p {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.92rem; line-height: 1.55;
  margin: 0 0 0.55rem; color: var(--ink);
}
.draft p:last-child { margin-bottom: 0; }

/* ── Masthead ───────────────────────────────────────────────────────── */
header.masthead {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

h1 {
  font-family: "Source Sans 3", sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--navy);
  text-wrap: balance;
}

.meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  color: var(--ink-faint);
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 1.75rem;
  margin: 0;
}

/* ── Summary panels: "The short version", "The answer, up front" ────── */
.summary, .answer {
  background: var(--good-bg);
  border-left: 3px solid var(--good);
  padding: 1.15rem 1.4rem;
  margin: 0 0 2.5rem;
}
.summary h2, .answer h2 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--good); margin: 0 0 0.7rem;
}
.summary ul { margin: 0; padding-left: 1.15rem; }
.summary li { margin-bottom: 0.45rem; }
.summary li:last-child { margin-bottom: 0; }
.answer p { margin: 0 0 0.65rem; }
.answer p:last-child { margin-bottom: 0; }

/* ── Numbered clauses ───────────────────────────────────────────────── */
section.clause { margin-top: 2.25rem; }

section.clause > h2 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.08rem; font-weight: 700; line-height: 1.3;
  color: var(--ink); margin: 0 0 0.65rem;
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.5rem;
  text-wrap: balance;
}
section.clause > h2 .n {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  font-weight: 600;
}

section.clause p,
section.clause ul,
section.clause ol,
section.clause dl { margin: 0 0 0.8rem; }

/* Indent body copy to align under the clause title, not the number. */
section.clause > p,
section.clause > ul,
section.clause > ol,
section.clause > dl { padding-left: 2.6rem; }

section.clause p:last-child,
section.clause ul:last-child,
section.clause ol:last-child,
section.clause dl:last-child { margin-bottom: 0; }

section.clause ul, section.clause ol { padding-left: 4rem; }
section.clause li { margin-bottom: 0.5rem; }

/* ── Definition lists (what we collect, third parties) ──────────────── */
dl.data dt, dl dt { font-weight: 600; margin-top: 0.9rem; }
dl.data dt:first-child, dl dt:first-child { margin-top: 0; }
dl.data dd, dl dd { margin: 0.15rem 0 0; color: var(--ink-soft); }

/* ── Inline literals: addresses, filenames, UI labels ───────────────── */
code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  word-break: break-word;
}

strong { font-weight: 600; }

/* Unmade decisions — loud on purpose, so none ship by accident. */
.fill {
  background: var(--fill-bg);
  color: var(--fill-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82em; font-weight: 600;
  padding: 0.08em 0.4em;
  border-radius: 2px;
  white-space: nowrap;
}

.lead {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.02rem;
  color: var(--ink-soft);
  padding-left: 0 !important;
}

footer.doc-foot {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

a { color: var(--navy); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 34rem) {
  body { font-size: 16px; padding-top: 1.75rem; }
  section.clause > p,
  section.clause > ul,
  section.clause > ol,
  section.clause > dl { padding-left: 0; }
  section.clause ul, section.clause ol { padding-left: 1.3rem; }
  section.clause > h2 { grid-template-columns: 1.7rem 1fr; }
}