/* Encyclopedia of Abstractions — light theme accents */

/* Breathing room at the end of the body content. Material's default
   leaves the last paragraph/heading sitting almost directly against the
   page footer, which reads as cramped — especially on long prime pages
   that end with a Notes or References block. A few rems of bottom
   padding give the eye somewhere to land before the footer. Applies
   sitewide; benign on pages that don't have the cramped feel. */
.md-content__inner {
  padding-bottom: 3rem;
}

/* Tighten the gap between an H1 and a paragraph that immediately
   follows it. Some foundation essays (01_introduction, 03_meta_insights)
   start with a normal paragraph right after the H1, and Material's
   default H1 margin-bottom reads as a "large" gap there. Pages whose
   H1 is followed by a metadata <div> (primes, archetypes) aren't
   affected by this rule. */
.md-typeset h1 + p {
  margin-top: 0.2em;
}

/* Permalink anchors (the ¶ at the end of each heading) are inline-block
   in Material's default styling, which means they participate in
   line-wrapping decisions even when invisible. On long headings whose
   last line ends with <0.5em right margin, the permalink (despite
   being hidden) wraps to its own line, leaving a phantom blank line
   below the heading. Suppress the element entirely in non-hover state
   so it stops affecting layout; bring it back on hover. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) > .headerlink {
  display: none;
}
.md-typeset :is(h1, h2, h3, h4, h5, h6):hover > .headerlink,
.md-typeset :is(h1, h2, h3, h4, h5, h6) > .headerlink:focus {
  display: inline-block;
}

:root {
  --md-text-font: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --md-code-font: "JetBrains Mono", monospace;
}

/* Wider main content area for the long-form prime entries. */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 64rem;
  }
}

/* Concise/Detailed version toggle, rendered as a segmented control.
   Two side-by-side buttons share a single outer bordered container; the
   active one looks "pressed" (filled background, no inner border). No
   "Version:" label — the segmented control reads as a toggle on its
   own. Buttons are sized to roughly H2 weight so the choice is clearly
   the first major affordance below the title. */
.md-typeset nav.eoa-version-toggle {
  display: flex;
  align-items: center;
  margin: 0.6em 0 1em;
}
/* Segmented container — single border, rounded corners, buttons share
   their internal divider. Hides any radius overflow from the inner
   active background fill. */
