/* Open problems in the welfare of brain emulations · page-local styles, layered on /styles.css

   The prose primitives (.post-body, .assessment, .post-body__list, .post-figure,
   footnotes) are the mythos-cb2 set. Everything below "Paper furniture" is new
   here: this is the first post that carries real tables, so the table, the
   research-question box and the Figure 1 problem map are defined page-locally.
   Promote them into the root sheet at a second user, the way .review was. */

.post-body {
  max-width: 720px;
  margin: 0 auto;
}

.post-body p {
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.6em;
}

.post-body__heading {
  font-size: clamp(20px, 1.4vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2.4em 0 1em;
  scroll-margin-top: 88px; /* clear the sticky nav on #sec-N jumps */
}

.post-body__subheading {
  font-size: clamp(17px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 2em 0 0.8em;
  scroll-margin-top: 88px;
}

/* Section numbers keep the paper's cross-references ("Section 2.2") legible.
   Muted, tabular, and set off by space rather than punctuation. */
.sec-num {
  display: inline-block;
  min-width: 40px;
  color: var(--ink-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.post-body__kicker {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute) !important;
  margin: 2.2em 0 1em !important;
}

.post-body strong {
  font-weight: 600;
  color: var(--ink);
}

.post-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--brat);
  transition: background var(--t-fast);
}
.post-body a:hover { background: rgba(138, 206, 0, 0.18); }

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

/* Abstract callout — brat outline, ink type. The green is the frame only;
   never the foreground (contrast fails on white). */

.assessment {
  border: 1px solid var(--brat);
  background: rgba(138, 206, 0, 0.05);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 32px);
  margin: 0 0 2.2em;
}

.post-body .assessment__title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1em;
}

.post-body .assessment p:last-child { margin-bottom: 0; }

.post-body__list {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
}

.post-body__list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0.9em;
}

.post-body__list li:last-child { margin-bottom: 0; }

.post-body__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brat);
}

/* Ordered counterpart, same hanging indent (from persona-vectors). */
.post-body__olist {
  list-style: none;
  counter-reset: olist;
  margin: 0 0 1.6em;
  padding: 0;
}

.post-body__olist li {
  position: relative;
  counter-increment: olist;
  padding-left: 26px;
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0.9em;
}

.post-body__olist li:last-child { margin-bottom: 0; }

.post-body__olist li::before {
  content: counter(olist) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.post-figure {
  margin: clamp(32px, 4vw, 56px) 0;
}

.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.post-figure figcaption,
.problem-map figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.fig-label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

/* ---------- Paper furniture ---------- */

/* Tables. Booktabs-style: an ink rule top and bottom, a hairline under the
   header, nothing vertical. Caption sits above, as it does in the paper. */

.data-table {
  margin: clamp(32px, 4vw, 48px) 0;
}

.data-table > figcaption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* Narrow screens scroll the table, never the page. */
.data-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
}

.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }

.data-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
  padding-top: 12px;
  padding-bottom: 10px;
  white-space: nowrap;
}

.data-table tbody tr + tr th,
.data-table tbody tr + tr td {
  border-top: 1px solid var(--rule);
}

.data-table tbody th {
  font-weight: 600;
  min-width: 9em;
}

.data-table b { font-weight: 600; }

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table .muted { color: var(--ink-mute); }

.data-table tbody tr.is-subtotal th,
.data-table tbody tr.is-subtotal td {
  font-style: italic;
  background: var(--paper-soft);
}

.data-table tfoot th,
.data-table tfoot td {
  font-weight: 600;
  border-top: 1px solid var(--ink);
}

.data-table__note {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--ink-mute) !important;
  margin: 12px 0 0 !important;
}

/* Table 2: three species side by side; give the value columns equal weight.
   Mixed numbers and prose per column, so everything aligns left with its header. */
.data-table--compare td { width: 26%; }
.data-table--compare .num { text-align: left; }

/* Table 5: the criterion number hangs in its own gutter. */
.crit-num {
  display: inline-block;
  width: 1.6em;
  color: var(--ink-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Yes/No and likely-outcome chips. "Yes" fills brat behind ink — the .pill
   treatment — so the inherited-anatomy rows read at a glance. */
.verdict,
.outcome {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 8px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  white-space: nowrap;
}

.verdict--yes {
  background: var(--brat);
  border-color: var(--brat);
  color: var(--ink);
}

.outcome--open {
  border-color: var(--ink);
  color: var(--ink);
}

.data-table td .outcome { margin-right: 4px; }

/* Table 7: wide. Let it overhang the 720px measure on desktop. */
@media (min-width: 1000px) {
  .data-table--wide {
    margin-left: -100px;
    margin-right: -100px;
  }
}

.repo-table { min-width: 680px; }

.repo-table tbody th {
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
}

.repo-table .date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.repo-table .mark-col {
  text-align: center;
  width: 2.2em;
  padding-right: 6px;
  padding-left: 6px;
}

.repo-table abbr { text-decoration: none; cursor: help; }

.mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: middle;
}

/* Example research questions — one per problem area. A quiet grey panel with
   an ink rule down the left, so it reads as apparatus rather than argument
   and doesn't compete with the brat abstract box. Numbering continues across
   sections (1–21) via the <ol start>. */

.rq {
  background: var(--paper-soft);
  border-left: 2px solid var(--ink);
  padding: 20px 24px 22px;
  margin: 0 0 2em;
}

.post-body .rq__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
}

