/* Semantic Markdown — shared stylesheet for the VS Code preview and HTML export. */

:root {
  --smd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --smd-font-serif: Georgia, Cambria, "Times New Roman", serif;
  --smd-font-mono: "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --smd-bg: #ffffff;
  --smd-fg: #1f2328;
  --smd-fg-muted: #59636e;
  --smd-surface: #f6f8fa;
  --smd-border: #d1d9e0;
  --smd-code-bg: #f3f4f6;

  --smd-red: #d52424; --smd-orange: #c4420c; --smd-amber: #b45309; --smd-yellow: #a16207;
  --smd-green: #15803d; --smd-teal: #0f7c73; --smd-cyan: #0d7895; --smd-blue: #2563eb;
  --smd-indigo: #4f46e5; --smd-purple: #9333ea; --smd-pink: #cf216d; --smd-gray: #686f7d;
  --smd-muted: var(--smd-fg-muted);
  --smd-accent-default: var(--smd-indigo);
  --smd-soft: 13%;
  /* Coloured text on a tint of its own colour (badges, pills) leans this much on the colour, the rest on --smd-fg. */
  --smd-ink: 80%;
  /* Keyboard focus ring: at least 3:1 against every background in both themes. */
  --smd-focus: var(--smd-accent-default);
}

:root[data-smd-theme="dark"] {
  --smd-bg: #0f1117;
  --smd-fg: #e6edf3;
  --smd-fg-muted: #9198a1;
  --smd-surface: #161b22;
  --smd-border: #30363d;
  --smd-code-bg: #1c2128;

  --smd-red: #f87171; --smd-orange: #fb923c; --smd-amber: #fbbf24; --smd-yellow: #facc15;
  --smd-green: #4ade80; --smd-teal: #2dd4bf; --smd-cyan: #22d3ee; --smd-blue: #60a5fa;
  --smd-indigo: #818cf8; --smd-purple: #c084fc; --smd-pink: #f472b6; --smd-gray: #9ca3af;
  --smd-accent-default: var(--smd-indigo);
  --smd-soft: 18%;
}

:root {
  --smd-red-soft: color-mix(in srgb, var(--smd-red) var(--smd-soft), transparent);
  --smd-orange-soft: color-mix(in srgb, var(--smd-orange) var(--smd-soft), transparent);
  --smd-amber-soft: color-mix(in srgb, var(--smd-amber) var(--smd-soft), transparent);
  --smd-yellow-soft: color-mix(in srgb, var(--smd-yellow) var(--smd-soft), transparent);
  --smd-green-soft: color-mix(in srgb, var(--smd-green) var(--smd-soft), transparent);
  --smd-teal-soft: color-mix(in srgb, var(--smd-teal) var(--smd-soft), transparent);
  --smd-cyan-soft: color-mix(in srgb, var(--smd-cyan) var(--smd-soft), transparent);
  --smd-blue-soft: color-mix(in srgb, var(--smd-blue) var(--smd-soft), transparent);
  --smd-indigo-soft: color-mix(in srgb, var(--smd-indigo) var(--smd-soft), transparent);
  --smd-purple-soft: color-mix(in srgb, var(--smd-purple) var(--smd-soft), transparent);
  --smd-pink-soft: color-mix(in srgb, var(--smd-pink) var(--smd-soft), transparent);
  --smd-gray-soft: color-mix(in srgb, var(--smd-gray) var(--smd-soft), transparent);
  --smd-muted-soft: var(--smd-surface);
  /* .smd-doc sets these again; here for blocks rendered outside it (the markdown-it plugin). */
  --smd-accent: var(--smd-accent-default);
  --smd-accent-soft: color-mix(in srgb, var(--smd-accent) var(--smd-soft), transparent);
}

html, body.smd-body {
  background: var(--smd-bg);
  color: var(--smd-fg);
}

