/* ============================================================
   Trace a proof.
   The Ethics as one graph. Marks are neutral ink so that the
   single gold line, the longest chain, is what the eye follows;
   shape carries the only other distinction (square: a first
   principle; circle: a proposition). Scoped to #page-trace.
   ============================================================ */

#page-trace {
  --tr-wide: min(var(--shell), 100% - 2 * var(--gutter));
  --tr-mark: #b9a982;
  --tr-line: rgb(212 175 55 / .13);
  overflow-x: clip;
}
#page-trace em { color: var(--gold); font-style: italic; }
#page-trace .tr-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#page-trace .tr-eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--serif-head);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
#page-trace h1,
#page-trace h2 { font-family: var(--serif-display); font-weight: 400; color: var(--parchment); line-height: 1.08; }
#page-trace h3 { font-family: var(--serif-head); font-weight: 400; font-size: var(--t-h3); color: var(--parchment); margin: 0 0 .75rem; }
#page-trace .tr-cite { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold-a35); text-underline-offset: .18em; }
#page-trace .tr-cite:hover { color: var(--gold-bright); }
#page-trace .tr-fine { font-size: var(--t-label); color: var(--ink-soft); }

#page-trace .tr-hero { width: var(--tr-wide); margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
#page-trace .tr-hero h1 { margin: 0 0 1.25rem; font-size: clamp(2.5rem, 6vw, 4.8rem); }
#page-trace .tr-lead { max-width: var(--measure-lead); margin: 0; font-size: var(--t-read); line-height: 1.6; color: var(--ink); }

#page-trace .tr-section { width: var(--tr-wide); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--hairline); }
#page-trace .tr-desk { border-top: 0; padding-top: 0; }
#page-trace .tr-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
#page-trace .tr-head h2 { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 3rem); }
#page-trace .tr-sub { margin: 0; max-width: var(--measure-lead); font-size: var(--t-read); line-height: 1.55; color: var(--ink-soft); }

/* ---------- Picker ---------- */

#page-trace .tr-pick { position: relative; max-width: 40rem; }
#page-trace .tr-pick label,
#page-trace .tr-path-pick label { display: block; margin-bottom: .5rem; font-size: var(--t-label); letter-spacing: .08em; color: var(--ink-soft); }
#page-trace input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem 1rem;
  font: inherit;
  font-size: var(--t-read);
  color: var(--parchment);
  background: var(--surface-1);
  border: 1px solid var(--gold-a18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1), var(--edge-light);
}
#page-trace input[type="search"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#page-trace .tr-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: .35rem 0 0;
  padding: .3rem;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--gold-a18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  max-height: 22rem;
  overflow-y: auto;
}
#page-trace .tr-result { display: flex; gap: .75rem; padding: .55rem .7rem; border-radius: calc(var(--radius) * .6); cursor: pointer; color: var(--ink); font-size: var(--t-body); line-height: 1.4; }
#page-trace .tr-result b { flex: none; min-width: 4.2rem; color: var(--gold); font-variant-numeric: tabular-nums; }
#page-trace .tr-result[aria-selected="true"],
#page-trace .tr-result:hover { background: var(--gold-a10); color: var(--parchment); }
#page-trace .tr-none { color: var(--ink-soft); cursor: default; }

#page-trace .tr-starters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
#page-trace .tr-starter {
  padding: .45rem .85rem;
  font: inherit;
  font-size: var(--t-label);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--gold-a18);
  border-radius: 999px;
  cursor: pointer;
}
#page-trace .tr-starter b { color: var(--gold); font-weight: 600; margin-right: .3rem; }
#page-trace .tr-starter:hover { border-color: var(--gold-a60); color: var(--parchment); }
#page-trace .tr-starter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- The view ---------- */

#page-trace .tr-view { margin-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: 5rem; }
#page-trace .tr-focus { max-width: 52rem; margin-bottom: 1.25rem; }
#page-trace .tr-focus h2 { margin: 0 0 .6rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
#page-trace .tr-focus-id { color: var(--gold); font-variant-numeric: tabular-nums; margin-right: .35rem; }
#page-trace .tr-focus-claim { margin: 0 0 .6rem; font-family: var(--serif-head); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--parchment); }

#page-trace .tr-modes { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.25rem 0 1rem; border-bottom: 1px solid var(--hairline); }
#page-trace .tr-mode {
  padding: .6rem .9rem;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
#page-trace .tr-mode[aria-selected="true"] { color: var(--parchment); border-bottom-color: var(--gold); }
#page-trace .tr-mode:hover { color: var(--parchment); }
#page-trace .tr-mode:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
#page-trace .tr-path-pick { position: relative; max-width: 30rem; margin-bottom: 1rem; }

#page-trace .tr-summary { max-width: 52rem; margin: 0 0 1rem; font-size: var(--t-read); line-height: 1.55; color: var(--ink); }

#page-trace .tr-figure {
  position: relative;
  margin: 0 0 1.5rem;
  padding: .5rem;
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1), var(--edge-light);
}
#page-trace .tr-canvas { overflow: auto; max-height: 78vh; overscroll-behavior: contain; }
#page-trace .tr-svg { display: block; margin: 0 auto; }
#page-trace .tr-lines path { fill: none; stroke: var(--tr-line); stroke-width: 1; }
#page-trace .tr-spine path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
#page-trace .tr-mark { fill: var(--tr-mark); stroke: var(--surface-1); stroke-width: 2; paint-order: stroke; transition: fill var(--t-fast); }
#page-trace rect.tr-mark { fill: none; stroke: var(--tr-mark); stroke-width: 1.5; }
#page-trace .on-chain .tr-mark { fill: var(--gold); }
#page-trace .on-chain rect.tr-mark { fill: none; stroke: var(--gold); stroke-width: 2; }
#page-trace .is-focus .tr-mark { fill: var(--parchment); }
#page-trace .is-focus rect.tr-mark { fill: var(--parchment); stroke: var(--parchment); }
#page-trace .tr-hit { fill: transparent; cursor: pointer; }
#page-trace .tr-node:hover .tr-mark { fill: var(--parchment); }
#page-trace .tr-node:hover rect.tr-mark { stroke: var(--parchment); }
#page-trace .tr-label { fill: var(--parchment); font-family: var(--serif-head); font-size: 13px; paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; }