.md-typeset nav.eoa-version-toggle .eoa-version-tabs {
  display: inline-flex;
  border: 1px solid var(--md-default-fg-color--lighter, #ccc);
  border-radius: 8px;
  overflow: hidden;
  line-height: 1.2;
}
.md-typeset nav.eoa-version-toggle .eoa-version-tab {
  display: inline-block;
  padding: 10px 22px;
  font-size: 1.15em;
  font-weight: 500;
  text-decoration: none;
  color: var(--md-default-fg-color--light, #555);
  background: transparent;
  border: 0;
}
.md-typeset nav.eoa-version-toggle .eoa-version-tab + .eoa-version-tab {
  border-left: 1px solid var(--md-default-fg-color--lighter, #ccc);
}
.md-typeset nav.eoa-version-toggle .eoa-version-tab:hover {
  background: var(--md-default-fg-color--lightest, #f3f3f3);
  color: var(--md-default-fg-color, #222);
}
.md-typeset nav.eoa-version-toggle .eoa-version-tab--active,
.md-typeset nav.eoa-version-toggle .eoa-version-tab--active:hover {
  background: var(--md-primary-fg-color, #1976d2);
  color: var(--md-primary-bg-color, #fff);
  cursor: default;
}

/* Encyclopedia metadata block at the top of each prime entry. */
.eoa-meta {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-primary-fg-color);
  background: var(--md-default-bg-color);
  padding: 0.6rem 0.9rem;
  margin: 0.4rem 0 1rem 0;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.55;
}

.eoa-meta dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.7rem;
}

.eoa-meta dt {
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin: 0;
}

.eoa-meta dd {
  margin: 0;
  color: var(--md-default-fg-color);
}

.eoa-meta a {
  color: var(--md-primary-fg-color);
}

.eoa-tabnote {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  margin: 0 0 0.5rem 0;
  font-style: italic;
}

/* Make tabbed content visually distinct so v1/v2 toggle reads clearly. */
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2) {
  font-weight: 700;
}

/* Click-to-sort tables (e.g. /domains/ index). */
.md-typeset table.eoa-sortable {
  width: 100%;
}

.md-typeset table.eoa-sortable thead th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.md-typeset table.eoa-sortable thead th.no-sort {
  cursor: default;
}

.md-typeset table.eoa-sortable thead th:hover:not(.no-sort) {
  background: var(--md-default-fg-color--lightest);
}

.md-typeset table.eoa-sortable thead th.num,
.md-typeset table.eoa-sortable tbody td.num {
  text-align: right;
}

.md-typeset table.eoa-sortable thead th.eoa-sort-asc::after {
  content: " ▲";
  font-size: 0.7em;
  color: var(--md-primary-fg-color);
}

.md-typeset table.eoa-sortable thead th.eoa-sort-desc::after {
  content: " ▼";
  font-size: 0.7em;
  color: var(--md-primary-fg-color);
}

/* Top-align cells in the registry tables. Without this, browsers
   vertically center a tall <td> (one with a long bulleted list inside)
   against shorter sibling cells (the Component name + count), and the
   first bullet of the list appears one line below the other cells'
   content. */
.md-typeset table.eoa-sortable tbody td {
  vertical-align: top;
}

/* Archetype Key Components table — 2-column layout with row anchors. */
.md-typeset table.eoa-key-components {
  width: 100%;
  margin-top: 0.5rem;
}

.md-typeset table.eoa-key-components th {
  text-align: left;
  white-space: nowrap;
}

.md-typeset table.eoa-key-components td {
  vertical-align: top;
}

.md-typeset table.eoa-key-components td:first-child {
  white-space: nowrap;
  width: 1%;  /* shrinks to content width so descriptions take the rest */
}

/* External-link affordance — opens a web search for the component
   name in a new tab. Subtle by default, prominent on hover.
   The ↗ (U+2197) glyph sits low in most fonts' em box, so
   `vertical-align: super` alone doesn't lift it convincingly above
   the bold text baseline. Use explicit relative positioning to
   nudge it up to roughly the cap-height of the adjacent text. */
.md-typeset a.eoa-search-out {
  display: inline-block;
  margin-left: 0.25em;
  color: var(--md-default-fg-color--light);
  opacity: 0.55;
  text-decoration: none;
  font-size: 0.8em;
  vertical-align: baseline;
  position: relative;
  top: -0.35em;
  line-height: 1;
}

.md-typeset a.eoa-search-out:hover {
  opacity: 1;
  color: var(--md-primary-fg-color);
}

/* Anchor scroll targeting — give synthesis-link targets a little
   breathing room when the browser scrolls to them. */
.md-typeset table.eoa-key-components tr[id] {
  scroll-margin-top: 4rem;
}

/* Zero the top margin of a <ul> inside a <td> so the first bullet
   shares its baseline with the sibling cells' text rather than
   starting a line below. */
.md-typeset table.eoa-sortable tbody td > ul {
  margin-top: 0;
}

/* Hide the Domains and Families top tabs from the visible top bar.
   They stay in the nav structure so per-domain and per-family pages
   get populated sidebars via navigation.prune; we just don't want
   them elevated to peers of Primes / Archetypes / Conceptual.

   POSITIONAL rule — applies at CSS-parse time so there's no FOUC
   (the JS-only label-based approach in site.js ran after first paint
   and caused a visible layout shift on every page load). The JS in
   hideBrowseTabs() is now a fallback for the case where tab order
   ever shifts; positions and labels both need to stay in sync.

   Tab positions (1-indexed, from .pages in build_site.py):
     1 Home  2 Primes  3 Archetypes  *4 Domains*  *5 Families*
     6 Applications  7 Conceptual  8 Downloads  9 About
   If you add, remove, or reorder a top tab, update these nth-child
   numbers AND the HIDDEN_TAB_LABELS array in assets/site.js. */
.md-tabs__list > .md-tabs__item:nth-child(4),
.md-tabs__list > .md-tabs__item:nth-child(5) {
  display: none !important;
}

/* By-Family index table. Three things being tuned here:
     1. Family column at 30% so compound names ("Authority, Governance &
        Due Process", "Commitment, Path-Dependence & Optionality") stop
        wrapping to 3-4 lines.
     2. Generous cell padding everywhere (esp. between the count and
        description columns) so the columns don't visually merge — the
        rendered "6Primes about…" run-together was a padding gap, not
        a content issue.
     3. Row separators + extra vertical padding so each family reads as
        a distinct row, not part of a wall of text. */
.md-typeset table.eoa-families-table {
  margin-top: 1.8rem;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.md-typeset table.eoa-families-table th,
.md-typeset table.eoa-families-table td {
  padding: 0.85rem 0.9rem;
  vertical-align: top;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset table.eoa-families-table thead th {
  border-top: none;
  border-bottom: 2px solid var(--md-default-fg-color--lighter);
  background: transparent;
}
.md-typeset table.eoa-families-table th:nth-child(1),
.md-typeset table.eoa-families-table td:nth-child(1) {
  width: 30%;
}
.md-typeset table.eoa-families-table th:nth-child(2),
.md-typeset table.eoa-families-table td:nth-child(2) {
  width: 10%;
  text-align: right;
  padding-right: 1.4rem;  /* clear gap before description column */
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;  /* belt-and-suspenders: never break a 2-3 digit count */
}
.md-typeset table.eoa-families-table th:nth-child(3),
.md-typeset table.eoa-families-table td:nth-child(3) {
  width: 60%;
  padding-left: 1rem;  /* breathing room from the count column */
  line-height: 1.55;
}

/* Quiet visual treatment for inline FACT citation markers (if any leak through). */
.md-typeset code.fact-id {
  font-size: 0.78em;
  color: var(--md-default-fg-color--lighter);
}

/* On prime pages, suppress Material's right-side table of contents.
   The wrapping <div data-md-hide-toc> is injected by overrides/main.html
   on URLs that start with primes/. We render a per-tab inline TOC at
   the top of each tab body instead, so the user only sees TOC entries
   for the tab they're viewing. */
[data-md-hide-toc] .md-sidebar.md-sidebar--secondary,
[data-md-hide-toc] .md-nav--secondary,
[data-md-hide-toc] [data-md-component="toc"] {
  display: none !important;
}

/* Make the main content fill the freed space on prime pages. */
[data-md-hide-toc] .md-content {
  max-width: 100%;
}

/* Per-tab inline TOC at the top of each tab body. Lives inside content
   tabs (v1/v2) so it auto-scopes to the visible tab. */
.md-typeset details.eoa-inline-toc {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-primary-fg-color);
  background: var(--md-default-bg-color);
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  margin: 0.2rem 0 1rem 0;
  font-size: 0.82rem;
  box-shadow: none;
}

.md-typeset details.eoa-inline-toc > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.2rem 0;
  color: var(--md-default-fg-color--light);
  background: transparent;
  border: none;
}

.md-typeset details.eoa-inline-toc > summary::before {
  display: none; /* let the native disclosure arrow do its thing */
}

.md-typeset details.eoa-inline-toc ul {
  margin: 0.4rem 0 0.2rem 0.5rem;
  padding-left: 0.6rem;
  line-height: 1.55;
}

.md-typeset details.eoa-inline-toc ul li {
  margin: 0.1rem 0;
}

.md-typeset details.eoa-inline-toc a {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset details.eoa-inline-toc a:hover {
  color: var(--md-primary-fg-color);
  text-decoration: underline;
}

/* Index card grid — used on landing page and section indexes. */
.eoa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.eoa-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  background: var(--md-default-bg-color);
}

.eoa-card h3 {
  margin: 0 0 0.3rem 0;
  font-size: 0.95rem;
}

.eoa-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.45;
}

/* Position in the DAG — type pills next to parent/child links.
   The pill names the relationship type (kind of / presupposes / part of
   / decompose / paired with) at-a-glance; the surrounding section header
   ("Parents" / "Children") and the reason text supply the direction. */
.md-typeset .dag-pill {
  display: inline-block;
  padding: 0.05em 0.5em;
  margin: 0 0.2em;
  border-radius: 0.6em;
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
  background: var(--md-default-fg-color--lightest, #eef);
  color: var(--md-default-fg-color--light, #555);
  border: 1px solid var(--md-default-fg-color--lighter, #ddd);
}

/* Subsumption: "kind of" — light blue (taxonomy / specialization). */
.md-typeset .dag-pill-subsumption {
  background: #e6f0fb;
  color: #1d4f8b;
  border-color: #c9def4;
}

/* Composition: "presupposes" / "part of" — soft amber (dependency). */
.md-typeset .dag-pill-composition {
  background: #fdf3df;
  color: #876221;
  border-color: #f1e1b3;
}

/* Decompose: "decompose" — light green (structural breakdown). */
.md-typeset .dag-pill-decompose {
  background: #e6f4ea;
  color: #1e6a3a;
  border-color: #c8e4d2;
}

/* Mutual: "paired with" — soft violet (bidirectional / out-of-topo). */
.md-typeset .dag-pill-mutual {
  background: #f0e7f6;
  color: #5b3e8c;
  border-color: #d9c4ed;
}


/* Section heading + inline diagram toggle. The "Show as diagram" toggle
   lives on the same row as the H2 to save vertical space. The heading
   text keeps its normal weight; the toggle is smaller and link-styled so
   it reads as a secondary affordance, not a competing title. */
.md-typeset h2.dag-rel-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6em;
}
.md-typeset h2.dag-rel-heading .dag-neighborhood-toggle {
  font-size: 0.55em;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Local-neighborhood SVG diagram inside the Relationships to Other Primes
   section. Default closed (via a .dag-disclosure toggle); when open shows
   the prime + immediate parents/children/mutuals as a click-navigable
   node-link diagram. Sized to scale to the container width so it stays
   readable inside the Material content column. */
.md-typeset .dag-neighborhood-toggle {
  font-size: 0.95em;
}
/* Flex container holding the SVG and its legend side-by-side. Legend
   wraps below when the column is too narrow (no JS, no media query —
   pure flex reflow). */
.md-typeset .dag-neighborhood-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0.6em 0 0.4em;
}
.md-typeset svg.dag-nbh-svg {
  display: block;
  flex: 0 0 auto;          /* take only the diagram's intrinsic width */
  max-width: 100%;         /* shrink if container is narrower */
  height: auto;
}
/* Legend — only the types present in this prime's diagram. Vertical
   column on the right when there's room; wraps below the SVG on narrow
   viewports via the wrap container's flex-wrap. The padding-top aligns
   the "Legend" title with the first row of node TEXT inside the SVG
   (parents row's vertical center sits at ~y=40 in SVG coords). */
.md-typeset .dag-nbh-legend {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--md-default-fg-color, #333);
  padding-top: 26px;
}
.md-typeset .dag-nbh-legend .legend-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.md-typeset .dag-nbh-legend .legend-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.md-typeset .dag-nbh-legend .legend-chip {
  display: inline-block;
  width: 18px;
  height: 14px;
  border-radius: 3px;
}
/* Node text — fill is theme-aware; non-text attributes (rect fill / stroke)
   are emitted inline on the SVG so each node can be colored by its edge
   type (subsumption / composition / decompose / mutual), mirroring the
   pill chips in the text section. */
.md-typeset svg.dag-nbh-svg .dag-nbh-text {
  font-size: 13px;
  fill: var(--md-default-fg-color, #333);
}
.md-typeset svg.dag-nbh-svg .dag-nbh-focus text {
  font-size: 14px;
  font-weight: 600;
  fill: var(--md-default-fg-color, #222);
}
.md-typeset svg.dag-nbh-svg .dag-nbh-link {
  cursor: pointer;
}
/* Hover: thicken the existing border by overriding stroke-width only;
   the per-type border color stays. */
.md-typeset svg.dag-nbh-svg .dag-nbh-link:hover .dag-nbh-rect {
  stroke-width: 2;
}
.md-typeset svg.dag-nbh-svg .dag-nbh-more {
  font-size: 13px;
  fill: var(--md-default-fg-color--light, #777);
  font-style: italic;
}


/* Click-to-expand disclosures in the Relationships to Other Primes section.
   Used for (a) Peers under each parent and (b) Children overflow when there
   are more than 5. Implemented as a plain <div> + <a> toggle plus a hidden
   <div> body, with JS in site.js handling the click. This deliberately
   avoids the native <details>/<summary> elements because both Material for
   MkDocs and the pymdownx.details extension apply admonition-style chrome
   to <details> that we can't reliably override. The plain-div structure
   has no theme-applied baseline styling to fight.

   Toggle text is rendered as a small understated link — same visual weight
   as the muted note we used in early drafts, but with click-to-expand. */

.md-typeset .dag-disclosure {
  margin: 0.4em 0 0.6em;
}

.md-typeset a.dag-disclosure-toggle {
  display: inline-block;
  cursor: pointer;
  font-size: 0.88em;
  color: var(--md-default-fg-color--light, #666);
  text-decoration: none;
  border-bottom: 1px dotted var(--md-default-fg-color--lighter, #bbb);
  padding: 0;
  background: transparent;
}

.md-typeset a.dag-disclosure-toggle:hover,
.md-typeset a.dag-disclosure-toggle:focus {
  color: var(--md-typeset-a-color, #4051b5);
  border-bottom-color: var(--md-typeset-a-color, #4051b5);
  outline: none;
}

/* Body of the disclosure — only visible when the toggle is clicked
   (the JS removes the [hidden] attribute, which lets normal display kick in). */
.md-typeset .dag-disclosure-body {
  margin: 0.3em 0 0.4em;
}

.md-typeset .dag-disclosure-body > ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.3em 0 0.4em;
}

.md-typeset .dag-disclosure-body > ul > li {
  margin: 0.2em 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* The overflow body lists child entries that carry a <p> with the full
   reason. Keep it aligned with the bullet text, not with the marker. */
.md-typeset .dag-disclosure-body > ul.dag-overflow-list > li > p {
  margin: 0.3em 0 0.6em;
}

/* ===========================================================================
   By Hierarchy browse page.
   Nested outline of the DAG with collapsible disclosures at every level. */

.md-typeset .hier-page {
  margin-top: 1em;
  font-size: 1em;
  line-height: 1.55;
}

/* Tighten the outline lists — no Material default bullets, no extra padding. */
.md-typeset ul.hier-roots,
.md-typeset ul.hier-children,
.md-typeset ul.hier-standalone-list {
  list-style: none;
  padding-left: 0;
  margin: 0.4em 0;
}

/* Each child level indents by a fixed amount, regardless of nesting depth. */
.md-typeset ul.hier-children {
  padding-left: 1.8em;
  margin-top: 0.3em;
  margin-bottom: 0.6em;
  margin-left: 0.4em;
  border-left: 1px dotted var(--md-default-fg-color--lighter, #ddd);
}

.md-typeset li.hier-node {
  margin: 0.15em 0;
  padding: 0;
  background: transparent;
  list-style: none;
}

/* The "row" holds the toggle, name, pill, and count on one line. */
.md-typeset .hier-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}

/* Toggle chevron and leaf spacer — both occupy the same horizontal width so
   prime names line up vertically regardless of whether a row is expandable.
   The chevron is the only visible affordance: noticeably larger, colored
   like a link, with hover state. Leaves get NO marker — the empty spacer
   keeps alignment without competing for attention. */
.md-typeset a.hier-toggle,
.md-typeset span.hier-toggle-spacer {
  display: inline-block;
  width: 1.6rem;       /* rem (not em) so the toggle's 1.35em font-size
                          doesn't inflate the gutter; leaves and chevron
                          rows reserve identical width */
  min-width: 1.6rem;
  text-align: center;
  vertical-align: baseline;
}
.md-typeset a.hier-toggle {
  color: var(--md-typeset-a-color, #4051b5);
  cursor: pointer;
  font-size: 1.35em;
  font-weight: 600;
  border-bottom: none;
  text-decoration: none;
  line-height: 1;
}
.md-typeset a.hier-toggle:hover,
.md-typeset a.hier-toggle:focus {
  color: var(--md-accent-fg-color, #1565c0);
  outline: none;
}
.md-typeset span.hier-toggle-spacer {
  /* Reserved space, no visible content */
  pointer-events: none;
}

/* Prime name link — slightly bolder than body text but not heading-loud. */
.md-typeset a.hier-name {
  font-weight: 500;
}

/* Child count: small, subtly grey. */
.md-typeset .hier-count {
  color: var(--md-default-fg-color--light, #888);
  font-size: 0.92em;
}

/* Secondary parents / mutual partners — small muted notes underneath the row. */
/* Italicized relationship phrase ("is a kind of", "presupposes", etc.)
   between the child name and the parent name. Plain italic — no color,
   no background, no chip styling. Reads as part of the sentence. */
.md-typeset em.hier-rel {
  font-style: italic;
  font-weight: 400;
  color: var(--md-default-fg-color, #333);
}

/* Inline "(also found under X, Y; paired with Z)" parenthetical on the
   same row as the prime. Muted color so it reads as secondary detail
   without breaking the visual line of the sentence. */
.md-typeset .hier-also-inline {
  color: var(--md-default-fg-color--light, #888);
  font-size: 0.92em;
}
.md-typeset .hier-also-inline a {
  color: var(--md-default-fg-color--light, #888);
  border-bottom: 1px dotted var(--md-default-fg-color--lighter, #bbb);
  text-decoration: none;
}
.md-typeset .hier-also-inline a:hover,
.md-typeset .hier-also-inline a:focus {
  color: var(--md-typeset-a-color, #4051b5);
  border-bottom-color: var(--md-typeset-a-color, #4051b5);
}

/* The hidden children wrapper — inherit disclosure-body semantics from earlier
   CSS so the show/hide toggle works the same way as on prime pages. */
.md-typeset .hier-children-wrap {
  margin: 0;
}

/* Standalone primes section — sits at the bottom of the page; collapsed by
   default like every other disclosure. */
.md-typeset .hier-standalone {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--md-default-fg-color--lightest, #eee);
}

.md-typeset .hier-standalone-note {
  font-size: 0.95em;
  color: var(--md-default-fg-color, #333);     /* body color — not muted */
  margin: 1em 0 0.8em;                         /* breathing space after the toggle */
}

/* Indent the standalone disclosure body so the note and the list visually
   sit under (not beside) the "Standalone primes" toggle when expanded.
   1.8rem matches the chevron column width plus a little extra, so the
   content aligns with the toggle's label text rather than its chevron. */
.md-typeset .hier-standalone .dag-disclosure-body {
  padding-left: 1.8rem;
}

/* Section-level toggle for the bottom-of-page Standalone Primes disclosure.
   Slightly bigger than the per-prime toggles in the tree, with a chevron
   rendered as a CSS ::before that flips based on aria-expanded. The label
   text uses regular body color (not muted), making the standalone heading
   read as a distinct section header rather than blending with the note. */
.md-typeset a.hier-section-toggle {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.05em;
  font-weight: 500;
  color: var(--md-default-fg-color, #333);
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  padding: 0;
}
.md-typeset a.hier-section-toggle::before {
  content: "▸";
  display: inline-block;
  width: 1.6rem;
  text-align: center;
  font-size: 1.3em;
  font-weight: 600;
  color: var(--md-typeset-a-color, #4051b5);
  line-height: 1;
}
.md-typeset a.hier-section-toggle[aria-expanded="true"]::before {
  content: "▾";
}
.md-typeset a.hier-section-toggle:hover,
.md-typeset a.hier-section-toggle:focus {
  color: var(--md-typeset-a-color, #4051b5);
  outline: none;
}
.md-typeset a.hier-section-toggle:hover::before {
  color: var(--md-accent-fg-color, #1565c0);
}

.md-typeset ul.hier-standalone-list {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.4em 0;
  columns: 2;
  column-gap: 2em;
}
.md-typeset ul.hier-standalone-list > li {
  margin: 0.15em 0;
  break-inside: avoid;
}

/* Parent name appended to each child row so it reads as a sentence:
   "Child is a kind of Parent". Plain text — not a link (the parent is the
   context one level up) and not bold (bold competes with the prime link). */
.md-typeset .hier-parent-context {
  font-weight: inherit;
  color: var(--md-default-fg-color, #333);
}

/* Hierarchy stats line — the dot-separated scan line below the intro
   paragraph. Reads as a single horizontal data block, not a sentence. */
.md-typeset p.hier-stats {
  font-size: 0.95em;
  color: var(--md-default-fg-color--light, #666);
  font-variant-numeric: tabular-nums;
  margin: 0.6em 0 0.4em;
  line-height: 1.4;
}

/* Orienting paragraph — pairs the DAG download offer with the
   type-system explainer as one short paragraph. Body-text black so it
   reads as substantive content rather than blending into the gray
   scan-stats line above. Top margin opens a clear visual gap from the
   stats; bottom margin breathes before the controls row. */
.md-typeset p.hier-orient {
  margin: 1.2em 0 1em;
  line-height: 1.5;
}

/* Subtree groups — each child of a parent is bucketed by its primary edge
   type, and each bucket gets a header that names the relationship for the
   whole group. Replaces the per-row "is a kind of X" repetition that used
   to dominate heavy umbrellas. */

.md-typeset .hier-group {
  margin: 0.35em 0 0.7em;
}

/* Group header: "Each child is a kind of Constraint (12)". Smaller and
   muted relative to body so the prime names underneath stay primary.
   Italic verb phrase matches the per-row italic from before. */
.md-typeset .hier-group-header {
  font-size: 0.92em;
  color: var(--md-default-fg-color--light, #666);
  padding-left: 2.6rem;     /* nested under the parent's name (which sits at
                               ~1.9rem due to chevron column + flex gap), so
                               the header reads as a label belonging to the
                               parent, not a sibling row at parent's depth */
  margin: 0.1em 0 0.25em;
  line-height: 1.5;
}

.md-typeset .hier-group-header em.hier-rel {
  font-style: italic;
  color: inherit;
}

.md-typeset .hier-group-count {
  color: var(--md-default-fg-color--lighter, #999);
  font-size: 0.95em;
}

/* Filter-as-you-type input above the By Hierarchy tree.
   Live-filters prime names; auto-expands ancestors of any match. */
/* Hierarchy controls row: filter input + Collapse all button side by side. */
.md-typeset .hier-controls {
  display: flex;
  align-items: stretch;
  gap: 0.5em;
  max-width: 32em;
  margin: 1.2em 0 0.8em;
}

.md-typeset input.hier-filter {
  flex: 1;
  min-width: 0;             /* allow flex shrinking on narrow viewports */
  padding: 0.45em 0.75em;
  font-size: 1em;
  color: var(--md-default-fg-color, #333);
  background: var(--md-default-bg-color, #fff);
  border: 1px solid var(--md-default-fg-color--lighter, #ccc);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}
.md-typeset input.hier-filter:focus {
  outline: none;
  border-color: var(--md-typeset-a-color, #4051b5);
  box-shadow: 0 0 0 2px var(--md-typeset-a-color-faint, rgba(64, 81, 181, 0.15));
}
.md-typeset input.hier-filter::placeholder {
  color: var(--md-default-fg-color--lighter, #aaa);
  font-style: italic;
}

.md-typeset button.hier-collapse-all {
  padding: 0.45em 0.9em;
  font-size: 0.95em;
  font-family: inherit;
  color: var(--md-default-fg-color, #333);
  background: var(--md-default-bg-color, #fff);
  border: 1px solid var(--md-default-fg-color--lighter, #ccc);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.md-typeset button.hier-collapse-all:hover:not(:disabled) {
  color: var(--md-typeset-a-color, #4051b5);
  border-color: var(--md-typeset-a-color, #4051b5);
}
.md-typeset button.hier-collapse-all:focus:not(:disabled) {
  outline: none;
  border-color: var(--md-typeset-a-color, #4051b5);
  box-shadow: 0 0 0 2px var(--md-typeset-a-color-faint, rgba(64, 81, 181, 0.15));
}
.md-typeset button.hier-collapse-all:disabled {
  color: var(--md-default-fg-color--lighter, #aaa);
  border-color: var(--md-default-fg-color--lightest, #eee);
  background: var(--md-code-bg-color, #f8f8f8);
  cursor: not-allowed;
  opacity: 0.7;
}

/* When the page is in filter mode (.hier-filter-active is added to .hier-page),
   any node not marked .hier-filter-match is hidden. Matching nodes and their
   ancestor nodes carry the .hier-filter-match marker, so the path from any
   root down to a match stays visible. */
.md-typeset .hier-filter-active .hier-node:not(.hier-filter-match) {
  display: none;
}

/* Empty groups (groups whose children are all hidden) also disappear so we
   don't leave dangling "Each child …" headers without any children below. */
.md-typeset .hier-filter-active .hier-group:not(:has(.hier-filter-match)) {
  display: none;
}

/* Same hide-on-no-match rule for items in the Standalone section. The
   filter machinery marks the matched <li class="hier-standalone-item">
   with .hier-filter-match (mirroring how .hier-node items work), and
   this rule hides the rest during filter mode. */
.md-typeset .hier-filter-active .hier-standalone-item:not(.hier-filter-match) {
  display: none;
}

/* As-you-type substring highlight inside the prime name. Soft yellow that
   sits in front of the link color without overpowering it; small radius
   keeps it readable on tightly-spaced rows. Inherits text color so the
   link stays the same hue. */
.md-typeset .hier-name mark.hier-highlight {
  background: #fff4a3;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
[data-md-color-scheme="slate"] .md-typeset .hier-name mark.hier-highlight {
  background: #6a5b1c;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
   ELI ladder integration on prime pages
   See conceptual/learnability-curriculum-construction.md for what this is.
   - .eoa-eli-subtitle: LEGACY — was the italic everyday-name under the H1;
     no longer emitted (names moved inside each level's content). Rule
     kept harmlessly in case any stale rendered files still reference it.
   - .eoa-eli-name: italic kid-friendly name on its own line, inside each
     ELI level's content, above the explanation paragraph. Renders only
     for ELI5/10/15 (ELI18 has no kid-friendly name by design).
   - .eoa-eli-block: always-visible 4-level ladder, injected inside the
     ## Core Idea section after its body text. Bold label + tabs + level
     content. No <details> chrome — uses standard page typography so it
     reads as part of the Core Idea section.
   - .eoa-eli-tab: smaller (~75%) version of the Concise/Detailed nav style
   ───────────────────────────────────────────────────────────────────── */

.md-typeset .eoa-eli-subtitle {
  margin: -0.4rem 0 0.8rem;
  font-size: 1.0rem;
  color: var(--md-default-fg-color--light, #666);
  font-weight: 400;
}
.md-typeset .eoa-eli-subtitle em {
  font-style: italic;
}

/* Kid-friendly name inside each ELI level's content. Italic, own line,
   slightly muted vs body text — pairs with the explanation below it. */
.md-typeset .eoa-eli-name {
  margin: 0 0 0.4rem;
  font-size: 1.0rem;
  color: var(--md-default-fg-color--light, #666);
  font-weight: 400;
}
.md-typeset .eoa-eli-name em {
  font-style: italic;
}
/* Placeholder slot on levels without a kid-friendly name (ELI18, or any
   level whose name is NA). Element exists and takes vertical space so the
   layout stays stable when toggling between levels, but renders nothing. */
.md-typeset .eoa-eli-name--empty {
  visibility: hidden;
}

.md-typeset .eoa-eli-block {
  margin: 1rem 0 1.2rem;
}
.md-typeset .eoa-eli-label {
  /* No font/size override — picks up the page-default body font.
     The <strong> inside the <p> handles the bolding. */
  margin: 0 0 0.4rem;
}

/* Level toggle — smaller than the Concise/Detailed nav. */
.md-typeset .eoa-eli-toggle {
  margin: 0.4rem 0 0.5rem;
}
.md-typeset .eoa-eli-tabs {
  display: inline-flex;
  border: 1px solid var(--md-default-fg-color--lighter, #ccc);
  border-radius: 3px;
  overflow: hidden;
  font-size: 0.78rem;
}
.md-typeset .eoa-eli-tab {
  padding: 0.18rem 0.55rem;
  color: var(--md-default-fg-color--light, #666) !important;
  text-decoration: none !important;
  background: var(--md-default-bg-color, #fff);
  border-right: 1px solid var(--md-default-fg-color--lightest, #eee);
  line-height: 1.4;
}
.md-typeset .eoa-eli-tabs > .eoa-eli-tab:last-child { border-right: none; }
.md-typeset .eoa-eli-tab:hover {
  background: var(--md-default-fg-color--lightest, #f5f5f5);
  color: var(--md-default-fg-color, #222) !important;
}
.md-typeset .eoa-eli-tab--active {
  background: var(--md-primary-fg-color, #3f51b5);
  color: var(--md-primary-bg-color, #fff) !important;
  font-weight: 600;
}
.md-typeset .eoa-eli-tab--active:hover {
  background: var(--md-primary-fg-color, #3f51b5);
  color: var(--md-primary-bg-color, #fff) !important;
}

/* Per-level explanation body — only the selected level is shown */
.md-typeset .eoa-eli-level { display: none; }
.md-typeset .eoa-eli-block .eoa-eli-level.eoa-eli-level--active {
  display: block;
}
.md-typeset .eoa-eli-body {
  /* Page-default body font/size; no size shrink so the explanation
     reads as part of the Core Idea section, not as supplementary text. */
  line-height: 1.6;
  color: var(--md-default-fg-color, #222);
}
.md-typeset .eoa-eli-body.eoa-eli-na {
  color: var(--md-default-fg-color--light, #777);
}