body.smd-body {
  margin: 0;
  padding: 0 16px;
  font-family: var(--smd-font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.smd-doc {
  --smd-accent: var(--smd-accent-default);
  --smd-accent-soft: color-mix(in srgb, var(--smd-accent) var(--smd-soft), transparent);
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 0 96px;
  overflow-wrap: break-word;
}

/* ---------- Typography ---------- */
.smd-doc h1, .smd-doc h2, .smd-doc h3, .smd-doc h4, .smd-doc h5, .smd-doc h6 {
  line-height: 1.25;
  margin: 1.8em 0 0.6em;
  font-weight: 650;
  scroll-margin-top: 16px;
}
.smd-doc h1 { font-size: 2em; }
.smd-doc h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--smd-border); }
.smd-doc h3 { font-size: 1.25em; }
.smd-doc h4 { font-size: 1.05em; }
.smd-doc h5, .smd-doc h6 { font-size: .95em; color: var(--smd-fg-muted); }
.smd-doc h2::before {
  content: ""; display: inline-block; width: 4px; height: .9em; margin-right: .5em;
  border-radius: 2px; background: var(--smd-accent); vertical-align: -0.08em;
}
.smd-doc p, .smd-doc ul, .smd-doc ol, .smd-doc blockquote, .smd-doc .smd-table-wrap, .smd-doc pre { margin: 0 0 1em; }
.smd-doc a { color: var(--smd-accent); text-decoration: none; }
.smd-doc a:hover { text-decoration: underline; }
.smd-doc hr { border: 0; border-top: 1px solid var(--smd-border); margin: 2em 0; }
.smd-doc img { max-width: 100%; border-radius: 6px; }
.smd-doc blockquote {
  margin-left: 0; padding: .1em 1em; color: var(--smd-fg-muted);
  border-left: 4px solid var(--smd-border);
}
.smd-doc mark { background: var(--smd-yellow-soft); color: inherit; padding: 0 .2em; border-radius: 3px; box-shadow: inset 0 -2px 0 var(--smd-yellow); }
.smd-doc kbd {
  font-family: var(--smd-font-mono); font-size: .8em; padding: .1em .45em; border-radius: 5px;
  border: 1px solid var(--smd-border); border-bottom-width: 2px; background: var(--smd-surface);
}
.smd-kbd-plus { color: var(--smd-fg-muted); padding: 0 .15em; font-size: .85em; }

/* ---------- Code ---------- */
.smd-doc code {
  font-family: var(--smd-font-mono); font-size: .88em;
  background: var(--smd-code-bg); padding: .15em .4em; border-radius: 5px;
}
.smd-code { position: relative; margin: 0 0 1em; border: 1px solid var(--smd-border); border-radius: 8px; overflow: hidden; background: var(--smd-code-bg); }
.smd-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--smd-font-mono); font-size: .86em; line-height: 1.55; }
.smd-code pre code { background: none; padding: 0; font-size: 1em; line-height: inherit; }
.smd-code-title {
  font-family: var(--smd-font-mono); font-size: .8em; padding: 6px 16px; color: var(--smd-fg-muted);
  border-bottom: 1px solid var(--smd-border); background: var(--smd-surface);
}
.smd-code-lang {
  position: absolute; top: 6px; right: 10px; font-size: .7em; letter-spacing: .05em;
  text-transform: uppercase; color: var(--smd-fg-muted); pointer-events: none;
}
.smd-copy {
  position: absolute; bottom: 8px; right: 8px; opacity: 0; transition: opacity .15s;
  font: 12px var(--smd-font-sans); padding: 3px 8px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--smd-border); background: var(--smd-bg); color: var(--smd-fg-muted);
}
.smd-code:hover .smd-copy, .smd-code:focus-within .smd-copy { opacity: 1; }
@media (hover: none) { .smd-copy { opacity: 1; } }

/* highlight.js tokens */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-meta .hljs-keyword { color: var(--smd-purple); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute .hljs-string { color: var(--smd-green); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--smd-orange); }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--smd-blue); }
.hljs-type, .hljs-title.class_, .hljs-class .hljs-title { color: var(--smd-amber); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-property { color: var(--smd-cyan); }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--smd-fg-muted); font-style: italic; }
.hljs-deletion { color: var(--smd-red); }
.hljs-tag, .hljs-name { color: var(--smd-pink); }

/* ---------- Tables ---------- */
.smd-table-wrap { overflow-x: auto; }
.smd-doc table { border-collapse: collapse; width: max-content; max-width: 100%; font-size: .94em; }
.smd-doc th, .smd-doc td { border: 1px solid var(--smd-border); padding: 6px 12px; }
.smd-doc th { background: var(--smd-surface); font-weight: 600; }
.smd-doc tr:nth-child(2n) td { background: color-mix(in srgb, var(--smd-surface) 60%, transparent); }

/* ---------- Tasks ---------- */
.smd-task-list { list-style: none; padding-left: 1.2em; }
.smd-task { position: relative; }
.smd-task-box { margin: 0 .5em 0 -1.3em; vertical-align: -0.1em; accent-color: var(--smd-accent); cursor: pointer; }
.smd-task-done > p, .smd-task-done { color: var(--smd-fg-muted); }