#page-trace .tr-tip {
  position: absolute;
  z-index: 10;
  width: 300px;
  max-width: calc(100% - 16px);
  padding: .8rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--gold-a35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
#page-trace .tr-tip b { display: block; color: var(--gold); font-size: var(--t-label); letter-spacing: .04em; }
#page-trace .tr-tip p { margin: .35rem 0; font-size: .95rem; line-height: 1.45; color: var(--parchment); }
#page-trace .tr-tip small { color: var(--ink-soft); font-size: .78rem; }

#page-trace .tr-key { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .75rem .5rem .25rem; font-size: var(--t-label); color: var(--ink-soft); }
#page-trace .tr-key span { display: inline-flex; align-items: center; gap: .45rem; }
#page-trace .tr-key i { display: inline-block; width: 10px; height: 10px; }
#page-trace .tr-k-found { border: 1.5px solid var(--tr-mark); border-radius: 1.5px; }
#page-trace .tr-k-prop { background: var(--tr-mark); border-radius: 50%; }
#page-trace .tr-k-spine { width: 18px !important; height: 2px !important; background: var(--gold); }
#page-trace .tr-key-note { flex-basis: 100%; }

#page-trace .tr-lists { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
#page-trace .tr-chain { margin: 0; padding: 0; list-style: none; counter-reset: step; }
#page-trace .tr-chain li { position: relative; padding: 0 0 .9rem 2.1rem; counter-increment: step; }
#page-trace .tr-chain li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.5rem;
  font-size: .8rem;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
#page-trace .tr-chain li::after { content: ""; position: absolute; left: 1.75rem; top: 1.6rem; bottom: .2rem; width: 1px; background: var(--gold-a35); }
#page-trace .tr-chain li:last-child::after { display: none; }
#page-trace .tr-chain a,
#page-trace .tr-item { color: var(--ink); text-decoration: none; line-height: 1.5; }
#page-trace .tr-chain a b,
#page-trace .tr-item b { color: var(--gold); font-weight: 600; margin-right: .25rem; font-variant-numeric: tabular-nums; }
#page-trace .tr-chain a:hover,
#page-trace .tr-item:hover { color: var(--parchment); }
#page-trace .tr-found { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
#page-trace .tr-found .tr-item { padding: .25rem .6rem; border: 1px solid var(--gold-a18); border-radius: 999px; font-size: var(--t-label); }
#page-trace .tr-found .tr-item b { margin: 0; }
#page-trace .tr-all summary { cursor: pointer; color: var(--ink-soft); font-size: var(--t-label); }
#page-trace .tr-all ol { margin: .75rem 0 0; padding-left: 1.4rem; font-size: var(--t-label); line-height: 1.6; color: var(--ink-soft); max-height: 24rem; overflow: auto; }

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

#page-trace .tr-rank { list-style: none; margin: 0; padding: 0; max-width: 60rem; counter-reset: rank; }
#page-trace .tr-rank li { border-top: 1px solid var(--hairline); counter-increment: rank; }
#page-trace .tr-rank a {
  display: grid;
  grid-template-columns: 2rem 5rem minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: baseline;
  padding: .75rem 0;
  color: var(--ink);
  text-decoration: none;
}
#page-trace .tr-rank a::before { content: counter(rank); color: var(--ink-soft); font-size: var(--t-label); font-variant-numeric: tabular-nums; }
#page-trace .tr-rank a:hover { color: var(--parchment); background: var(--gold-a04); }
#page-trace .tr-rank-id { color: var(--gold); font-variant-numeric: tabular-nums; }
#page-trace .tr-rank-claim { line-height: 1.45; }
#page-trace .tr-rank-n { font-family: var(--serif-display); font-size: 1.5rem; color: var(--parchment); font-variant-numeric: tabular-nums; text-align: right; }
#page-trace .tr-rank-n small { font-family: var(--serif-head); font-size: var(--t-label); color: var(--ink-soft); }
#page-trace .tr-chain-static { max-width: 52rem; }

#page-trace .tr-prose { max-width: var(--measure-prose); }
#page-trace .tr-prose p,
#page-trace .tr-prose li { font-size: var(--t-body); line-height: 1.7; color: var(--ink); }
#page-trace .tr-prose a { color: var(--gold); }

#page-trace .tr-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
#page-trace .tr-next a { display: block; padding: 1.1rem 1.25rem; font-family: var(--serif-head); font-size: 1.15rem; color: var(--parchment); text-decoration: none; border: 1px solid var(--gold-a18); border-radius: var(--radius); }
#page-trace .tr-next a:hover { border-color: var(--gold-a60); background: var(--gold-a04); }
#page-trace .tr-next span { display: block; margin-top: .3rem; font-size: var(--t-label); color: var(--ink-soft); }

@media (max-width: 760px) {
  #page-trace .tr-lists { grid-template-columns: 1fr; }
  #page-trace .tr-rank a { grid-template-columns: 4.2rem minmax(0, 1fr) auto; }
  #page-trace .tr-rank a::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { #page-trace .tr-mark { transition: none; } }