/* ==========================================================================
   THE LEDGER — shared engine styles (edition-agnostic).
   Loads after css/pages.css. Uses the site's tokens only; adds no colours,
   no new type families, no shadows or gradients. Light theme only, per the
   design system.
   ========================================================================== */

/* ---- family cover ------------------------------------------------------ */

.ledger-hero {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: var(--rule-hairline);
}

.ledger-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin-block-end: var(--space-3);
}

.ledger-hero h1 {
  font-size: var(--text-h1);
  max-width: 22ch;
}

.ledger-hero__dek {
  font-style: italic;
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  max-width: 54ch;
  margin-block-start: var(--space-4);
}

.ledger-hero__blurb {
  max-width: var(--measure-prose);
  margin-block-start: var(--space-5);
}

.ledger-editions {
  padding-block: var(--space-6) var(--space-8);
}

.ledger-editions__heading {
  font-size: var(--text-h2);
  padding-block-end: var(--space-3);
  border-bottom: var(--rule-emphatic);
}

.ledger-editions ol {
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-5);
}

.ledger-editions li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--rule-hairline);
}

.ledger-editions__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-brass-deep);
  padding-block-start: 0.35em;
}

.ledger-editions__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
}

.ledger-editions__desc {
  color: var(--color-ink-soft);
  font-size: var(--text-caption);
  margin-block-start: var(--space-2);
  max-width: 60ch;
}

.ledger-editions__grow {
  color: var(--color-ink-soft);
  font-size: var(--text-caption);
  margin-block-start: var(--space-5);
  max-width: 60ch;
}

/* ---- edition page: layout ---------------------------------------------- */

.ledger-layout {
  display: block;
  padding-block-end: var(--space-8);
}

.ledger-intro {
  max-width: var(--measure-prose);
  padding-block: var(--space-7) var(--space-5);
}

.ledger-intro__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin-block-end: var(--space-3);
}

.ledger-intro h1 {
  font-size: var(--text-h1);
}

.ledger-intro__dek {
  font-style: italic;
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  margin-block-start: var(--space-4);
}

.ledger-method {
  max-width: var(--measure-prose);
  margin-block: var(--space-5);
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
}

.ledger-method summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  padding-block: var(--space-3);
  cursor: pointer;
  color: var(--color-green);
}

.ledger-method summary { list-style: none; }
.ledger-method summary::-webkit-details-marker { display: none; }

.ledger-method summary::before {
  content: "+ ";
  color: var(--color-brass-deep);
}

.ledger-method[open] summary::before { content: "\2212  "; }

.ledger-method__body {
  padding-block-end: var(--space-4);
  font-size: var(--text-caption);
}

.ledger-method__body h3 {
  font-size: var(--text-body);
  margin-block-start: var(--space-4);
}

.ledger-method__body ul { padding-inline-start: 1.2em; }
.ledger-method__body li { margin-block: var(--space-2); }

/* ---- edition page: the scrolly and the panel ---------------------------- */

/* THE STANDARDISATION AMENDMENT (2026-08-02) widened this page. The override
   is on the page's own container class, NOT on the site-wide token: moving
   --container-max in tokens.css would re-flow every chapter on the site for
   no editorial gain. Prose keeps its 70ch measure; only the tables use the
   extra room. */
.ledger-layout { --container-max: 84rem; }

.ledger-stage {
  display: block;
}

@media (min-width: 62rem) {
  .ledger-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: var(--space-7);
    align-items: start;
  }
}

/* The flow itself is no longer capped: a 70ch cap here squeezed the tables
   even where the grid track was wider. The prose inside it is capped instead,
   line by line, so the reading measure is unchanged and the tables breathe. */
.ledger-flow { max-width: none; }
.ledger-flow > * > * { max-width: var(--measure-prose); }
.ledger-flow > * > .ledger-static,
.ledger-flow > * > .table-wrap,
.ledger-flow > * > figure { max-width: none; }

.ledger-rail { position: relative; }

@media (min-width: 62rem) {
  .ledger-rail {
    position: sticky;
    top: var(--space-5);
  }
  /* The panel is taller than a laptop viewport once texture lines are on it,
     so the lines scroll inside it while the era heading and the toggle stay
     put. Nothing is hidden; the panel simply has its own scrollbar. */
  .ledger-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
  }
  .ledger-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Below the two-column breakpoint the panel becomes a sticky top card. */