/* ---------- Document header ---------- */
.smd-doc-header {
  padding: 24px 28px; margin: 0 0 32px; border-radius: 14px;
  background: linear-gradient(135deg, var(--smd-accent-soft), transparent 70%), var(--smd-surface);
  border: 1px solid var(--smd-border);
}
.smd-doc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82em; color: var(--smd-fg-muted); }
.smd-dot { opacity: .6; }
.smd-doc-title { margin: .35em 0 .2em !important; font-size: 2.1em !important; border: 0 !important; }
.smd-doc-title::before { display: none !important; }
.smd-doc-summary { font-size: 1.08em; color: var(--smd-fg-muted); margin: 0 0 .6em; }
.smd-doc-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .85em; }
.smd-doc-meta > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.smd-doc-meta-label { color: var(--smd-fg-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .78em; margin-right: 2px; }
.smd-doc-status {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .85em;
  --c: var(--smd-gray);
  padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) var(--smd-soft), transparent);
  color: color-mix(in srgb, var(--c) var(--smd-ink), var(--smd-fg));
}
.smd-doc-status-draft { --c: var(--smd-amber); }
.smd-doc-status-review { --c: var(--smd-blue); }
.smd-doc-status-approved { --c: var(--smd-green); }
.smd-doc-status-deprecated { --c: var(--smd-red); }
.smd-tag { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--smd-border); font-size: .92em; }

/* ---------- TOC ---------- */
.smd-toc { margin: 0 0 32px; padding: 14px 20px; border-left: 3px solid var(--smd-accent); background: var(--smd-surface); border-radius: 0 10px 10px 0; }
.smd-toc-title { font-weight: 650; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--smd-fg-muted); margin-bottom: 4px; }
.smd-toc ul { list-style: none; padding: 0; margin: 0; columns: 2 220px; }
.smd-toc li { margin: 2px 0; break-inside: avoid; }
.smd-toc-l3 { padding-left: 1em; font-size: .92em; }

/* ---------- Inline directives ---------- */
.smd-badge {
  --smd-badge: var(--smd-accent);
  display: inline-block; font-size: .78em; font-weight: 650; line-height: 1.5; padding: 0 .6em;
  border-radius: 999px; vertical-align: .08em; white-space: nowrap;
  color: color-mix(in srgb, var(--smd-badge) var(--smd-ink), var(--smd-fg));
  background: color-mix(in srgb, var(--smd-badge) var(--smd-soft), transparent);
  border: 1px solid color-mix(in srgb, var(--smd-badge) 35%, transparent);
}
.smd-status { display: inline-flex; align-items: center; gap: .4em; font-weight: 550; }
.smd-status-dot { width: .6em; height: .6em; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 8%, transparent); }
.smd-mention { color: var(--smd-accent); background: var(--smd-accent-soft); padding: 0 .35em; border-radius: 4px; font-weight: 550; }
.smd-progress { display: inline-flex; align-items: center; gap: .5em; vertical-align: middle; }
.smd-progress-track { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--smd-gray-soft); overflow: hidden; }
.smd-progress-bar { display: block; height: 100%; border-radius: 999px; background: var(--smd-accent); }
.smd-progress-label { font-size: .82em; color: var(--smd-fg-muted); font-variant-numeric: tabular-nums; }

/* ---------- Callouts ---------- */
.smd-callout {
  --c: var(--smd-gray);
  margin: 0 0 1.2em; padding: 12px 16px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.smd-callout-note { --c: var(--smd-gray); }
.smd-callout-info { --c: var(--smd-blue); }
.smd-callout-tip { --c: var(--smd-teal); }
.smd-callout-success { --c: var(--smd-green); }
.smd-callout-warning { --c: var(--smd-amber); }
.smd-callout-danger { --c: var(--smd-red); }
.smd-callout-question { --c: var(--smd-purple); }
.smd-callout-title { display: flex; gap: .5em; align-items: center; font-weight: 650; color: var(--c); }
.smd-callout-title + .smd-callout-body { margin-top: 4px; }
.smd-callout-body > :last-child { margin-bottom: 0; }
details.smd-callout > summary { cursor: pointer; list-style: none; }
/* The marker is decoration: the empty alternative text keeps screen readers from announcing it. */
details.smd-callout > summary::after { content: "▸"; content: "▸" / ""; margin-left: auto; transition: transform .15s; }
details.smd-callout[open] > summary::after { transform: rotate(90deg); }
details.smd-callout > summary::-webkit-details-marker { display: none; }
.smd-callout-icon { width: 1.2em; text-align: center; }

/* ---------- Front matter that could not be read ---------- */
.smd-frontmatter-error {
  margin: 0 0 1.2em; padding: 12px 16px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--smd-red) 30%, transparent);
  border-left: 4px solid var(--smd-red);
  background: color-mix(in srgb, var(--smd-red) 7%, transparent);
}
.smd-frontmatter-error-title { font-weight: 650; color: var(--smd-red); }
.smd-frontmatter-error-yaml { margin: 6px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--smd-code-bg); color: var(--smd-fg); overflow-x: auto; }
.smd-frontmatter-error-yaml code { font-family: var(--smd-font-mono); font-size: .85em; white-space: pre; }

/* ---------- Details ---------- */
.smd-details { margin: 0 0 1em; border: 1px solid var(--smd-border); border-radius: 10px; background: var(--smd-surface); }
.smd-details > summary { cursor: pointer; padding: 10px 16px; font-weight: 600; }
.smd-details-body { padding: 0 16px 4px; }

