/* ---------------------------------------------------------------------------
   site.css — components for the prodggect-20xx voter guide
   ---------------------------------------------------------------------------
   BEM naming, flat, following the convention read off destiny.gg's stylesheet.
   Depends on tokens.css.
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; }
p { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrapper { width: var(--wrapper); margin-inline: auto; }
.wrapper--narrow { width: var(--wrapper-narrow); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Navbar --------------------------------------------------------------- */

.navbar { display: flex; align-items: center; gap: 2rem; padding: 1.5rem 0; }

.navbar__brand {
  font: 700 var(--text-base)/var(--leading-base) var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.navbar__brand:hover { text-decoration: none; }
.navbar__brand span { color: var(--accent-text); }

.navbar__items { display: flex; gap: .5rem; margin-left: auto; }

.navbar__item {
  display: flex; align-items: center; height: 2.5rem; padding: 0 .75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font: 500 var(--text-sm)/var(--leading-sm) var(--font-body);
  transition: all var(--transition);
}
.navbar__item:hover { background-color: var(--bg-raised); color: var(--text-primary); text-decoration: none; }
.navbar__item--active { color: var(--text-primary); background-color: var(--bg-raised); }

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex; justify-content: center; align-items: center;
  flex-shrink: 0; height: 2.5rem; padding: 0 1rem; gap: .5rem;
  white-space: nowrap; background: none; border: none;
  border-radius: var(--radius-md);
  font: 600 var(--text-sm)/var(--leading-sm) var(--font-body);
  cursor: pointer; user-select: none;
  transition: all var(--transition);
}
.button:hover { text-decoration: none; }

.button--primary { background-color: var(--accent-solid); color: #fff; }
.button--primary:not(:disabled):hover  { background-color: var(--accent-solid-hover); }
.button--primary:not(:disabled):active { background-color: var(--accent-solid-active); }

/* border via box-shadow so the box model never shifts on hover — dgg's trick */
.button--secondary {
  background-color: var(--bg-surface); color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-interactive);
}
.button--secondary:not(:disabled):hover  { background-color: var(--bg-raised); box-shadow: 0 0 0 1px var(--border-hover); }
.button--secondary:not(:disabled):active { background-color: var(--slate-1); }

.button--tertiary { color: var(--text-primary); }
.button--tertiary:not(:disabled):hover { background-color: var(--bg-raised); }

.button:disabled { opacity: .5; cursor: not-allowed; }

/* --- Badges --------------------------------------------------------------- */
/* dgg's recipe, generalized: bg = step 3, text = step 11, border = step 6 */

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.5rem; padding: 0 .75rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font: 600 var(--text-xs)/var(--leading-xs) var(--font-body);
  white-space: nowrap;
}
.badge--neutral { background-color: var(--slate-3); color: var(--slate-11); border-color: var(--slate-6); }
.badge--primary { background-color: var(--blue-3);  color: var(--blue-11);  border-color: var(--blue-6); }
.badge--success { background-color: var(--jade-3);  color: var(--jade-11);  border-color: var(--jade-6); }
.badge--danger  { background-color: var(--red-3);   color: var(--red-11);   border-color: var(--red-6); }
.badge--warning { background-color: var(--amber-3); color: var(--amber-11); border-color: var(--amber-6); }

/* --- Stance chip ---------------------------------------------------------- */
/* The guide's core vocabulary. Same 3/11/6 recipe, one hue per stance family. */