@media (max-width: 61.999rem) {
  .ledger-rail {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--color-paper);
    padding-block: var(--space-2);
    margin-block-end: var(--space-5);
  }
  .ledger-panel__body {
    max-height: 38vh;
    overflow-y: auto;
  }
}

/* ---- the ledger panel --------------------------------------------------- */

.ledger-panel {
  background-color: var(--color-paper-deep);
  border-top: var(--rule-emphatic);
  border-bottom: var(--rule-emphatic);
  padding: var(--space-4);
}

.ledger-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-3);
  border-bottom: var(--rule-hairline);
}

.ledger-panel__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin: 0;
}

.ledger-panel__era {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  margin: 0;
}

.ledger-panel__col + .ledger-panel__col {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-top: var(--rule-hairline);
}

.ledger-panel__col-head {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-green);
  margin: 0 0 var(--space-2);
}

/* The panel carries every line since the standardisation amendment, so it is
   banded: a hairline and a small mono heading before each group of lines. The
   band order is the register's and it is the same on the static tables and on
   the century matrix. */
.ledger-panel__band + .ledger-panel__band {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-rule);
}

.ledger-panel__band-head {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin: 0;
}

.ledger-panel__lines {
  margin: 0;
  padding-block-start: var(--space-3);
}

.ledger-panel__band-head + .ledger-panel__lines { padding-block-start: var(--space-2); }
.ledger-panel__lines > .ledger-panel__label:first-child { margin-block-start: 0; }

.ledger-panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-block-start: var(--space-3);
}

.ledger-panel__label.is-texture { color: var(--color-brass-deep); }

/* A line label that has a canonical home is a deep link into it. The link is
   marked by an underline on the label itself, so the label's own size, weight
   and letter-spacing are unchanged and the line cannot rewrap because of it. */
.ledger-panel__label-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.ledger-panel__label-link:hover,
.ledger-panel__label-link:focus-visible {
  color: var(--color-green);
  text-decoration-color: var(--color-brass);
}

.ledger-static .table-ledger th[data-ledger-line] a,
.ledger-static .table-ledger caption[data-ledger-line] a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ledger-static .table-ledger th[data-ledger-line] a:hover,
.ledger-static .table-ledger th[data-ledger-line] a:focus-visible,
.ledger-static .table-ledger caption[data-ledger-line] a:hover,
.ledger-static .table-ledger caption[data-ledger-line] a:focus-visible {
  color: var(--color-green);
  text-decoration-color: var(--color-brass);
}

.ledger-panel__value {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.45;
}

.ledger-panel__value.is-absent { color: var(--color-ink-soft); }

.ledger-panel__basket {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ledger-panel__basket li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.15rem;
}

.ledger-panel__basket-label { color: var(--color-ink-soft); }

.ledger-panel__basket-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
  white-space: nowrap;
}

.ledger-panel__money,
.ledger-panel__hours { display: block; }

.ledger-panel__hours { color: var(--color-ink-soft); }

.ledger-panel[data-mode="money"] .ledger-panel__money { font-weight: 600; }
.ledger-panel[data-mode="hours"] .ledger-panel__hours {
  font-weight: 600;
  color: var(--color-green);
}
.ledger-panel[data-mode="hours"] .ledger-panel__money { color: var(--color-ink-soft); }

.ledger-panel__na { color: var(--color-ink-soft); }

.ledger-panel__wage {
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-2);
  border-top: var(--rule-hairline);
}

@media (prefers-reduced-motion: no-preference) {
  .ledger-panel.is-turning .ledger-panel__value,
  .ledger-panel.is-turning .ledger-panel__basket-value {
    animation: ledger-tick 320ms ease-out;
  }
}

@keyframes ledger-tick {
  from { opacity: 0.15; transform: translateY(0.25rem); }
  to { opacity: 1; transform: none; }
}

/* ---- the toggle --------------------------------------------------------- */

.ledger-toggle {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-top: var(--rule-hairline);
}

.ledger-toggle__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

.ledger-toggle__group { display: flex; gap: var(--space-2); }

.ledger-toggle__btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.35rem 0.6rem;
  background-color: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-chip);
  cursor: pointer;
}

.ledger-toggle__btn[aria-pressed="true"] {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-paper);
}

.ledger-toggle__note {
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  margin-block-start: var(--space-2);
}