/* ---------- Card, box ---------- */
.smd-card {
  --smd-card-accent: var(--smd-accent);
  margin: 0 0 1.2em; border: 1px solid var(--smd-border); border-top: 3px solid var(--smd-card-accent);
  border-radius: 10px; padding: 14px 18px; background: var(--smd-surface);
}
.smd-card-title { font-weight: 650; font-size: 1.05em; margin-bottom: 6px; color: var(--smd-card-accent); }
.smd-card-body > :last-child, .smd-box > :last-child, .smd-column > :last-child { margin-bottom: 0; }
.smd-box { margin: 0 0 1.2em; padding: 14px 18px; border-radius: 10px; }
/* An unknown container keeps its title (spec §3): set as a card title, in the box's own text colour. */
.smd-box-title { font-weight: 650; font-size: 1.05em; margin-bottom: 6px; }

/* ---------- Includes (:::include) ---------- */
/* Included text reads as part of the document; on hover, a faint rule in the margin shows how far it goes. */
.smd-include { position: relative; }
.smd-include::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; border-radius: 1px;
  background: var(--smd-border); opacity: 0; transition: opacity .15s;
}
.smd-include:hover::before { opacity: 1; }
.smd-include-missing { margin: 0 0 1.2em; padding: 10px 14px; border: 1px dashed var(--smd-border); border-radius: 10px; }
.smd-include-missing > :last-child { margin-bottom: 0; }
.smd-include-note { color: var(--smd-fg-muted); font-size: .85em; margin-bottom: 6px; }

/* ---------- Columns ---------- */
.smd-columns { display: flex; gap: 20px; margin: 0 0 1.2em; flex-wrap: wrap; }
.smd-column { flex: 1 1 0; min-width: 220px; }

/* ---------- Tabs ---------- */
.smd-tabs { margin: 0 0 1.2em; border: 1px solid var(--smd-border); border-radius: 10px; overflow: hidden; }
.smd-tabbar { display: flex; gap: 2px; padding: 0 8px; background: var(--smd-surface); border-bottom: 1px solid var(--smd-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.smd-tabbar button {
  font: inherit; font-size: .9em; background: none; border: 0; color: var(--smd-fg-muted); cursor: pointer;
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.smd-tabbar button[aria-selected="true"] { color: var(--smd-fg); border-bottom-color: var(--smd-accent); font-weight: 600; }
.smd-tab { padding: 14px 16px 2px; }
.smd-tabs.smd-js .smd-tab-label { display: none; }
.smd-tabs.smd-js .smd-tab:not(.smd-active) { display: none; }
.smd-tab-label { font-weight: 650; margin-bottom: 6px; }
.smd-tab .smd-code { margin-bottom: 12px; }

/* ---------- Steps ---------- */
.smd-steps > ol { list-style: none; counter-reset: smd-step; padding-left: 0; }
.smd-steps > ol > li { counter-increment: smd-step; position: relative; padding: 0 0 18px 44px; }
.smd-steps > ol > li::before {
  content: counter(smd-step); position: absolute; left: 0; top: -.05em; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85em;
  color: var(--smd-bg); background: var(--smd-accent);
}
.smd-steps > ol > li:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--smd-border);
}

/* ---------- Audience blocks ---------- */
.smd-agent { margin: 0 0 1.2em; border: 1px dashed color-mix(in srgb, var(--smd-cyan) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--smd-cyan) 5%, transparent); }
.smd-agent-title { cursor: pointer; padding: 8px 14px; font-size: .9em; font-weight: 600; color: var(--smd-cyan); display: flex; gap: .5em; }
.smd-agent-body { padding: 0 16px 4px; font-size: .95em; }
.smd-human { margin: 0 0 1.2em; padding: 10px 16px; border-radius: 10px; background: var(--smd-surface); border: 1px solid var(--smd-border); }
.smd-human-title { font-size: .9em; font-weight: 600; color: var(--smd-fg-muted); display: flex; gap: .5em; margin-bottom: 4px; }
.smd-human-body > :last-child, .smd-agent-body > :last-child, .smd-details-body > :last-child { margin-bottom: 0.6em; }

/* ---------- Diagrams & math ---------- */
.smd-diagram { margin: 0 0 1.2em; padding: 16px; border: 1px solid var(--smd-border); border-radius: 10px; background: var(--smd-surface); overflow-x: auto; text-align: center; }
.smd-diagram pre.smd-mermaid { margin: 0; text-align: left; font-family: var(--smd-font-mono); font-size: .85em; color: var(--smd-fg-muted); white-space: pre-wrap; }
.smd-diagram svg { max-width: 100%; height: auto; }
.smd-diagram-pending { box-sizing: border-box; overflow: hidden; }
.smd-math-block { overflow-x: auto; margin: 0 0 1em; }