.stance {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2rem; padding: 0 .875rem;
  border-radius: var(--radius-pill); border: 1px solid;
  font: 700 var(--text-sm)/var(--leading-sm) var(--font-body);
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.stance::before {
  content: ""; width: .5rem; height: .5rem;
  border-radius: 50%; background-color: currentColor;
}
.stance--yes,  .stance--lean-yes { background-color: var(--jade-3);  color: var(--jade-11);  border-color: var(--jade-6); }
.stance--no,   .stance--lean-no  { background-color: var(--red-3);   color: var(--red-11);   border-color: var(--red-6); }
.stance--watch                   { background-color: var(--amber-3); color: var(--amber-11); border-color: var(--amber-6); }
.stance--none                    { background-color: var(--slate-3); color: var(--slate-11); border-color: var(--slate-6); }

/* "lean" reads softer than a firm call: hollow dot instead of filled */
.stance--lean-yes::before,
.stance--lean-no::before { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; }

.stance--lg { height: 2.5rem; padding: 0 1.125rem; font-size: var(--text-base); }

/* --- Cards ---------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-body);
}
/* dgg highlights with a soft glow rather than a hard border */
.card--prominent {
  border-color: var(--blue-7);
  background-color: var(--blue-2);
  box-shadow: 0 0 64px 0 rgba(0, 119, 255, .23);
}
.card--warning { border-color: var(--amber-6); background-color: var(--amber-2); }

.card__title {
  font: 600 var(--text-base)/var(--leading-base) var(--font-body);
  color: var(--text-primary);
}
.card__meta { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }

/* --- Section headings ----------------------------------------------------- */

.section { margin-block: 2.5rem; }

.section__title {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: .25rem;
}
.section__hint {
  color: var(--text-muted);
  font-size: var(--text-xs); line-height: var(--leading-xs);
  margin-block-end: 1rem;
}

/* --- Tables --------------------------------------------------------------- */

.table-wrapper { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }

table { width: 100%; border-spacing: 0; border-collapse: collapse; }

thead tr, tbody tr:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }

th, td { padding: .75rem 1rem; box-sizing: border-box; text-align: left; vertical-align: top; }
td .meter { margin-block-start: .375rem; }