/* ---- era sections ------------------------------------------------------- */

.era {
  padding-block: var(--space-7) var(--space-6);
  border-top: var(--rule-hairline);
}

.era:first-of-type { border-top: 0; }

.era__year {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--color-brass-deep);
}

.era h2 {
  font-size: var(--text-h2);
  margin-block-start: var(--space-2);
}

.era__construct {
  background-color: var(--color-paper-deep);
  border-inline-start: 2px solid var(--color-green);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-5);
  font-size: var(--text-caption);
  color: var(--color-ink-soft);
}

.era__construct > b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin-block-end: var(--space-2);
}

.era__texture {
  margin-block: var(--space-5);
  font-size: var(--text-caption);
}

.era__texture > b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin-block-end: var(--space-2);
}

.era__texture ul {
  list-style: none;
  padding: 0;
}

.era__texture li {
  padding-block: var(--space-2);
  border-bottom: var(--rule-hairline);
  color: var(--color-ink-soft);
}

.era__texture-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  display: block;
}

/* ---- the static (no-JS) tables ------------------------------------------ */

.ledger-static {
  margin-block: var(--space-5);
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
}

.ledger-static > summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding-block: var(--space-3);
  cursor: pointer;
  color: var(--color-green);
}

.ledger-static > summary { list-style: none; }
.ledger-static > summary::-webkit-details-marker { display: none; }
.ledger-static > summary::before { content: "+ "; color: var(--color-brass-deep); }
.ledger-static[open] > summary::before { content: "\2212  "; }

.ledger-static .table-ledger th,
.ledger-static .table-ledger td { font-size: var(--text-caption); }

.ledger-static .table-ledger td.num { white-space: nowrap; }

.ledger-price { display: block; }

/* A band heading row inside a ledger table: the same grouping the panel and
   the century matrix use, so a reader who learns the order once knows it
   everywhere. */
.table-ledger .is-band th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  background-color: var(--color-paper-deep);
  padding-block: var(--space-2);
}

.table-ledger td.is-absent,
.ledger-matrix td.is-absent { color: var(--color-ink-soft); font-style: italic; }

/* ---- the century matrix -------------------------------------------------- */

.ledger-century {
  margin-block-start: var(--space-6);
  border-top: var(--rule-emphatic);
  padding-block-start: var(--space-4);
}

.ledger-century > h2,
.ledger-century > p { max-width: var(--measure-prose); }

.ledger-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  line-height: 1.35;
}

.ledger-matrix caption {
  max-width: var(--measure-prose);
  text-align: start;
  font-size: var(--text-caption);
  color: var(--color-ink-soft);
  margin-block-end: var(--space-3);
}

.ledger-matrix th,
.ledger-matrix td {
  border-bottom: 1px solid var(--color-rule);
  padding: 0.42em 0.45em;
  text-align: start;
  vertical-align: top;
}

.ledger-matrix thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
  border-bottom: 2px solid var(--color-rule-strong);
  position: sticky;
  top: 0;
  background-color: var(--color-paper);
  z-index: 1;
}

.ledger-matrix tbody th[scope="row"] {
  min-width: 9.5rem;
  max-width: 14rem;
  font-weight: 600;
}

.ledger-matrix .ledger-matrix__caveat {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  margin-block-start: 0.2em;
}

.ledger-matrix .is-band th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  background-color: var(--color-paper-deep);
}

.ledger-matrix a { color: inherit; text-decoration-color: var(--color-rule-strong); }

/* ---- footers, notes ----------------------------------------------------- */

.ledger-sources {
  max-width: var(--measure-prose);
  margin-block-start: var(--space-6);
  border-top: var(--rule-emphatic);
  padding-block-start: var(--space-4);
}

.ledger-sources h2 { font-size: var(--text-h3); }

.ledger-sources ul {
  padding-inline-start: 1.1em;
  font-size: var(--text-caption);
  color: var(--color-ink-soft);
}

.ledger-sources li { margin-block: var(--space-3); }

.ledger-note {
  max-width: var(--measure-prose);
  background-color: var(--color-paper-deep);
  border-block: var(--rule-hairline);
  padding: var(--space-4);
  margin-block: var(--space-6);
  font-size: var(--text-caption);
  color: var(--color-ink-soft);
}

.ledger-backlink {
  max-width: var(--measure-prose);
  margin-block-start: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}