/* ---------- Figures and references ---------- */
.smd-figure { display: flex; flex-direction: column; margin: 0 0 1.2em; }
.smd-figure > :nth-last-child(2) { margin-bottom: 0; }
.smd-figure > p:has(> img:only-child) { text-align: center; }
.smd-figure img { max-width: 100%; height: auto; }
.smd-figure-caption { margin-top: .6em; font-size: .9em; color: var(--smd-fg-muted); text-align: center; }
.smd-figure-label { font-weight: 650; color: var(--smd-fg); }
/* Tables are captioned above, as is usual for tables. */
.smd-figure-table > .smd-figure-caption { order: -1; margin: 0 0 .6em; }
.smd-ref { white-space: nowrap; }
.smd-ref-missing { color: var(--smd-red); text-decoration: underline dotted; }

/* ---------- Glossary and defined terms ---------- */
.smd-glossary { margin: 0 0 1.2em; }
.smd-glossary-title { font-weight: 650; margin-bottom: .5em; }
.smd-glossary-list { display: grid; grid-template-columns: minmax(6em, max-content) 1fr; gap: .45em 1.2em; margin: 0; }
.smd-glossary-list > dt { font-weight: 650; }
.smd-glossary-list > dd { margin: 0; }
.smd-glossary-list > dd > :last-child { margin-bottom: 0; }
.smd-glossary-list dfn { font-style: normal; }
/* A term's first use in a section: body text with a dotted underline; the definition is its tooltip and link target. */
.smd-term, .smd-doc a.smd-term { color: inherit; text-decoration: underline dotted var(--smd-fg-muted); text-underline-offset: .2em; cursor: help; }
.smd-term:hover, .smd-doc a.smd-term:hover { text-decoration: underline solid var(--smd-fg-muted); }
.smd-term abbr { text-decoration: none; }
@media (max-width: 480px) {
  .smd-glossary-list { grid-template-columns: 1fr; gap: .15em; }
  .smd-glossary-list > dd { margin-bottom: .45em; }
}

/* ---------- Changelog (release history) ---------- */
.smd-changelog { margin: 0 0 1.2em; }
.smd-changelog-title { font-weight: 650; margin-bottom: .5em; }
.smd-changelog-list { list-style: none; padding-left: 0; margin: 0 0 0 6px; border-left: 2px solid var(--smd-border); }
.smd-changelog-entry { position: relative; padding: 0 0 .6em 22px; }
.smd-changelog-entry::before {
  content: ""; position: absolute; left: -7px; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--smd-bg); border: 2px solid var(--smd-accent);
}
.smd-changelog-entry:first-child::before { background: var(--smd-accent); }
.smd-doc .smd-changelog-entry > :first-child { margin-top: 0; padding-bottom: 0; border-bottom: 0; }
.smd-doc .smd-changelog-entry > h2::before { display: none; }
.smd-changelog-entry > :last-child { margin-bottom: 0; }
.smd-changelog-version { font-variant-numeric: tabular-nums; }
.smd-changelog-date { font-size: .8em; font-weight: 400; color: var(--smd-fg-muted); font-variant-numeric: tabular-nums; }
.smd-changelog-date-invalid { text-decoration: underline dotted var(--smd-red); }

/* ---------- Quotes with attribution ---------- */
.smd-quote { margin: 0 0 1.2em; }
.smd-doc .smd-quote > blockquote { margin: 0; color: var(--smd-fg); border-left-color: var(--smd-accent); font-style: italic; }
.smd-quote > blockquote > :last-child { margin-bottom: 0; }
.smd-quote-caption { margin-top: .45em; padding-left: calc(1em + 4px); font-size: .9em; color: var(--smd-fg-muted); }
.smd-quote-author { font-weight: 600; color: var(--smd-fg); }
.smd-error { color: var(--smd-red); font-family: var(--smd-font-mono); font-size: .85em; white-space: pre-wrap; display: block; text-align: left; }

/* ---------- Utility classes from {.class} ---------- */
.smd-u-center { text-align: center; }
.smd-u-muted { color: var(--smd-fg-muted); }
.smd-u-lead { font-size: 1.15em; }

@media (max-width: 600px) {
  .smd-doc { padding-top: 16px; }
  .smd-doc-header { padding: 18px; }
  .smd-columns { flex-direction: column; }
}

/* ---------- Code: line highlights ---------- */
pre.smd-has-hl { position: relative; }
pre.smd-has-hl code { position: relative; }
.smd-hl-line {
  position: absolute; left: 0; right: 0; height: 1.55em; pointer-events: none;
  background: color-mix(in srgb, var(--smd-accent) 14%, transparent);
  border-left: 3px solid var(--smd-accent);
}

