/* Layout only. Fonts, colours and theme modes come from the portal's own branding assets. */
body { max-width: 1040px; margin: auto; padding: 24px; line-height: 1.65; }
main { padding: clamp(20px, 4vw, 40px); background: var(--brand-surface); border: 1px solid var(--tone-dfe7ea, #dfe7ea); border-radius: 10px; }
.documentation-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 0 20px; }
:root[data-theme="dark"] .documentation-logo { filter: invert(1); }
h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: 28px; letter-spacing: -.04em; margin: 0 0 12px; }
h2 { font-size: 24px; letter-spacing: -.02em; margin-top: 2.5rem; }
h3 { font-size: 19px; }
a { color: var(--brand-accent); text-underline-offset: 3px; }
a:hover { color: var(--tone-285c65, #285c65); }
a:focus-visible, [data-doc-panel]:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 4px; }
nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 24px; font-size: 14px; }
pre { background: var(--tone-f1f5f6, #f1f5f6); color: var(--brand-text); padding: 16px; overflow-x: auto; border-left: 3px solid var(--brand-accent); border-radius: 0 6px 6px 0; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
pre code { overflow-wrap: normal; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--tone-dfe7ea, #dfe7ea); }
th { background: var(--tone-fafcfc, #fafcfc); font-weight: 600; }
.scroll { overflow-x: auto; }
.note { border-left: 4px solid var(--brand-accent); padding: 12px 18px; background: var(--tone-edf4f3, #edf4f3); }
.muted, .client-summary { color: var(--tone-5d7079, #5d7079); }
li { margin: .4rem 0; }
section { scroll-margin-top: 20px; }
.documentation-tabs { gap: 6px; padding: 6px; margin: 28px 0 24px; background: var(--tone-f1f5f6, #f1f5f6); border: 1px solid var(--tone-dfe7ea, #dfe7ea); border-radius: 10px; }
.documentation-tabs a { display: inline-flex; align-items: center; padding: 8px 10px; text-decoration: none; font-weight: 600; font-size: 14px; white-space: normal; }
.documentation-tabs a[aria-selected="true"] { background: var(--tone-e6f0ed, #e6f0ed); color: var(--tone-183e34, #183e34); border-color: var(--brand-accent); }
[data-doc-panel] > h2:first-child { margin-top: 0; }
.client-summary { margin-top: -6px; font-size: 14px; }
.client-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.client-downloads .button { white-space: normal; overflow-wrap: anywhere; }
.client-downloads [hidden] { display: none; }
.client-changelog { font-size: 14px; }
.changelog-entry { margin-top: 24px; padding: 20px; border: 1px solid var(--tone-dfe7ea, #dfe7ea); border-radius: 10px; }
.changelog-entry h3 { margin: 10px 0; }
.changelog-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.changelog-status { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--tone-f1f5f6, #f1f5f6); font-size: 14px; }
@media (max-width: 600px) {
    body { padding: 12px; }
    main { padding: 20px 16px; }
    .documentation-tabs { gap: 3px; }
    .documentation-tabs a { padding: 8px; }
}
@media print {
    :root[data-theme="dark"] .documentation-logo { filter: none; }
    .documentation-tabs { display: none; }
    [data-doc-panel][hidden] { display: block !important; }
    :root { color-scheme: light; }
    body, main { padding: 0; color: #000; background: #fff; border: 0; }
    pre { white-space: pre-wrap; color: #000; background: #f5f5f5; }
}