/* Pages for the two drafts, and the three figures added in September 2026. */
:root {
  --paper-ink: #23211e;
  --paper-bg: #fdfcf9;
  --paper-rule: #ded8cd;
  --paper-soft: #6f6a62;
}

body.paper-page {
  margin: 0;
  background: var(--paper-bg);
  color: var(--paper-ink);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  line-height: 1.55;
}

.paper {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 6rem;
}

.paper-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: .75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--paper-rule);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .82rem;
  letter-spacing: .02em;
}
.paper-nav a { color: var(--paper-soft); text-decoration: none; }
.paper-nav a:hover { color: var(--paper-ink); text-decoration: underline; }

.paper-lede {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .92rem;
  color: var(--paper-soft);
  margin: 0 0 2rem;
}

.paper h1 { font-size: 1.9rem; line-height: 1.2; margin: 2.5rem 0 1rem; }
.paper h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
.paper h3 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
.paper h4 { font-size: .98rem; margin: 1.5rem 0 .4rem; }
.paper p { margin: 0 0 1.05rem; }
.paper ul, .paper ol { margin: 0 0 1.05rem 1.2rem; padding: 0; }
.paper li { margin-bottom: .35rem; }
.paper table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; font-size: .9rem; }
.paper th, .paper td { border: 1px solid var(--paper-rule); padding: .35rem .5rem; text-align: left; }
.paper code { background: #f0ece3; padding: .1em .3em; border-radius: 3px; font-size: .88em; }

.cite { color: var(--paper-soft); }
.figref {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .82rem;
  color: var(--paper-soft);
  background: #f2efe7;
  border-left: 2px solid var(--paper-rule);
  padding: .3rem .55rem;
  margin: .25rem 0;
}

/* ── Figures ─────────────────────────────────────────────────────────────── */
.fig2 { margin: 2.5rem 0 3rem; padding: 0; }
.fig2 figcaption {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .85rem;
  color: var(--paper-soft);
  margin-bottom: .85rem;
}
.fig2-host {
  border: 1px solid var(--paper-rule);
  border-radius: 4px;
  padding: .85rem;
  background: #fff;
  position: relative;
}
.fig2-types { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.fig2-type {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .73rem;
  padding: .22rem .5rem;
  border: 1px solid var(--paper-rule);
  border-radius: 999px;
  background: #fbf9f4;
  color: var(--paper-soft);
  cursor: pointer;
}
.fig2-type:hover { border-color: #b9b1a2; color: var(--paper-ink); }
.fig2-type.is-on { background: #3f6fb5; border-color: #3f6fb5; color: #fff; }

.fig2-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin: 0 0 .75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .73rem; color: var(--paper-soft);
}
.fig2-key { display: inline-flex; align-items: center; gap: .3rem; }
.fig2-key i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }

.fig2-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .75rem; color: var(--paper-soft); margin: .6rem 0 0;
}

.fig2-bars { list-style: none; margin: 0; padding: 0; }
.fig2-bars li {
  display: grid;
  grid-template-columns: minmax(7rem, 14rem) 1fr auto;
  gap: .6rem;
  align-items: center;
  margin-bottom: .28rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .8rem;
}
.fig2-term { text-align: right; color: var(--paper-ink); }
.fig2-track { background: #f0ece3; border-radius: 2px; height: .8rem; overflow: hidden; }
.fig2-bar { display: block; height: 100%; border-radius: 2px; }
.fig2-value { font-size: .7rem; color: var(--paper-soft); white-space: nowrap; }

.fig2-canvas { position: relative; }
.fig2-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(35, 33, 30, .94);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .74rem;
  line-height: 1.35;
  padding: .4rem .55rem;
  border-radius: 4px;
  max-width: 18rem;
  z-index: 20;
}

@media (max-width: 640px) {
  .fig2-bars li { grid-template-columns: 1fr; gap: .1rem; }
  .fig2-term { text-align: left; }
}

/* Figures on the restructured page break out of the text column, which is narrow. */
main.restructured .fig2-host,
main.restructured figure.fig2,
main.restructured .prose > .grid-block,
main.restructured p.figure-caption {
  /* Wider than the text column, centred on it: the column is already centred in the
     space between the two fixed sidebars, so this centres the figure on the page. */
  --gap: calc(100vw - var(--sb-w, 230px) - var(--right-w, 280px));
  width: min(1080px, max(100%, calc(var(--gap) - 50px)));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
main.restructured .fig2-host,
main.restructured figure.fig2,
main.restructured .prose > .grid-block { margin-top: .6rem; margin-bottom: 1rem; }
/* The interface blocks draw themselves to the width they are given, so they need the
   full centred width rather than the text column. */
main.restructured .prose > .grid-block {
  overflow: visible;
  /* These draw their own labels at the edges, so give them the whole gap. */
  width: min(1200px, max(100%, calc(var(--gap) - 12px)));
}
main.restructured figure.fig2 { border: 0; padding: 0; }
main.restructured .fig2-host { background: #fff; padding: 1.35rem 1.5rem 1.15rem; }
main.restructured .prose > .grid-block { padding: .4rem .6rem; }
main.restructured table.taxonomy { width: 100%; border-collapse: collapse; font-size: .78rem; }
main.restructured table.taxonomy {
  table-layout: fixed;          /* the columns keep the widths the colgroup sets */
  min-width: 52rem;
}
main.restructured table.taxonomy th,
main.restructured table.taxonomy td {
  border: 1px solid var(--paper-rule, #ded8cd);
  padding: .4rem .55rem;
  vertical-align: top;
  text-align: left;
  overflow-wrap: break-word;    /* break only words that cannot fit, never mid-word by default */
  word-break: normal;
  hyphens: none;
}
main.restructured table.taxonomy th { background: #f4f1ea; font-weight: 600; }
main.restructured table.taxonomy th.taxonomy-group {
  vertical-align: middle;
  background: #f9f7f2;
  font-weight: 600;
}
main.restructured .paper-nav { display: flex; gap: 1rem; font-size: .82rem; }
main.restructured .paper-nav-current { color: #8a8377; }
.fig2-key-btn {
  border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; color: inherit; padding: .1rem .25rem; border-radius: 3px;
}
.fig2-key-btn:hover { border-color: #cfc7b8; }
.fig2-key-btn.is-on { border-color: #23211e; background: #f0ece3; color: #23211e; }

.paper-nav-disabled {
  color: #b5ada0;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ── September 2026 paper: typography and figure layout ─────────────────────
   Body text justified; headings, captions, tables and figure chrome in Test
   National; figures centred with their caption underneath. */
main.restructured .prose p,
main.restructured .prose li { text-align: justify; hyphens: auto; }

main.restructured h1, main.restructured h2, main.restructured h3,
main.restructured h4, main.restructured h5,
main.restructured .side-nav, .side-nav {
  font-family: "Test National", -apple-system, BlinkMacSystemFont, sans-serif;
}
main.restructured h1 { font-weight: 600; letter-spacing: -.01em; }
main.restructured h2, main.restructured h3, main.restructured h4 { font-weight: 600; }

/* A caption is the paragraph that opens with "Figure n" or "Table n". */
main.restructured p.figure-caption {
  font-family: "Test National", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .82rem;
  line-height: 1.45;
  color: #5c574f;
  text-align: center;
  margin-top: .55rem;
  margin-bottom: 2.4rem;
}
main.restructured p.figure-caption strong { font-weight: 600; color: #23211e; }


main.restructured figure.fig2 { text-align: center; }
main.restructured figure.fig2 svg { max-width: 100%; height: auto; }

main.restructured .fig2-host,
main.restructured .fig2-types,
main.restructured .fig2-legend,
main.restructured .fig2-note,
main.restructured .fig2-bars,
main.restructured table.taxonomy,
main.restructured .fig2-matrix,
main.restructured .grid-block,
main.restructured .block-caption {
  font-family: "Test National", -apple-system, BlinkMacSystemFont, sans-serif;
}
main.restructured .fig2-note { text-align: left; }

/* Nothing inside a figure may spill out of it. */
main.restructured .fig2-host { overflow-x: auto; }
main.restructured .fig2-host > * { max-width: 100%; }
main.restructured .fig2-bars li { overflow: hidden; }
main.restructured .fig2-term { overflow-wrap: anywhere; }
main.restructured table.taxonomy td,
main.restructured table.taxonomy th { overflow-wrap: anywhere; }

/* Figure 3b: actor types against document types. */
#fig-actor-types { overflow-x: auto; position: relative; }
.fig2-matrix {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  min-width: 46rem;
  font-family: "Test National", -apple-system, BlinkMacSystemFont, sans-serif;
}
.fig2-matrix th { font-weight: 400; font-size: .72rem; color: #6f6a62; }
.fig2-matrix > tr:first-child th { height: 13rem; vertical-align: bottom; padding: 0 2px .5rem; }
.fig2-matrix > tr:first-child th span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; text-align: left;
}
.fig2-matrix .fig2-matrix-row {
  text-align: right; padding-right: .6rem; white-space: nowrap;
  font-size: .74rem; color: #23211e;
}
.fig2-matrix .fig2-matrix-row i {
  width: .62rem; height: .62rem; border-radius: 2px; display: inline-block; margin-right: .4rem;
}
.fig2-matrix td {
  text-align: center; font-size: .68rem; color: #fff;
  height: 1.7rem; min-width: 1.9rem; border-radius: 2px;
  background: #faf8f3;
}
.fig2-matrix td.has-value { cursor: pointer; }
.fig2-matrix td.has-value:hover { outline: 2px solid #23211e; outline-offset: -2px; }
.fig2-matrix .is-lit { color: #23211e; font-weight: 600; }
.fig2-matrix th.is-lit span, .fig2-matrix th.is-lit { color: #23211e; }
.fig2-tip-who { color: rgba(255,255,255,.75); }