/* ---------- Headings hidden from agents ---------- */
.smd-doc [data-agent="skip"]::after {
  content: "humans only"; margin-left: .6em; vertical-align: middle;
  font: 600 .5em/1.6 var(--smd-font-sans); letter-spacing: .06em; text-transform: uppercase;
  padding: .1em .6em; border-radius: 999px; color: var(--smd-fg-muted); border: 1px solid var(--smd-border);
}
.smd-doc h2[data-agent="skip"]::after { font-size: .45em; }

/* ---------- Priority & due ---------- */
.smd-priority {
  --smd-badge: var(--smd-gray);
  display: inline-block; font-size: .75em; font-weight: 750; line-height: 1.5; padding: 0 .5em; border-radius: 4px;
  color: var(--smd-bg); background: var(--smd-badge); vertical-align: .08em; letter-spacing: .02em;
}
.smd-due {
  display: inline-block; font-size: .8em; line-height: 1.5; padding: 0 .5em; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--smd-border); color: var(--smd-fg-muted); vertical-align: .05em;
}
.smd-due-soon { color: color-mix(in srgb, var(--smd-amber) var(--smd-ink), var(--smd-fg)); border-color: color-mix(in srgb, var(--smd-amber) 45%, transparent); background: var(--smd-amber-soft); }
.smd-due-overdue { color: color-mix(in srgb, var(--smd-red) var(--smd-ink), var(--smd-fg)); border-color: color-mix(in srgb, var(--smd-red) 45%, transparent); background: var(--smd-red-soft); font-weight: 650; }
.smd-task-done .smd-due { color: var(--smd-fg-muted); background: none; border-color: var(--smd-border); font-weight: 400; }
.smd-task-done .smd-due-note { display: none; }

/* ---------- Metric tiles ---------- */
.smd-metric {
  display: inline-flex; flex-direction: column; gap: 2px; vertical-align: top; min-width: 130px;
  margin: 4px 8px 4px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--smd-surface); border: 1px solid var(--smd-border);
}
.smd-metric-value { font-size: 1.6em; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.smd-metric-label { font-size: .78em; color: var(--smd-fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.smd-metric-delta { font-size: .8em; font-weight: 650; }
.smd-metric-good { color: var(--smd-green); }
.smd-metric-bad { color: var(--smd-red); }
.smd-metric-flat { color: var(--smd-fg-muted); }

/* ---------- Decision ---------- */
.smd-decision {
  --c: var(--smd-blue);
  margin: 0 0 1.2em; border: 1px solid var(--smd-border); border-radius: 10px; padding: 12px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%);
  border-left: 4px solid var(--c);
}
.smd-decision-accepted { --c: var(--smd-green); }
.smd-decision-rejected { --c: var(--smd-red); }
.smd-decision-superseded, .smd-decision-deprecated { --c: var(--smd-gray); }
.smd-decision-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8em; }
.smd-decision-label { font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--smd-fg-muted); }
.smd-decision-status { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 0 .6em; border-radius: 999px; color: color-mix(in srgb, var(--c) var(--smd-ink), var(--smd-fg)); background: color-mix(in srgb, var(--c) 15%, transparent); }
.smd-decision-facts { color: var(--smd-fg-muted); display: inline-flex; gap: 6px; }
.smd-decision-title { font-weight: 650; font-size: 1.05em; margin: 6px 0 4px; }
.smd-decision-superseded .smd-decision-title, .smd-decision-rejected .smd-decision-title { text-decoration: line-through; opacity: .75; }
.smd-decision-body > :last-child, .smd-risk-body > :last-child, .smd-api-body > :last-child { margin-bottom: 0; }

/* ---------- Risk ---------- */
.smd-risk { --c: var(--smd-amber); margin: 0 0 1.2em; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--c) 6%, transparent); }
.smd-risk-low { --c: var(--smd-green); }
.smd-risk-high { --c: var(--smd-orange); }
.smd-risk-critical { --c: var(--smd-red); }
.smd-risk-head { display: flex; gap: .5em; align-items: center; font-weight: 650; color: var(--c); }
.smd-risk-facts { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82em; color: var(--smd-fg-muted); margin: 2px 0 6px; }
.smd-risk-facts b { color: var(--c); text-transform: uppercase; font-size: .9em; letter-spacing: .04em; }
.smd-risk-status { text-transform: uppercase; font-weight: 650; letter-spacing: .04em; }

