/* The legal pages, on the same design system as the rest of the site.
 *
 * Rewritten when the site moved onto the 3D Essentials palette. The previous
 * version referenced tokens that no longer exist — --bg, --card, --faint,
 * --sans, --accent-soft — and every one of them would have silently resolved
 * to nothing, which on a legal page means grey-on-grey text nobody can read.
 * A stylesheet that fails quietly is worse here than anywhere else on the
 * site.
 *
 * These pages are read slowly, sometimes printed, and occasionally read in
 * anger by somebody looking for one clause. So: a narrow measure, numbered
 * headings, and every clause addressable by its own id.
 *
 * WHY EVERY CLAUSE HAS AN ID, because it is not decoration. Where the
 * marketing terms borrow the account's terms they must reference and SHOW
 * the clause rather than restate it, and showing one clause needs a way to
 * address one clause. These ids are that. A link to
 * /legal/terms#ip-4 lands on the sentence, and anything that later extracts
 * a clause to display it elsewhere has something to select. */

.wrap.doc { max-width: 860px; }

/* ---------- the draft banner ---------- */

.draft {
  margin: 0; padding: 13px var(--s-5); text-align: center;
  font: 14px/1.5 system-ui, sans-serif; color: #6b4a06;
  background: #fff3d6; border-bottom: 1px solid #f0dfc0;
}
.draft b { color: #4a3304; }
.draft a { color: #6b4a06; }
.draft code { font: 13px var(--mono); }

/* ---------- document furniture ---------- */

.doc h1 { max-width: 22ch; margin-bottom: var(--s-3); }

/* The version line. Monospace because it is a record rather than prose, and
   it is the first thing anybody checks when asking "which version did I
   agree to". */
.updated {
  font: 12.5px/1.8 var(--mono); color: var(--muted);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-2);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.updated b { color: var(--text); font-weight: 600; }

.doc section { padding: var(--s-6) 0; }

.doc h2 {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 23px; margin: 0 0 var(--s-4);
}
.doc h2 .n {
  flex: none; font: 600 12px/1 var(--mono); color: var(--accent-ink);
  letter-spacing: .08em; padding-top: 4px;
}
.doc h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.doc h3 { font-size: 17px; margin: var(--s-5) 0 var(--s-2); }

.doc p, .doc li { font-size: 16px; color: var(--muted); }
.doc p b, .doc li b, .doc strong { color: var(--text); font-weight: 600; }
.doc ul, .doc ol { padding-left: var(--s-5); }
.doc li { margin-bottom: var(--s-2); }

/* A clause. :target lights it up, so a link to one clause visibly lands on
   that clause rather than merely scrolling near it. */
.c { scroll-margin-top: var(--s-5); }
.c:target {
  background: #eaf3fc; border-left: 3px solid var(--accent);
  margin-left: -18px; padding: var(--s-3) 0 var(--s-3) 15px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* A clause borrowed from another document rather than restated here. */
.borrowed {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-4) var(--s-5); margin: var(--s-4) 0;
}
.borrowed .from {
  display: block; font: 11px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2);
}
.borrowed p:last-child { margin-bottom: 0; }

/* The definitions and "who we are" blocks. */
.doc dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-6); margin: 0; }
.doc dt { font-size: 15px; color: var(--muted); }
.doc dd { margin: 0; font-size: 16px; }
@media (max-width: 600px) {
  .doc dl { grid-template-columns: 1fr; gap: 2px 0; }
  .doc dd { margin-bottom: var(--s-3); }
}

/* The contents list. */
.toc { columns: 2; column-gap: var(--s-7); list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.toc li { font-size: 15px; margin-bottom: 7px; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 600px) { .toc { columns: 1; } }

.toc-note { font-size: 15px; color: var(--muted); margin: var(--s-4) 0 0; max-width: 60ch; }

/* ---------- a single part of a document ----------

   Generated by tools/split-legal.mjs. The parts exist for reading and for
   linking; the whole document is still the thing that applies, so every one
   carries a way back to it at the top and at the bottom. */

.first.part { padding-bottom: var(--s-3); }
.first.part h1 { display: flex; align-items: baseline; gap: var(--s-3); max-width: none; }
.first.part h1 .n { font: 600 14px/1 var(--mono); color: var(--accent-ink); letter-spacing: .08em; }
.first.part .eyebrow { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--muted); }

/* Previous and next, each naming where it goes — knowing you are about to
   open "Payment" is worth more than knowing it is the one after this. */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  padding: var(--s-6) 0 var(--s-2); border-top: 1px solid var(--line);
}
.pg {
  display: block; padding: var(--s-4) var(--s-5); min-height: 66px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--ground); box-shadow: var(--shadow-sm);
  text-decoration: none; font-size: 15px; color: var(--text);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
a.pg:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.pg span {
  display: block; font: 11px/1 var(--mono); color: var(--muted);
  letter-spacing: .1em; margin-bottom: 6px;
}
.pg.next { text-align: right; }
/* A placeholder at the first and last part, rather than a missing box, so the
   two columns do not jump about between pages. */
span.pg { background: transparent; border-style: dashed; box-shadow: none; opacity: .4; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } span.pg { display: none; } }

.wholedoc { margin: var(--s-5) 0 0; font-size: 15px; }

/* ---------- print ----------
   This is a document somebody will put in a folder. */

@media print {
  .draft, .top nav, .toc, .toc-note, .pager, .wholedoc { display: none; }
  body { background: #fff; color: #000; }
  .doc p, .doc li, .doc dd { color: #222; }
  .doc h2::after { background: #ccc; }
  .updated { border: 1px solid #ccc; background: #fff; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
  section { page-break-inside: avoid; }
}