/* How it works -- a long-form reading document. Inherits every colour token,
   the serif/mono pairing and the page gutter from style.css; this file only
   adds what a document of this length needs and the app screens do not:
   a wider measure, a table of contents, prose tables, and block quotes for
   statutory text. Nothing here restates a token style.css already defines. */

body.doc {
  /* Wider than the app's 760px column: this page carries tables and JSON. */
  padding-inline: max(16px, calc((100vw - 880px) / 2));
}

.doc header.top {
  align-items: flex-start;
}

/* --- the lede ------------------------------------------------------------ */
.doc .lede {
  font-size: 1.02rem;
  color: var(--ink);
  margin-block: 0 18px;
}

.doc .lede strong { font-weight: 600; }

.doc .not-advice {
  border-inline-start: 3px solid var(--rule);
  padding-inline-start: 14px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin-block: 18px 26px;
}

/* --- table of contents --------------------------------------------------- */
.doc nav.toc {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 20px;
  margin-block-end: 34px;
}

.doc nav.toc h2 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 10px;
  border: none;
}

.doc nav.toc ol {
  margin: 0;
  padding-inline-start: 22px;
  columns: 2;
  column-gap: 32px;
}

.doc nav.toc li { margin-block: 3px; break-inside: avoid; }

@media (max-width: 620px) {
  .doc nav.toc ol { columns: 1; }
}

/* --- headings ------------------------------------------------------------ */
.doc h2 {
  font-size: 1.32rem;
  margin-block: 44px 12px;
  padding-block-end: 6px;
  border-bottom: 2px solid var(--ink);
  scroll-margin-block-start: 16px;
}

.doc h3 {
  font-size: 1.06rem;
  margin-block: 30px 10px;
  color: var(--accent);
  scroll-margin-block-start: 16px;
}

.doc h4 {
  font-size: 0.95rem;
  margin-block: 22px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}

.doc p { margin-block: 0 14px; }

.doc ul, .doc ol { margin-block: 0 14px; padding-inline-start: 24px; }
.doc li { margin-block: 5px; }

/* --- tables -------------------------------------------------------------- */
.doc .table-wrap { overflow-x: auto; margin-block-end: 18px; }

.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}

.doc th, .doc td {
  border: 1px solid var(--rule);
  padding: 7px 10px;
  text-align: start;
  vertical-align: top;
}

.doc th {
  background: var(--muted-bg);
  font-weight: 600;
}

.doc td code, .doc th code { font-size: 0.86em; }

/* --- code and statutory quotation ---------------------------------------- */
.doc pre {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.5;
  margin-block: 0 16px;
}

.doc pre code { font-size: inherit; }

.doc code {
  background: var(--muted-bg);
  border-radius: 3px;
  padding: 1px 4px;
}

.doc pre code { background: none; padding: 0; }

/* Statutory text and quoted project documents: the words themselves, set
   apart from the explanation around them so a reader never mistakes one for
   the other. */
.doc blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-inline-start: 3px solid var(--accent);
  background: var(--muted-bg);
  font-size: 0.93rem;
}

.doc blockquote p:last-child { margin-block-end: 0; }
.doc blockquote cite { display: block; margin-block-start: 6px; font-size: 0.82rem; color: var(--ink-dim); font-style: normal; }

/* --- callouts ------------------------------------------------------------ */
.doc .callout {
  border: 1px solid var(--rule);
  border-inline-start-width: 4px;
  border-radius: 5px;
  padding: 12px 16px;
  margin-block: 0 18px;
  font-size: 0.93rem;
}

.doc .callout .callout-head {
  font-weight: 600;
  display: block;
  margin-block-end: 5px;
}

.doc .callout p:last-child { margin-block-end: 0; }

.doc .callout.finding { border-inline-start-color: var(--discretion); background: var(--discretion-bg); }
.doc .callout.refusal { border-inline-start-color: var(--stop); background: var(--stop-bg); }
.doc .callout.limit   { border-inline-start-color: var(--undefined); background: var(--undefined-bg); }

/* --- stop/result name chips --------------------------------------------- */
.doc .kind {
  font-family: var(--mono);
  font-size: 0.82em;
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.doc .kind.discretion { background: var(--discretion-bg); color: var(--discretion); }
.doc .kind.undefined  { background: var(--undefined-bg);  color: var(--undefined); }
.doc .kind.conflict   { background: var(--conflict-bg);   color: var(--conflict); }
.doc .kind.answer     { background: var(--answer-bg);     color: var(--answer); }

.doc hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin-block: 34px;
}

.doc .backlink { margin-block-start: 40px; font-size: 0.88rem; }