/* ---------- Risk matrix (:::risk-matrix, smd risks --html) ---------- */
.smd-risk-band-low { --c: var(--smd-green); }
.smd-risk-band-moderate { --c: var(--smd-yellow); }
.smd-risk-band-high { --c: var(--smd-orange); }
.smd-risk-band-severe { --c: var(--smd-red); }
.smd-risk-matrix { margin: 0 0 1.2em; }
.smd-risk-matrix-title { font-weight: 650; margin: 0 0 6px; }
.smd-risk-matrix-wrap { overflow-x: auto; margin: 0 0 1em; }
.smd-doc table.smd-risk-matrix-grid { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: separate; border-spacing: 4px; font-size: .88em; }
.smd-doc .smd-risk-matrix-grid th { background: none; border: 0; padding: 4px 6px; color: var(--smd-fg-muted); font-weight: 600; }
.smd-doc .smd-risk-matrix-grid thead th { text-align: center; }
.smd-doc .smd-risk-matrix-grid tbody th { text-align: right; white-space: nowrap; }
.smd-doc .smd-risk-matrix-grid th.smd-risk-matrix-corner { text-align: left; font-weight: 500; font-size: .9em; }
.smd-doc .smd-risk-cell { vertical-align: top; height: 3.4em; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 8px; padding: 6px 8px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.smd-doc .smd-risk-cell-empty { background: color-mix(in srgb, var(--c) 10%, transparent); border-color: color-mix(in srgb, var(--c) 20%, transparent); }
.smd-risk-cell-count { float: right; font-weight: 700; color: color-mix(in srgb, var(--c) var(--smd-ink), var(--smd-fg)); margin-left: 4px; }
.smd-doc .smd-risk-cell-list { list-style: none; margin: 0; padding: 0; }
.smd-doc .smd-risk-cell-list li { margin: 0 0 3px; line-height: 1.3; }
/* The band colour behind them is too strong for accent-coloured links. */
.smd-doc .smd-risk-cell-list a { color: var(--smd-fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--smd-fg) 45%, transparent); }
.smd-risk-matrix-body > :last-child { margin-bottom: 0; }
.smd-risk-register-summary { color: var(--smd-fg-muted); }
.smd-risk-score { display: inline-block; min-width: 2em; text-align: center; font-weight: 700; border-radius: 999px; padding: 0 .5em; color: color-mix(in srgb, var(--c) var(--smd-ink), var(--smd-fg)); background: color-mix(in srgb, var(--c) 18%, transparent); }
.smd-risk-where { color: var(--smd-fg-muted); font-size: .9em; }
.smd-doc .smd-risk-table td { vertical-align: top; }
.smd-doc .smd-risk-table tr:target td { background: var(--smd-accent-soft); }

/* ---------- API endpoint ---------- */
.smd-api { margin: 0 0 1.2em; border: 1px solid var(--smd-border); border-radius: 10px; overflow: hidden; }
.smd-api-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; background: var(--smd-surface); border-bottom: 1px solid var(--smd-border); }
.smd-api-method { --c: var(--smd-gray); font: 700 .75em/1.7 var(--smd-font-mono); padding: 0 .6em; border-radius: 5px; color: var(--smd-bg); background: var(--c); letter-spacing: .04em; }
.smd-api-get { --c: var(--smd-blue); } .smd-api-post { --c: var(--smd-green); } .smd-api-put, .smd-api-patch { --c: var(--smd-amber); }
.smd-api-delete { --c: var(--smd-red); } .smd-api-ws, .smd-api-event, .smd-api-rpc { --c: var(--smd-purple); }
.smd-doc code.smd-api-path { background: none; padding: 0; font-size: .92em; font-weight: 600; }
.smd-api-title { color: var(--smd-fg-muted); font-size: .92em; }
.smd-api-auth { margin-left: auto; font-size: .78em; color: var(--smd-fg-muted); }
.smd-api-body { padding: 12px 14px; }

/* ---------- Timeline ---------- */
.smd-timeline > ul, .smd-timeline > ol { list-style: none; padding-left: 0; margin-left: 6px; border-left: 2px solid var(--smd-border); }
.smd-timeline > ul > li, .smd-timeline > ol > li { position: relative; padding: 0 0 14px 22px; }
.smd-timeline > ul > li::before, .smd-timeline > ol > li::before {
  content: ""; position: absolute; left: -7px; top: .45em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--smd-bg); border: 2px solid var(--smd-accent);
}
.smd-timeline li.smd-task-done::before { background: var(--smd-green); border-color: var(--smd-green); }
.smd-timeline li.smd-task .smd-task-box { margin-left: 0; }

/* ---------- Footnotes ---------- */
.smd-footnote-ref { font-size: .75em; line-height: 0; }
.smd-footnote-ref a { padding: 0 .1em; font-variant-numeric: tabular-nums; }
.smd-footnotes { margin-top: 2.5em; padding-top: .8em; border-top: 1px solid var(--smd-border); font-size: .88em; color: var(--smd-fg-muted); }
.smd-footnotes ol { padding-left: 1.6em; margin: 0; }
.smd-footnotes li { margin: 0 0 .4em; }
.smd-footnotes li > p { margin: 0 0 .4em; }
.smd-footnotes li:target, .smd-footnote-ref a:target { background: var(--smd-accent-soft); border-radius: 4px; }
.smd-footnote-backref { text-decoration: none; font-family: var(--smd-font-sans); }
.smd-footnote-backref sup { font-size: .7em; }

