/* Content styles only. Header, hero, sections, cards, buttons, badges, pills and the
   theme control come from tokens.css (the complete stylesheet of the Design Tokens page). */

.top .brand { text-decoration: none; color: inherit; }
.top nav a { text-decoration: none; }
.container > main { display: block; }
code { background: var(--bg-sunken); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }

/* ───────── status + evidence: the tokens page's .pill ───────── */
.status, .ev { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); padding: 0.35rem 0.6rem; border-radius: var(--radius-full); border: 1px solid var(--border-strong); }
.status::before, .ev::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: currentColor; }
.status[data-status="published"], .status[data-status="verified"] { color: var(--success); }
.status[data-status="draft"], .status[data-status="under-review"], .status[data-status="researching"] { color: var(--highlight-text); }
.status[data-status="planned"], .status[data-status="superseded"] { color: var(--fg-subtle); }
.ev-established { color: var(--success); }
.ev-well-supported { color: var(--accent-text); }
.ev-preliminary { color: var(--highlight-text); }
.ev-contested { color: var(--danger); }
.ev-hypothetical { color: var(--fg-muted); }
.ev-forecast { color: var(--highlight-text); }
.prose td .ev { margin-right: var(--space-2); }

/* ───────── article typography ───────── */
.art-head { padding-block: clamp(3rem, 2rem + 4vw, 7rem) var(--space-8); display: grid; gap: var(--space-4); }
.art-head h1 { font-size: var(--text-4xl); max-width: 22ch; }
.crumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.aka, .category { color: var(--fg-muted); font-size: var(--text-sm); }
.category { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fact { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }
.art-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-bottom: var(--space-16); }
.toc { position: sticky; top: 7rem; max-height: calc(100vh - 9rem); overflow: auto; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.toc ol, .toc-mobile ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a, .toc-mobile a { display: block; padding: var(--space-1) var(--space-3); border-left: 2px solid var(--border); color: var(--fg-muted); text-decoration: none; line-height: var(--leading-snug); }
.toc li.l3 a, .toc-mobile li.l3 a { padding-left: var(--space-6); font-size: var(--text-xs); }
.toc a:hover, .toc-mobile a:hover { color: var(--fg); }
.toc a.on { color: var(--accent-text); border-left-color: var(--accent); }
.toc-mobile { display: none; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-8); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.toc-mobile summary { cursor: pointer; font-weight: var(--weight-medium); font-size: var(--text-sm); }
.toc-mobile ol { margin-top: var(--space-3); }
@media (max-width: 62rem) { .art-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .toc { display: none; } .toc-mobile { display: block; } }

.prose { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.prose > * + * { margin-top: var(--space-5); }
.prose p { max-width: var(--measure); }
.prose h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-10); }
.prose h4 { font-size: var(--text-lg); margin-top: var(--space-8); }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 7rem; position: relative; }
.prose .anchor { position: absolute; left: -1.4rem; color: var(--fg-subtle); text-decoration: none; opacity: 0; font-weight: var(--weight-regular); }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose h4:hover .anchor { opacity: 1; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { margin-inline: 0; padding: var(--space-2) var(--space-6); border-left: 3px solid var(--highlight); color: var(--fg-muted); }
.prose pre { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); overflow: auto; background: var(--bg-sunken); border: 1px solid var(--border); line-height: var(--leading-normal); }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-10); }
.prose .planned, .chip.planned { color: var(--fg-muted); border-bottom: 1px dotted var(--fg-subtle); cursor: help; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass);}
.prose table { min-width: 36rem; font-size: var(--text-sm); line-height: var(--leading-normal); }
.prose th, .prose td { padding: var(--space-4) var(--space-6); vertical-align: top; }
.prose th { background: transparent; }
.prose td:first-child { font-weight: var(--weight-medium); }
.math-block { overflow-x: auto; padding-block: var(--space-3); }
.math-error { color: var(--danger); }
.katex { font-size: 1.05em; }

.rel { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); display: grid; gap: var(--space-4); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chips .lab { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); min-width: 6.5rem; }
.chip { display: inline-flex; gap: var(--space-2); padding: 0.35rem 0.75rem; border-radius: var(--radius-full); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg); text-decoration: none; }
.chip span { color: var(--fg-muted); font-family: var(--font-sans); }
a.chip:hover { background: var(--accent-subtle); border-color: var(--accent); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.pn .card { display: grid; gap: var(--space-2); padding: var(--space-6); text-decoration: none; color: var(--fg); }
.pn .card.r { text-align: right; }
.pn strong { font-weight: var(--weight-medium); line-height: var(--leading-snug); }
@media (max-width: 40rem) { .pn { grid-template-columns: 1fr; } .pn .card.r { text-align: left; } }