.rq__list {
  margin: 0;
  padding-left: 2em;
}

.rq__list li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.6em;
  padding-left: 4px;
}

.rq__list li:last-child { margin-bottom: 0; }

.rq__list li::marker {
  color: var(--ink-mute);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Figure 1 — the six problem areas as a 3×2 grid of linked cells. Shared
   1px borders via gap-on-ink, so the grid reads as one object. Hover follows
   the site's card convention: the cell darkens, nothing moves. */

.problem-map {
  margin: clamp(32px, 4vw, 48px) 0;
}

@media (min-width: 1000px) {
  .problem-map {
    margin-left: -100px;
    margin-right: -100px;
  }
}

.problem-map__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}

.post-body .problem-map__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  background: var(--paper);
  border-bottom: 0;
  transition: background var(--t-fast);
}

.post-body .problem-map__cell:hover { background: var(--paper-soft); }

.problem-map__area {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.problem-map__sec {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-mute);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.problem-map__q {
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.problem-map__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.problem-map__items span {
  position: relative;
  padding-left: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

.problem-map__items span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brat);
}

@media (max-width: 860px) {
  .problem-map__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .problem-map__grid { grid-template-columns: 1fr; }
}

/* Appendix B timeline: dates in a fixed left column, a hairline spine, and a
   brat node on the MaleCNS publication date. */

.timeline {
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
  border-left: 1px solid var(--rule-strong);
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 16px;
  padding: 0 0 18px 22px;
  font-size: 15.5px;
  line-height: 1.6;
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-mute);
}

.timeline li.is-key::before {
  background: var(--brat);
  border-color: var(--brat);
}

.timeline__date {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.timeline__text { color: var(--ink); }

@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* Footnotes */

.fn-ref {
  font-size: 11px;
  line-height: 0;
  vertical-align: super;
}

.fn-ref a {
  color: var(--ink-soft);
  border-bottom: 0;
}
.fn-ref a:hover { color: var(--ink); }

.footnotes {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.footnotes__list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
}

.footnotes__list li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 1em;
}

.footnotes__list li:last-child { margin-bottom: 0; }

.footnotes__back {
  margin-left: 4px;
  border-bottom: 0 !important;
}

/* Footnote hover preview (from mythos-cb2). Desktop-only — the JS is gated on a fine pointer, and
   the media query keeps the styles out of touch builds regardless. */

@media (hover: hover) and (pointer: fine) {
  .fn-pop {
    position: absolute;
    z-index: 60; /* above the sticky nav at 50 */
    top: 0;
    left: 0;
    max-width: 360px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-top: 2px solid var(--brat);
    box-shadow: 0 6px 24px rgba(10, 10, 10, 0.1);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  }

  .fn-pop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* The ref itself gets a hit area worth aiming at. */
  .fn-ref a {
    padding: 0 2px;
  }
  .fn-ref a:hover {
    background: rgba(138, 206, 0, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-pop { transition: none; transform: none; }
  .fn-pop.is-visible { transform: none; }
}

/* References — collapsed by default; ~100 entries would otherwise outweigh
   the paper. Borrows the review box's disclosure chrome, at lower weight. */

.references {
  margin-top: 40px;
}

.references__box {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--t-med);
}
.references__box:hover,
.references__box[open] { border-color: var(--rule-strong); }

.references__summary {
  display: block;
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  list-style: none;
}
.references__summary::-webkit-details-marker { display: none; }
.references__summary::marker { content: ""; }
.references__summary:focus-visible { outline: 2px solid var(--brat); outline-offset: -2px; }
.references__box[open] .review__chev { transform: translateY(-1px) rotate(90deg); }

.references__list {
  list-style: none;
  margin: 0;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--rule);
}

.references__list li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 1.4em;
  text-indent: -1.4em; /* hanging indent */
  margin-bottom: 0.55em;
}

.post-body > *:last-child {
  margin-bottom: 0;
}

/* The adversarial-review box (.review*) lives in the root styles.css as a
   shared post primitive — this file carries no copy. */

/* Table 5: hang wrapped criteria past their number. */
.data-table th:has(> .crit-num) {
  padding-left: 1.6em;
  text-indent: -1.6em;
}

/* ---------- Floating contents ---------- */

/* The .toc / .post-layout component lives in the root sheet (every post has
   one). Only this paper's overhang is local: with the TOC showing, the wide
   items overhang rightward only, since the left side belongs to the TOC. */
@media (min-width: 1180px) {
  .post-layout .problem-map,
  .post-layout .data-table--wide {
    margin-left: 0;
    margin-right: calc(720px - 100cqw);
  }
}

/* Anchor targets that aren't headings still need to clear the sticky nav. */
#review-title,
#refs-title { scroll-margin-top: 88px; }