/* Fortalan, direction C: the legal pages (privacy notice, legal notice, how our demos are made) and their contents.
   Builds on style.css: its tokens (--text, --text-2, --rule, --chat, --ink, --u), .wrap and .display.
   Long-form text on the canvas, in one column, with the contents beside it from 1200 px. Each section starts on a
   rule (horizontal ink rules of one weight, never boxes). The draft flag is a flat yellow field, like the direction
   colours, and every placeholder is marked in the same yellow with ink text (9.82:1 in both themes). */

.doc-wrap { padding-top: calc(64 * var(--u)); padding-bottom: calc(128 * var(--u)); }
.doc-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.doc { grid-column: 1 / span 8; min-width: 0; }

/* the title, the date line and the draft flag */
.doc-body > h1 { margin-bottom: calc(18 * var(--u)); }
.doc-body > .meta { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--text-2); }
.draft-banner {
  margin: calc(28 * var(--u)) 0 calc(8 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
  background: var(--chat); color: var(--ink);
  font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u));
}
.draft-banner p + p { margin-top: calc(6 * var(--u)); }
.draft-banner mark.ph-mark { background: var(--ink); color: var(--chat); }
.draft-banner :focus-visible { outline-color: var(--ink); }

/* the text */
.doc-body > p, .doc-body > ul, .doc-body > ol, .doc-body > h3, .doc-body > .table-scroll, .doc-body > details { max-width: 42em; }
.doc-body > p { margin-top: calc(16 * var(--u)); text-wrap: pretty; }
.doc-body > h2 {
  margin-top: calc(56 * var(--u)); padding-top: calc(16 * var(--u));
  border-top: var(--rule-w) solid var(--rule);
  font-weight: 500; font-size: calc(28 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -0.005em;
  text-wrap: balance;
}
.doc-body > h3 { margin-top: calc(36 * var(--u)); }
.doc-body > h2 + p, .doc-body > h3 + p, .doc-body > h2 + ul, .doc-body > h3 + ul { margin-top: calc(12 * var(--u)); }
.doc-body ul, .doc-body ol { list-style: none; }
.doc-body > ul, .doc-body > ol { margin-top: calc(14 * var(--u)); display: grid; row-gap: calc(8 * var(--u)); }
.doc-body ul > li { position: relative; padding-left: calc(22 * var(--u)); text-wrap: pretty; }
.doc-body ul > li::before {
  content: ""; position: absolute; left: 0; top: calc(11 * var(--u));
  width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: var(--text);
}
.doc-body a { overflow-wrap: anywhere; }
mark.ph-mark {
  background: var(--chat); color: var(--ink);
  padding: 0 calc(3 * var(--u));
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.doc-body .ed-note {
  padding-left: calc(18 * var(--u)); border-left: calc(4 * var(--u)) solid var(--chat);
  font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--text-2);
}
.doc-body .ed-note strong { color: var(--text); }

/* the retention table: a rule under the head and under each row */
.table-scroll { margin-top: calc(18 * var(--u)); overflow-x: auto; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.doc-body th {
  text-align: left; vertical-align: bottom;
  padding: 0 calc(20 * var(--u)) calc(10 * var(--u)) 0;
  font-weight: 600; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2);
  border-bottom: var(--rule-w) solid var(--rule);
}
.doc-body td { vertical-align: top; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)) 0; border-bottom: var(--rule-w) solid var(--rule); }
.doc-body th:last-child, .doc-body td:last-child { padding-right: 0; }

/* the sources behind each draft, folded */
details.sources { margin-top: calc(56 * var(--u)); padding-top: calc(16 * var(--u)); border-top: var(--rule-w) solid var(--rule); }
details.sources summary { cursor: pointer; font-weight: 500; font-size: calc(28 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -0.005em; }
details.sources > * + * { margin-top: calc(14 * var(--u)); }
details.sources p, details.sources li { font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--text-2); }
details.sources ul { display: grid; row-gap: calc(6 * var(--u)); }

/* the image credits on the legal notice */
.credits-list { margin-top: calc(14 * var(--u)); display: grid; row-gap: calc(8 * var(--u)); }

/* the legal pages, linked at the end: one rule, the links side by side */
.doc-end { margin-top: calc(72 * var(--u)); }
.doc-end ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(28 * var(--u));
  padding-top: calc(16 * var(--u)); border-top: var(--rule-w) solid var(--rule);
}
.doc-end a { display: inline-block; padding: calc(8 * var(--u)) 0; font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); }
.doc-end a[aria-current="page"] { text-decoration: none; }

/* the contents, beside the text from 1200 px: a ruled list */
.doc-toc { grid-column: 10 / span 3; position: sticky; top: calc(32 * var(--u)); padding-top: calc(10 * var(--u)); }
.doc-toc-title { font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); }
.doc-toc ol { list-style: none; margin-top: calc(12 * var(--u)); border-top: var(--rule-w) solid var(--rule); }
.doc-toc li { border-bottom: var(--rule-w) solid var(--rule); }
.doc-toc a {
  display: block; padding: calc(9 * var(--u)) 0;
  font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); text-decoration: none;
}
.doc-toc a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(4 * var(--u)); }

@media (max-width: 1199px) {
  .doc { grid-column: 1 / -1; }
  .doc-toc { display: none; }
}
@media (max-width: 719px) {
  .doc-wrap { padding-top: 32px; padding-bottom: 96px; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .draft-banner { padding: 16px 18px 18px; font-size: 16px; line-height: 24px; }
  .doc-body > h2 { margin-top: 44px; font-size: 23px; line-height: 30px; }
  .doc-body > h3 { margin-top: 30px; }
  details.sources summary { font-size: 23px; line-height: 30px; }
  .doc-body table { font-size: 16px; line-height: 24px; }
}