/* ============================================================================
   RESEARCH PAPER: the reading pages of the Human Layer series on the sub page system
   (9 Oct 2026). Used by /research/{slug} (research-paper.aspx, the five papers from
   ~/papers-html) and /research/executive-summary (exec-summary.aspx).

   A long reading page, no instrument: ONE calm column of text (about 70 characters a
   line), the contents held still beside it on a desktop and folded into a "Contents"
   disclosure on a phone, figures and tables in the system's grammar, then the citation
   and the next paper. The papers' stored HTML (h2 h3 p hr em strong ol li table) is
   styled here under .pp-prose and never edited. Loaded after sub.css (PageStyles).
   Tokens only, every rule under .sp .pp, logical properties for right to left.
   ============================================================================ */

/* ---- header: the byline under the record line ---- */
.sp.pp .pp-by { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.sp.pp .pp-by .rec { color: var(--lp-muted); overflow-wrap: anywhere; }
.sp.pp .stamp span { min-width: 0; }

/* ---- the reading section ---- */
.sp.pp .pp-read { padding-block: 28px 64px; }
.sp.pp .pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.sp.pp .pp-toc { display: none; }

/* contents on a phone and a tablet: a native disclosure (opens without JavaScript) */
.sp.pp .pp-tocm { border-top: 1px solid var(--lp-ink); border-bottom: 1px solid var(--lp-rule); margin-bottom: 40px; }
.sp.pp .pp-tocm > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; list-style: none; font: 600 13px/1.4 var(--tos-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--lp-ink); }
.sp.pp .pp-tocm > summary::-webkit-details-marker { display: none; }
.sp.pp .pp-tocm > summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; }
.sp.pp .pp-tocm[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat; }
.sp.pp .pp-tocm .pp-toc-l { padding-bottom: 8px; }
.sp.pp .pp-toc-l a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--lp-rule); font-size: 15px; line-height: 1.4; color: var(--lp-ink-2); text-decoration: none; }
.sp.pp .pp-toc-l a:hover { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-underline-offset: 4px; }

/* ---- the text: one readable measure ---- */
.sp.pp .pp-col { min-width: 0; }
.sp.pp .pp-prose { max-width: 38em; }
.sp.pp .pp-prose > :first-child { margin-top: 0; }
.sp.pp .pp-prose p, .sp.pp .pp-prose li { line-height: 1.7; }
.sp.pp .pp-prose > p:first-child { font-size: 19px; line-height: 1.6; color: var(--lp-ink); }
.sp.pp .pp-prose h2 { scroll-margin-top: 88px; }
.sp.pp .pp-prose h3 { font-size: 20px; line-height: 1.3; }
.sp.pp .pp-prose h2 + p, .sp.pp .pp-prose h3 + p { margin-top: 14px; }
.sp.pp .pp-prose em { font-style: italic; }
.sp.pp .pp-prose hr { border: 0; border-top: 1px solid var(--lp-rule); height: 0; margin-top: 48px; }
.sp.pp .pp-prose hr + h2, .sp.pp .pp-prose hr + h3 { margin-top: 36px; }
.sp.pp .pp-prose hr + p { margin-top: 28px; }
.sp.pp .pp-prose hr:last-child { display: none; }
.sp.pp .pp-prose ol, .sp.pp .pp-prose ul { margin-top: 18px; }

/* tables: a ruled table, scrolled sideways only if a phone has no JavaScript; with it
   (research-paper.js labels every cell from its column head) one framed card per row */
.sp.pp .pp-prose .paper-table-wrap { margin-top: 24px; overflow-x: auto; border-top: 1px solid var(--lp-ink); }
.sp.pp .pp-prose table { display: table; width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; overflow: visible; }
.sp.pp .pp-prose th, .sp.pp .pp-prose td { padding: 12px 16px 12px 0; vertical-align: top; text-align: start; border-bottom: 1px solid var(--lp-rule); color: var(--lp-ink); }
.sp.pp .pp-prose th { font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); border-bottom-color: var(--lp-ink-2); }
.sp.pp .pp-prose td:first-child { font-weight: 600; }
@media (max-width: 759px) {
  .sp.pp .pp-prose .paper-table-wrap.is-cards { overflow: visible; border-top: 0; }
  .sp.pp .pp-prose .is-cards table { min-width: 0; }
  .sp.pp .pp-prose .is-cards table, .sp.pp .pp-prose .is-cards tbody, .sp.pp .pp-prose .is-cards tr, .sp.pp .pp-prose .is-cards td { display: block; }
  .sp.pp .pp-prose .is-cards tr.pp-th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .sp.pp .pp-prose .is-cards tr { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 4px 16px 14px; }
  .sp.pp .pp-prose .is-cards tr + tr { margin-top: 10px; }
  .sp.pp .pp-prose .is-cards td { padding: 10px 0 0; border: 0; font-size: 16px; }
  .sp.pp .pp-prose .is-cards td:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--lp-rule); font-size: 17px; }
  .sp.pp .pp-prose .is-cards td[data-l]::before { content: attr(data-l); display: block; font: 450 12px/1.5 var(--tos-font-mono); font-weight: 450; color: var(--lp-muted); }
}

/* the executive summary's five papers, as rows under the text */
.sp.pp .pp-papers { margin-top: 20px; max-width: 38em; }
.sp.pp .pp-papers .lk-x { color: var(--lp-muted); overflow-wrap: anywhere; }

/* ---- cite + the next paper ---- */
.sp.pp .pp-cb-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp.pp .pp-copy { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; padding: 0 16px; border: 1px solid var(--lp-ink); border-radius: 2px; font: 600 14px/1 var(--tos-font-body); color: var(--lp-ink); }
.sp.pp .pp-copy:hover { background: var(--lp-ink); color: var(--lp-paper); }
.sp.pp .callout .pp-cite-t { margin-top: 12px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.sp.pp .pp-pager .lk-x { color: var(--lp-muted); }

/* ---- desktop: the contents hold still on the left, the text reads in the middle ---- */
@media (min-width: 1180px) {
  .sp.pp .pp-read { padding-block: 40px 120px; }
  .sp.pp .pp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .sp.pp .pp-tocm { display: none; }
  .sp.pp .pp-toc { display: block; grid-column: 1 / span 3; position: sticky; top: calc(var(--lp-nav-h) + 40px); max-height: calc(100vh - var(--lp-nav-h) - 64px); overflow-y: auto; padding-inline-end: 24px; }
  .sp.pp .pp-toc .pp-toc-l { border-top: 1px solid var(--lp-ink); }
  .sp.pp .pp-toc .pp-toc-l a { position: relative; font-size: 14px; color: var(--lp-muted); padding-inline-start: 16px; }
  .sp.pp .pp-toc .pp-toc-l a:first-child { border-top: 0; }
  .sp.pp .pp-toc .pp-toc-l a.on { color: var(--lp-ink); font-weight: 600; }
  .sp.pp .pp-toc .pp-toc-l a.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--lp-accent); }
  .sp.pp .pp-col { grid-column: 5 / span 8; }
  .sp.pp .pp-grid > .pp-col:first-child { grid-column: 1 / span 9; }
  .sp.pp .pp-prose p, .sp.pp .pp-prose li { font-size: 18px; }
  .sp.pp .pp-prose > p:first-child { font-size: 21px; line-height: 1.55; }
  .sp.pp .pp-prose h3 { font-size: 22px; }
  .sp.pp .pp-prose .paper-table-wrap { overflow: visible; }
  .sp.pp .pp-prose table { min-width: 0; }
}