/* ---------- Keyboard focus, screen-reader text, motion ---------- */
.smd-doc :focus-visible { outline: 2px solid var(--smd-focus); outline-offset: 2px; }
/* Inside boxes that clip their overflow, the ring is drawn inside. */
.smd-tabbar button:focus-visible, .smd-tab:focus-visible, .smd-code :focus-visible, .smd-table-wrap:focus-visible,
.smd-diagram:focus-visible, .smd-math-block:focus-visible, .smd-risk-matrix-wrap:focus-visible { outline-offset: -2px; }
.smd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .smd-body *, .smd-body *::before, .smd-body *::after, .smd-doc *, .smd-doc *::before, .smd-doc *::after {
    transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important;
  }
}

/* ---------- Print (the browser's Print and smd pdf) ---------- */
/* Paper size comes from the print dialog (or smd pdf --format); these are the margins. */
@page { margin: 16mm 14mm; }

@media print {
  /* Always the light palette: dark pages waste toner and lose contrast on paper. */
  :root, :root[data-smd-theme="dark"] {
    --smd-bg: #ffffff;
    --smd-fg: #1f2328;
    --smd-fg-muted: #59636e;
    --smd-surface: #f6f8fa;
    --smd-border: #d1d9e0;
    --smd-code-bg: #f3f4f6;
    --smd-red: #d52424; --smd-orange: #c4420c; --smd-amber: #b45309; --smd-yellow: #a16207;
    --smd-green: #15803d; --smd-teal: #0f7c73; --smd-cyan: #0d7895; --smd-blue: #2563eb;
    --smd-indigo: #4f46e5; --smd-purple: #9333ea; --smd-pink: #cf216d; --smd-gray: #686f7d;
    --smd-soft: 13%;
  }
  html, body.smd-body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.smd-body { padding: 0; font-size: 11pt; }
  .smd-doc { max-width: none; padding: 0; }

  /* No screen-only UI; agent instructions are for agents, not readers of the printout. */
  .smd-copy, .smd-tabbar, .smd-agent, .smd-u-no-print { display: none !important; }
  /* Included text prints as part of the page, without the hover rule. */
  .smd-include::before { display: none; }

  /* Tabs print as stacked panes, each under its label. */
  .smd-tabs.smd-js .smd-tab:not(.smd-active), .smd-tabs.smd-js .smd-tab-label { display: block; }
  .smd-tab + .smd-tab { border-top: 1px solid var(--smd-border); }

  /* Nothing scrolls on paper: wrap long code lines, let wide blocks show in full. */
  .smd-code pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
  .smd-table-wrap, .smd-diagram, .smd-math-block, .smd-risk-matrix-wrap { overflow: visible; }
  .smd-doc table { max-width: 100%; }
  .smd-doc thead { display: table-header-group; }

  /* Page breaks: keep headings with what follows, and blocks in one piece where they fit. */
  .smd-doc h1, .smd-doc h2, .smd-doc h3, .smd-doc h4, .smd-doc h5, .smd-doc h6,
  .smd-callout-title, .smd-card-title, .smd-box-title, .smd-tab-label, .smd-code-title { break-after: avoid; page-break-after: avoid; }
  .smd-callout, .smd-card, .smd-box, .smd-include-missing, .smd-details, .smd-human, .smd-decision, .smd-risk, .smd-api, .smd-metric,
  .smd-diagram, .smd-code, .smd-math-block, .smd-doc-header, .smd-doc tr, .smd-doc img, .smd-doc blockquote,
  .smd-steps > ol > li, .smd-timeline li, .smd-figure, .smd-changelog-entry, .smd-quote { break-inside: avoid; page-break-inside: avoid; }
  /* A caption stays on the page of what it describes (above a table, below anything else). */
  .smd-figure-caption { break-before: avoid; page-break-before: avoid; }
  .smd-figure-table > .smd-figure-caption { break-after: avoid; page-break-after: avoid; }
  /* An attribution stays with its quote. */
  .smd-quote-caption { break-before: avoid; page-break-before: avoid; }
  /* A term stays on the page of its definition. */
  .smd-glossary-title, .smd-glossary-list > dt { break-after: avoid; page-break-after: avoid; }
  .smd-doc p { orphans: 3; widows: 3; }

  /* Footnotes stay a section at the end; back links lead nowhere on paper. */
  .smd-footnotes li { break-inside: avoid; page-break-inside: avoid; }
  .smd-footnote-backref { display: none; }

  /* {.page-break} on a heading or block starts it on a new page. */
  .smd-u-page-break { break-before: page; page-break-before: always; }
}