/* Article/content pages. Layers on top of style.css and uses only its design
   tokens, so light and dark mode come for free and there is one palette on the
   site rather than two. Loaded only by generated pages under /methodology/,
   /solutions/, /lists/ and the core content routes. */

.doc { padding: 40px 0 72px; }

/* Narrower than the 1240px product rail on purpose: this is prose, and prose at
   1240px is unreadable. ~72ch is the measure the body text is set to. */
.doc-wrap { max-width: 760px; }

.crumbs {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current="page"] { color: var(--ink-2); }

.doc h1 {
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

.doc-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.doc-sec { margin-top: 44px; }

.doc-sec h2 {
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: var(--ink);
}

.doc-sec p {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.doc-sec a { color: var(--accent); }

/* ---------- lists ---------- */

.doc-list { margin: 0 0 14px; padding-left: 20px; }
.doc-list li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 8px;
}

/* Term/definition blocks carry most of the methodology detail. The term is the
   scannable part, so it gets the ink. */
.doc-dl { margin: 0 0 14px; }
.doc-dl dt {
  font-weight: 650;
  color: var(--ink);
  font-size: 16.5px;
  margin-top: 18px;
}
.doc-dl dd {
  margin: 6px 0 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-2);
}

/* ---------- limitations ---------- */

/* Deliberately not styled as a warning box. These are facts about the product,
   not caveats to be visually apologised for — a red panel would make honest
   disclosure look like a defect report. */
.doc-limits { list-style: none; margin: 0; padding: 0; }
.doc-limits li {
  position: relative;
  padding: 14px 16px 14px 18px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.doc-limits .obs {
  display: inline;
  color: var(--ink-3);
  font-size: 14px;
  white-space: nowrap;
}

/* ---------- evidence ---------- */

.evidence {
  font-size: 16.5px !important;
  line-height: 1.7;
  color: var(--ink) !important;
  background: var(--accent-wash);
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 0 0 14px !important;
}

/* ---------- tables ---------- */

.tablewrap {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 520px;
}
.dtable th,
.dtable td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.dtable thead th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 650;
  background: var(--surface-2);
  white-space: nowrap;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td { color: var(--ink-2); }
.dtable code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.ok-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  color: var(--ok);
  background: var(--ok-wash);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------- faq ---------- */

.doc-faq { margin: 0; }
.doc-faq dt {
  font-weight: 650;
  color: var(--ink);
  font-size: 16.5px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.doc-faq dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.doc-faq dd {
  margin: 8px 0 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-2);
}

/* ---------- cta + footer matter ---------- */

.doc-cta {
  margin-top: 52px;
  padding: 28px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.doc-cta h2 { margin-bottom: 10px; }
.doc-cta p { margin-bottom: 18px; }

.doc-related ul { columns: 2; column-gap: 28px; }
.doc-related a { color: var(--accent); text-decoration: none; }
.doc-related a:hover { text-decoration: underline; }

.doc-note {
  font-size: 14.5px !important;
  color: var(--ink-3) !important;
  line-height: 1.6;
}

.doc-reviewed {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .doc { padding: 28px 0 56px; }
  .doc-sec { margin-top: 34px; }
  .doc-related ul { columns: 1; }
  .doc-cta { padding: 22px 20px; }
}