/* lifted verbatim from dgg — worth stealing for a table-heavy guide */
th {
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

td { font: 400 var(--text-sm)/var(--leading-sm) var(--font-body); color: var(--text-secondary); }
td.is-numeric { font-family: var(--font-mono); font-weight: 500; text-align: right; white-space: nowrap; }
td.is-axis { color: var(--text-primary); font-weight: 500; }

/* --- Axis score cells ----------------------------------------------------- */

.score { font-family: var(--font-mono); font-weight: 600; }
.score--pos { color: var(--jade-11); }
.score--neg { color: var(--red-11); }
.score--zero { color: var(--text-muted); }

/* --- Diverging meter ------------------------------------------------------ */
/* Set --pct (0-50%) and add .is-pos / .is-neg. Zero sits dead center. */

.meter {
  position: relative;
  height: .5rem;
  min-width: 6rem;
  background-color: var(--slate-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.meter::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background-color: var(--slate-7); z-index: 1;
}
.meter__fill { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.meter__fill.is-pos { left: 50%;  width: var(--pct); background-color: var(--jade-9); }
.meter__fill.is-neg { right: 50%; width: var(--pct); background-color: var(--red-9); }

.meter--lg { height: .75rem; }

/* --- Total readout -------------------------------------------------------- */

.total { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.total__value {
  font: 600 var(--text-xl)/var(--leading-xl) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.total__value.is-pos { color: var(--jade-11); }
.total__value.is-neg { color: var(--red-11); }
.total__meter { flex: 1; min-width: 12rem; }
.total__scale {
  display: flex; justify-content: space-between;
  margin-block-start: .375rem;
  color: var(--text-muted);
  font: 500 var(--text-xs) var(--font-mono);
}

/* --- Confidence pips ------------------------------------------------------ */

.conf { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.conf__pips { display: inline-flex; gap: 2px; }
.conf__pip { width: .3125rem; height: .75rem; border-radius: 1px; background-color: var(--slate-6); }
.conf__pip.is-on { background-color: var(--slate-10); }
.conf--high .conf__pip.is-on { background-color: var(--jade-9); }
.conf--low  .conf__pip.is-on { background-color: var(--amber-9); }
.conf__label { color: var(--text-muted); font: 500 var(--text-xs) var(--font-mono); }

/* --- Draft banner --------------------------------------------------------- */
/* The "nothing unapproved is a position" contract, rendered. */

.draft-banner {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid var(--amber-6);
  border-radius: var(--radius-lg);
  background-color: var(--amber-2);
  margin-block-end: 2rem;
}
.draft-banner__icon { color: var(--amber-11); font-size: var(--text-base); line-height: 1.25; }
.draft-banner__body { display: flex; flex-direction: column; gap: .375rem; }
.draft-banner__title {
  font: 700 var(--text-sm)/var(--leading-sm) var(--font-body);
  color: var(--amber-11);
  text-transform: uppercase; letter-spacing: .04em;
}
.draft-banner__text { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }
.draft-banner__text code {
  font-family: var(--font-mono); font-size: .8em;
  padding: .1em .35em; border-radius: 3px;
  background-color: var(--slate-3); color: var(--text-primary);
}

/* --- Measure header ------------------------------------------------------- */

.measure-header { display: flex; flex-direction: column; gap: 1rem; margin-block-end: 2rem; }
.measure-header__eyebrow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.measure-header__id { font: 500 var(--text-xs) var(--font-mono); color: var(--text-muted); }
.measure-header__title {
  font: 600 var(--text-xl)/var(--leading-xl) var(--font-heading);
  font-size: clamp(var(--text-lg), 1.19vw + 1.03rem, var(--text-xl));
}
.measure-header__sos { color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-base); }
.measure-header__stance { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --- Definition rows ------------------------------------------------------ */

.deflist { display: grid; grid-template-columns: 10rem 1fr; gap: .75rem 1.5rem; }
.deflist__key {
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
  padding-block-start: .1rem;
}
.deflist__val { color: var(--text-secondary); }

/* --- Chip list (backers / opponents) -------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .625rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background-color: var(--bg-raised);
  color: var(--text-secondary);
  font: 500 var(--text-xs)/var(--leading-xs) var(--font-body);
}

/* --- Prose ---------------------------------------------------------------- */

.prose { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.65; }
.prose p + p { margin-block-start: 1rem; }
.prose strong { color: var(--text-primary); font-weight: 600; }

/* --- Source list ---------------------------------------------------------- */

.sources { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sources li {
  display: flex; gap: .75rem;
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.sources li::before { content: "→"; color: var(--text-muted); flex-shrink: 0; }

/* --- Checklist ------------------------------------------------------------ */

.checklist { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.checklist li {
  display: flex; gap: .75rem; align-items: flex-start;
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.checklist__box {
  flex-shrink: 0; width: 1rem; height: 1rem; margin-block-start: .125rem;
  border: 1px solid var(--border-hover); border-radius: 3px;
}
.checklist li.is-blocking .checklist__box { border-color: var(--red-6); background-color: var(--red-3); }

/* --- Measure list (index) ------------------------------------------------- */

.measure-list { display: flex; flex-direction: column; gap: .75rem; }

.measure-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: center; gap: 1.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  transition: all var(--transition);
}
.measure-row, .measure-row:hover { text-decoration: none; }
.measure-row:hover { border-color: var(--border-hover); background-color: var(--bg-raised); }
.measure-row__id { display: block; font: 500 var(--text-xs) var(--font-mono); color: var(--text-muted); }
.measure-row__title { display: block; font: 600 var(--text-sm)/var(--leading-sm) var(--font-body); color: var(--text-primary); }
.measure-row__sos {
  color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
  margin-block-start: .25rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  margin-block-start: 4rem;
  padding-block: 2rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs); line-height: var(--leading-xs);
}
.footer p + p { margin-block-start: .5rem; }

/* --- Bleed ----------------------------------------------------------------
   Lets a wide block (the axis table) escape .wrapper--narrow and use the full
   content width. Prose stays at a readable measure; data gets room to breathe.
-------------------------------------------------------------------------- */

.bleed {
  position: relative; left: 50%;
  width: min(72rem, 100vw - 4rem);
  transform: translateX(-50%);
}

/* --- Axis table column sizing --------------------------------------------- */

.axis-table col.col-axis     { width: 12rem; }
.axis-table col.col-weight   { width: 5rem; }
.axis-table col.col-score    { width: 4.5rem; }
.axis-table col.col-meter    { width: 8rem; }
.axis-table col.col-weighted { width: 6rem; }
.axis-table col.col-why      { width: auto; }
.axis-table col.col-conf     { width: 7rem; }

.axis-table td.is-axis { font-size: var(--text-sm); }

/* --- Evidence base: shared -------------------------------------------------
   Topic pages use a bare <h1> — other pages wrap the title in a classed
   header component (.measure-header__title), so there is nothing else to
   hook a size onto. Scoped to a direct child of .wrapper so it cannot catch
   an h1 nested in another page's header component.
--------------------------------------------------------------------------- */

main.wrapper > h1 {
  font-size: clamp(var(--text-lg), 1.19vw + 1.03rem, var(--text-xl));
  line-height: var(--leading-xl);
  margin-block-end: .5rem;
}

/* --- Evidence base: index -------------------------------------------------- */

.evidence__lede {
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
  margin-block-end: .75rem;
  max-width: 46rem;
}

/* An honesty disclosure (published vs withheld counts) — legible, not fine print. */
.evidence__disclosure {
  color: var(--text-primary);
  font: 500 var(--text-sm)/var(--leading-sm) var(--font-body);
  padding: .75rem 1rem;
  border: 1px solid var(--amber-6);
  border-radius: var(--radius-md);
  background-color: var(--amber-2);
  margin-block-end: 2rem;
}

#topic-filter {
  display: block; width: 100%; height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface); color: var(--text-primary);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-body);
}
#topic-filter::placeholder { color: var(--text-muted); }
#topic-filter:focus { outline: none; border-color: var(--accent-solid); }

#topic-count {
  color: var(--text-muted);
  font: 500 var(--text-xs) var(--font-mono);
  margin-block-start: .625rem;
  margin-block-end: 1.5rem;
}

.topic-list { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }

.topic-row {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
}
.topic-row[hidden] { display: none; }

.topic-row__link {
  display: block;
  font: 600 var(--text-sm)/var(--leading-sm) var(--font-body);
  color: var(--text-primary);
}
.topic-row__link:hover { color: var(--accent-text); }

.topic-row__meta {
  display: block;
  color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
  margin-block-start: .25rem;
}

.topic-row__snippet {
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm);
  margin-block-start: .375rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Evidence base: topic page ---------------------------------------------
   .topic__section / .topic__list carry the same prose treatment as .prose
   and .sources elsewhere — kept as separate rules because the generator
   emits topic-scoped class names, not the shared ones.
--------------------------------------------------------------------------- */

.topic__meta {
  color: var(--text-muted);
  font: 500 var(--text-xs) var(--font-mono);
  margin-block-end: 1.5rem;
}

.topic__section { margin-block-end: 2.5rem; }
.topic__section h2 {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: .75rem;
}
.topic__section p {
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
}
.topic__section p + p { margin-block-start: 1rem; }

.topic__list {
  display: flex; flex-direction: column; gap: .5rem;
  margin: .75rem 0 0; padding: 0; list-style: none;
}
.topic__list li {
  position: relative; padding-left: 1.25rem;
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
}
.topic__list li::before { content: "→"; position: absolute; left: 0; color: var(--text-muted); }

.topic__findings { margin-block-start: 1rem; }
.topic__findings h2 {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: 1.25rem;
}

.claim {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
}
.claim + .claim { margin-block-start: 1rem; }

.claim__title {
  font: 600 var(--text-base)/var(--leading-base) var(--font-body);
  color: var(--text-primary);
}

/* No modifier classes are emitted for the badge values (high/med/low,
   settled/contested/thin) — a uniform neutral chip is the safe default.
   Per-value colour (e.g. .claim__badge--high) would need the generator's
   cooperation; see the report rather than inferring it from text content. */
.claim__badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.claim__badge {
  display: inline-flex; align-items: center;
  max-width: 100%; padding: .25rem .625rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--bg-raised);
  color: var(--text-secondary);
  font: 500 var(--text-xs)/var(--leading-xs) var(--font-body);
}

.claim__fields { display: flex; flex-direction: column; gap: .625rem; margin: 0; }
.claim__row { display: grid; grid-template-columns: 10rem 1fr; gap: .1rem 1.5rem; }
.claim__row dt {
  margin: 0;
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  padding-block-start: .1rem;
}
.claim__row dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}

.claim__sources {
  display: flex; flex-direction: column; gap: .5rem;
  margin: 0; padding-block-start: .875rem; padding-inline-start: 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
/* Plain text flow, not flex — citations end in a raw DOI/URL with no
   natural break point, and a flex row would confine it to a narrow shared
   column, forcing it to break one character per line instead of wrapping
   normally with the rest of the line. */
.claim__sources li {
  position: relative; padding-left: 1.25rem;
  color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
}
.claim__sources li::before { content: "→"; position: absolute; left: 0; }
.claim__sources a { color: var(--accent-text); overflow-wrap: anywhere; }

/* --- Page rhythm ---------------------------------------------------------- */

.page { padding-block-end: clamp(2rem, 6.25vw - .5rem, 4rem); }

/* --- Constitution wiki: page shell -----------------------------------------
   No .navbar / .wrapper here — the wiki is a standalone two-column shell,
   sidebar plus content, per page. .layout is the root the generator wraps
   both in; .layout__main is everything else.
--------------------------------------------------------------------------- */

.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.layout__main {
  flex: 1 1 auto;
  min-width: 0; /* let long case citations wrap instead of forcing the row wide */
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 4rem;
}

/* --- Constitution wiki: sidebar tree ----------------------------------------
   120 rows on every page. Its own scroll region, pinned to the viewport, so
   a reader on a deep link can see the whole tree without losing the article.
--------------------------------------------------------------------------- */

.tree {
  flex: 0 0 19rem;
  width: 19rem;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  padding: 1.5rem 1rem 2rem 1.5rem;
  border-right: 1px solid var(--border-subtle);
  background-color: var(--bg-surface);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.tree ul { list-style: none; margin: 0; padding-left: .85rem; }
.tree > ul { padding-left: 0; margin-block-start: 1rem; }
.tree li { margin: 0; }

.tree a, .tree__page--unwritten { overflow-wrap: break-word; }

.tree__home {
  display: block;
  padding: .5rem .625rem;
  margin-inline-start: -.625rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: 700 var(--text-sm)/var(--leading-sm) var(--font-body);
}
.tree__home:hover { background-color: var(--bg-raised); text-decoration: none; }
.tree__home--active { color: var(--accent-text); }

.tree__group { margin-block-start: 1.125rem; }
.tree__group > span {
  display: block;
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tree__group--active > span { color: var(--accent-text); }

.tree__section { margin-block-start: .625rem; }
.tree__section > span {
  display: block;
  color: var(--text-secondary);
  font: 600 var(--text-xs) var(--font-body);
  margin-block-end: .125rem;
}
.tree__section--active > span { color: var(--text-primary); }

.tree li > a.tree__page,
.tree li > span.tree__page--unwritten {
  display: block;
  padding: .3rem .5rem;
  margin-inline-start: -.5rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}

.tree__page { color: var(--text-secondary); }
.tree__page:hover { background-color: var(--bg-raised); color: var(--text-primary); text-decoration: none; }
.tree__page--active {
  color: var(--text-primary);
  background-color: var(--bg-raised);
  border-left-color: var(--accent-solid);
  font-weight: 600;
}

/* Unwritten rows: plain text, deliberately inert — muted, no hover state,
   cursor signals "unavailable" rather than "broken link". */
.tree__page--unwritten {
  color: var(--text-muted);
  opacity: .6;
  cursor: not-allowed;
}
.tree__note {
  display: block;
  padding-inline-start: .5rem;
  color: var(--text-muted);
  font-size: .7rem;
  font-style: italic;
}

.tree__cite {
  display: block;
  padding-inline-start: .5rem;
  color: var(--text-muted);
  font: 500 .7rem var(--font-mono);
}

/* --- Constitution wiki: clause article -------------------------------------
   .clause is the article shell used by every page, including the index
   (.clause__lede / .clause__disclosure only appear there).
--------------------------------------------------------------------------- */

.clause { max-width: 42rem; margin-inline: auto; }

.clause > h1 {
  font-size: clamp(var(--text-lg), 1.19vw + 1.03rem, var(--text-xl));
  line-height: var(--leading-xl);
  font-family: var(--font-heading);
  font-weight: 600;
}

.clause__citation {
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-block-end: .5rem;
}

.clause__meta {
  color: var(--text-secondary);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  margin-block: .625rem 1.5rem;
}

.clause .draft-banner { margin-block-end: 2rem; }

.clause__lede {
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
  margin-block: .75rem 1rem;
}
.clause__disclosure {
  color: var(--text-primary);
  font: 500 var(--text-sm)/var(--leading-sm) var(--font-body);
  padding: .75rem 1rem;
  border: 1px solid var(--amber-6);
  border-radius: var(--radius-md);
  background-color: var(--amber-2);
  margin-block-end: 2rem;
}

/* --- The constitutional text: the primary content on a clause page --------
   Read as a document, not a paragraph — its own card, brighter text, an
   accent rule instead of prose's default border-less flow.
--------------------------------------------------------------------------- */

.clause__text {
  margin-block: 1.75rem 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-solid);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background-color: var(--bg-surface);
}
.clause__text blockquote {
  margin: 0; padding: 0; border: none;
  color: var(--text-primary);
  font: 500 var(--text-base)/1.7 var(--font-body);
}
.clause__text blockquote + blockquote { margin-block-start: 1rem; }

/* --- Prose sections --------------------------------------------------------
   Scholarly commentary: original meaning, ratification debate, doctrinal
   path. Same measure and rhythm as .prose / .topic__section elsewhere.
--------------------------------------------------------------------------- */

.clause__section { margin-block-end: 2.5rem; }
.clause__section h2 {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: .75rem;
}
.clause__section h3 {
  font: 600 var(--text-base)/var(--leading-base) var(--font-body);
  color: var(--text-primary);
  margin-block: 1.25rem .5rem;
}
.clause__section p {
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
}
.clause__section p + p { margin-block-start: 1rem; }
.clause__section strong { color: var(--text-primary); font-weight: 600; }

/* A quoted excerpt inside prose (e.g. a case holding) — an accent rule, not
   a full card; .clause__text above is reserved for the governing text. */
.clause__section blockquote {
  margin: 1rem 0; padding-inline-start: 1rem;
  border-left: 3px solid var(--border-interactive);
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
}

.clause__list {
  margin: .75rem 0; padding-inline-start: 1.375rem;
  color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.65;
}
ul.clause__list { list-style: disc; }
ol.clause__list { list-style: decimal; }
.clause__list li + li { margin-block-start: .5rem; }

/* --- Typed relationships: a definition list of Governing Text / Derived
   Doctrine / Key Cases / etc. Same dt/dd recipe as .claim__row / .deflist. */

.clause__rels { margin-block-end: 2.5rem; }
.clause__rels h2 {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: .75rem;
}
.clause__rels dl { display: flex; flex-direction: column; gap: .625rem; margin: 0; }
.clause__rel { display: grid; grid-template-columns: 10rem 1fr; gap: .1rem 1.5rem; }
.clause__rel dt {
  margin: 0;
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  padding-block-start: .1rem;
}
.clause__rel dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}

/* --- Sources: same "→" recipe as .sources / .claim__sources elsewhere. --- */

.clause__sources h2 {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: .75rem;
}
.clause__sources ul { margin: 0; padding: 0; list-style: none; }
.clause__sources li {
  position: relative; padding-left: 1.25rem;
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.clause__sources li + li { margin-block-start: .5rem; }
.clause__sources li::before { content: "→"; position: absolute; left: 0; color: var(--text-muted); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 48rem) {
  :root { --wrapper: min(72rem, 100% - 2rem); --wrapper-narrow: min(52rem, 100% - 2rem); }
  .navbar { gap: 1rem; flex-wrap: wrap; }
  .navbar__items { margin-left: 0; width: 100%; overflow-x: auto; }
  .deflist { grid-template-columns: 1fr; gap: .25rem 0; }
  .deflist__val { margin-block-end: .75rem; }
  .measure-row { grid-template-columns: 1fr; gap: .75rem; }
  .claim__row { grid-template-columns: 1fr; gap: .125rem; }

  /* Sidebar collapse: a bounded scroll region above the content, not a
     column beside it and not moved after it. The tree is first in the
     markup and stays first in visual order too — CSS `order` would move it
     below the article for sighted narrow-viewport readers while leaving it
     first in DOM/tab order, desyncing the two for a 120-link list, which is
     worse than the height cap this uses instead. */
  .layout { flex-direction: column; }
  .tree {
    position: static;
    width: 100%;
    height: auto;
    max-height: 40vh;
    flex-basis: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .layout__main { padding: 2rem 1.25rem 3rem; }
  .clause { max-width: none; }
  .clause__rel { grid-template-columns: 1fr; gap: .125rem; }
}