/* legal and plain CMS pages (views/site/document.php): an article for CMS HTML we don't control */
.doc-hero { padding-bottom: 24px; }
.doc-hero h1 { font-size: clamp(36px, 4.8vw, 58px); }
.doc-tabs { display: inline-flex; flex-wrap: wrap; justify-self: start; padding: 4px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); }
.doc-tabs a { padding: 8px 16px; border-radius: var(--r-pill); text-decoration: none; font: 600 14px var(--body); color: var(--ink-muted); }
.doc-tabs a:hover { color: var(--ink); }
.doc-tabs a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.doc-layout { display: grid; grid-template-columns: minmax(0, 760px); padding-block: 16px 120px; }
.doc-layout.has-toc { grid-template-columns: 240px minmax(0, 720px); gap: 56px; }
.doc-toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; font-size: 14px; }
.doc-toc summary { font: 600 12px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px; list-style: none; cursor: default; }
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc nav { display: grid; gap: 2px; margin-top: 6px; }
.doc-toc a { text-decoration: none; color: var(--ink-muted); padding: 6px 10px; border-radius: 8px; line-height: 1.35; }
.doc-toc a:hover { background: var(--panel); color: var(--ink); }

.doc { min-width: 0; }
.doc-meta { color: var(--ink-muted); font-size: 14px; margin-bottom: 8px; }
.doc-body { font-size: 17px; line-height: 1.7; color: var(--ink-muted); overflow-wrap: break-word; }
.doc-body > :first-child { margin-top: 0; }
.doc-body p, .doc-body ul, .doc-body ol, .doc-body table, .doc-body blockquote, .doc-body pre { margin: .8em 0 0; }
.doc-body div + div { margin-top: .4em; }
.doc-body h2, .doc-body .doc-h { font: 700 26px/1.2 var(--display); letter-spacing: -.025em; color: var(--ink); margin-top: 2em; scroll-margin-top: 100px; }
.doc-body .doc-h b, .doc-body .doc-h strong { font-weight: inherit; }
.doc-body h3 { font-size: 21px; color: var(--ink); margin-top: 1.8em; scroll-margin-top: 100px; }
.doc-body h4, .doc-body h5, .doc-body h6 { font-size: 18px; color: var(--ink); margin-top: 1.6em; }
.doc-body strong, .doc-body b { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--accent-hover); text-underline-offset: 2px; }
.doc-body ul, .doc-body ol { padding-left: 1.4em; }
.doc-body li + li { margin-top: .4em; }
.doc-body li::marker { color: var(--ink-faint); }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.doc-body blockquote { border-left: 3px solid var(--line); padding-left: 1em; }
.doc-body img { border-radius: var(--r-md); }
.doc-body table { display: block; overflow-x: auto; width: max-content; max-width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.doc-body th, .doc-body td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-body tr:last-child th, .doc-body tr:last-child td { border-bottom: 0; }
.doc-body th, .doc-body thead td { color: var(--ink); font-weight: 600; }
.doc-body td { font-variant-numeric: tabular-nums; }
/* inline styles left by old editors (fonts, colours, centring) */
.doc-body [style] { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; background-color: transparent !important; }
.doc-body p:empty { display: none; }

@media (max-width: 900px) {
  .doc-layout.has-toc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .doc-toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 8px; }
  .doc-toc summary { cursor: pointer; list-style: revert; }
  .doc-body { font-size: 16px; }
  .doc-body h2, .doc-body .doc-h { font-size: 23px; }
}