/* ============================================================================
   paper.css — the HTML edition of a working paper.

   Layers over site.css: the shell, rail, .btn, .cite, .rule and sup.reg all
   come from there unchanged. This file adds only what a paper needs that the
   home page does not — a contents rail, formal blocks, display equations,
   footnotes, and figures drawn as theme-aware SVG.

   Measure. Running prose wants 60-75 characters. Georgia at 1rem lands there at
   about 37rem, a little wider than the home page's 34rem because equations and
   the comparative table need the room.
   ========================================================================== */

:root {
  --pp-measure: 37rem;
  --pp-wide: 46rem;      /* figures and the table may exceed the text measure */
}

/* Skip link — worth having on a 5,000-word document. Off-screen until focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1rem;
  font-family: var(--al-font-ui);
  font-size: var(--ta-h6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ta-dark-blue);
  color: var(--ta-pale-beige);
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.pp-wrap {
  padding-inline: clamp(var(--ta-edge), 5vw, 3.5rem);
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

/* ------------------------------------------------------------- back to /#research */

.pp-up {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* 0.5rem of the padding is clawed back with a negative margin so the label
     still aligns to the text edge while the target stays 44px tall. */
  margin: -0.6875rem 0 0 -0.5rem;
  padding: 0.6875rem 0.5rem;
  font-family: var(--al-font-ui);
  font-weight: 500;
  font-size: var(--ta-h6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--meta);
}
.pp-up svg { width: 0.75rem; height: 0.75rem; }
.pp-up:hover { color: var(--al-text-primary); }

/* ------------------------------------------------------------------- header */

.pp-head {
  max-width: var(--pp-wide);
  margin-top: 1.5rem;
}

.pp-eyebrow {
  margin: 0 0 0.875rem;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.pp-head h1 {
  margin: 0;
  font-family: var(--al-font-heading);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.2vw, var(--ta-h1));
  line-height: 1.1;
  letter-spacing: var(--ta-heading-track);
  text-transform: var(--ta-heading-case);
  color: var(--al-text-primary);
  /* Balanced ragging keeps a five-word title from dropping one orphan word. */
  text-wrap: balance;
}

.pp-sub {
  margin: 0.75rem 0 0;
  font-size: var(--ta-h4);
  line-height: 1.4;
  font-style: italic;
  color: var(--al-text-secondary);
}

.pp-author {
  margin: 1.5rem 0 0;
  font-size: var(--ta-h5);
  color: var(--al-text-primary);
}

.pp-version {
  margin: 0.375rem 0 0;
  color: var(--meta);
}

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.pp-filemeta { color: var(--meta); }

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

.pp-toc {
  max-width: var(--pp-wide);
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.375rem;
  background: var(--al-bg-elevated);
  border: 1px solid var(--al-border-muted);
  border-radius: var(--al-radius-md);
}

.pp-toc-h {
  margin: 0 0 0.75rem;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.pp-toc a {
  display: block;
  padding: 0.3125rem 0;
  font-family: var(--al-font-ui);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--al-text-secondary);
  border-left: 2px solid transparent;
  padding-left: 0.6875rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pp-toc a.lvl2 {
  padding-left: 1.5rem;
  font-size: 0.875rem;
  color: var(--meta);
}
.pp-toc a:hover { color: var(--al-text-primary); }

/* The marker is a bar in the gutter, not a weight change, so nothing shifts by
   a pixel as the active section changes under the scroll. */
.pp-toc a[aria-current="true"] {
  color: var(--al-text-primary);
  border-left-color: var(--ta-dark-sand);
}

/* ---------------------------------------------------------------- the paper */

/* The article box is as wide as the widest thing in it; the measure is applied
   to the prose children instead. Capping the article itself at 37rem silently
   capped the figures and the table too — max-width on a child cannot exceed its
   parent — so the chart drew at 550px and its labels landed at 8.3px. */
.pp-article {
  max-width: var(--pp-wide);
  margin-top: 3rem;
  padding-bottom: 4rem;
}

.pp-article > p,
.pp-article > .pp-eq,
.pp-article > .pp-kw,
.pp-article > .pp-h1,
.pp-article > .pp-h2,
.pp-article > .pp-block,
.pp-article > .pp-abstract,
.pp-article > .pp-disclosure,
.pp-article > .pp-refs,
.pp-article > .pp-notes,
.pp-article > .pp-foot { max-width: var(--pp-measure); }

.pp-article > p {
  margin: 0 0 1.125rem;
}

.pp-kw {
  margin: 0 0 2rem !important;
  padding-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--meta);
  border-bottom: 1px solid var(--al-border-muted);
}

.pp-h1 {
  margin: 3rem 0 1.25rem;
  font-family: var(--al-font-heading);
  font-weight: 500;
  font-size: var(--ta-h3);
  line-height: var(--ta-h3-lh);
  letter-spacing: var(--ta-heading-track);
  text-transform: var(--ta-heading-case);
  color: var(--al-text-primary);
  /* Scroll-margin so an anchored heading is not welded to the viewport top. */
  scroll-margin-top: 1.5rem;
}

.pp-h2 {
  margin: 2.25rem 0 0.875rem;
  font-family: var(--al-font-ui);
  font-weight: 500;
  font-size: var(--ta-h5);
  line-height: var(--ta-h5-lh);
  letter-spacing: 0.06em;
  color: var(--al-text-primary);
  scroll-margin-top: 1.5rem;
}

/* Abstract and the AI disclosure — set apart, not shouted. */
.pp-abstract {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.375rem;
  background: var(--al-bg-surface);
  border-left: 2px solid var(--ta-dark-sand);
  border-radius: 0 var(--al-radius-sm) var(--al-radius-sm) 0;
}
.pp-abstract p { margin: 0; font-size: 0.9375rem; line-height: 1.7; }

.pp-disclosure {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--al-border-default);
  border-radius: var(--al-radius-sm);
}
.pp-disclosure p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--al-text-secondary);
}

/* Definitions, theorems, proofs, corollaries, remarks, conditions. The master
   indents them; a left rule reads better on screen than an indent alone, which
   at this measure just looks like a stray margin. */
.pp-block {
  margin: 1.5rem 0;
  padding: 0 0 0 1.125rem;
  border-left: 2px solid var(--al-border-default);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.pp-block > p { margin: 0 0 0.75rem; }
.pp-block > p:last-child { margin-bottom: 0; }
.pp-block strong { font-family: var(--al-font-ui); font-weight: 500; }

/* A justification hanging off the statement above it, at the master's second
   indent level. */
.pp-block .pp-sub {
  margin-left: 1rem;
  font-size: 0.875rem;
  color: var(--al-text-secondary);
}

.pp-thm, .pp-cor { border-left-color: var(--ta-dark-sand); }
.pp-thm, .pp-cor, .pp-cond { background: var(--al-bg-surface); padding: 0.875rem 1.125rem; }
.pp-proof { color: var(--al-text-secondary); }

/* Display equations.
   Every equation here is a single line, so they need centring and air, not a
   layout engine. The family is the one deliberate departure from the prose:
   Georgia has only old-style figures and no lining alternative, so "0" sits at
   x-height and reads as a lowercase o — fine in prose, not in "d²P/dn² < 0".
   JetBrains Mono is already preloaded for the page, renders identically on every
   platform, and distinguishes its digits unambiguously. It also follows the
   precedent the home page already sets, where this paper's claim is in <code>. */
.pp-eq {
  margin: 1.5rem 0 !important;
  padding: 0.25rem 0;
  font-family: var(--al-font-mono);
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--al-text-primary);
  font-variant-ligatures: none;
  /* An equation must never be the thing that makes the page scroll sideways. */
  overflow-x: auto;
  overflow-y: hidden;
}
.pp-eq sub, .pp-eq sup { font-size: 0.75em; }
.pp-block .pp-eq { text-align: left; padding-left: 0.5rem; }

/* --------------------------------------------------------------- footnotes */

.pp-fnref {
  font-family: var(--al-font-mono);
  font-size: 0.6875em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
}
.pp-fnref a {
  text-decoration: none;
  color: var(--ta-accent);
  /* A single small digit is not a target. Padding it to 24px each way clears
     WCAG 2.5.8 outright rather than leaning on the inline-target exception;
     the negative margin keeps the line box from opening up to make room. */
  padding: 0.5rem 0.4375rem;
  margin: -0.5rem -0.4375rem;
}
.pp-fnref a:hover { text-decoration: underline; }

.pp-notes { margin-top: 3.5rem; }

.pp-fns, .pp-refs {
  margin: 0;
  padding-left: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--al-text-secondary);
}
.pp-fns li, .pp-refs li { margin-bottom: 0.625rem; }
.pp-fns li::marker, .pp-refs li::marker { color: var(--meta); }

.pp-refs { list-style: none; padding-left: 0; counter-reset: ref; }
.pp-refs li {
  counter-increment: ref;
  padding-left: 2.25rem;
  text-indent: -2.25rem;
}
.pp-refs li::before {
  content: "[" counter(ref) "]";
  display: inline-block;
  width: 2.25rem;
  font-family: var(--al-font-mono);
  font-size: 0.75rem;
  color: var(--meta);
  text-indent: 0;
}

.pp-back {
  text-decoration: none;
  color: var(--ta-accent);
  padding: 0.25rem;
}
.pp-back:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- table */

.pp-tablewrap {
  max-width: var(--pp-wide);
  margin: 1.75rem 0;
  /* The table is the one element that can genuinely exceed the measure, so it
     scrolls inside its own box rather than widening the page. */
  overflow-x: auto;
  border: 1px solid var(--al-border-muted);
  border-radius: var(--al-radius-md);
}

.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.pp-tcap {
  padding: 0.875rem 1rem;
  font-family: var(--al-font-ui);
  font-size: var(--ta-h6);
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--meta);
  border-bottom: 1px solid var(--al-border-muted);
}

.pp-table th, .pp-table td {
  padding: 0.625rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--al-border-muted);
}
.pp-table thead th {
  font-family: var(--al-font-ui);
  font-weight: 500;
  font-size: var(--ta-h6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--al-text-primary);
  background: var(--al-bg-surface);
  white-space: nowrap;
}
.pp-table tbody th {
  font-weight: 400;
  color: var(--al-text-primary);
}
.pp-table tbody td { color: var(--al-text-secondary); }
.pp-table tbody tr:last-child th,
.pp-table tbody tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- figures */

.pp-fig {
  max-width: var(--pp-wide);
  margin: 2.25rem 0;
  padding: 1.25rem 1.25rem 0;
  background: var(--al-bg-elevated);
  border: 1px solid var(--al-border-muted);
  border-radius: var(--al-radius-md);
}

.pp-fig figcaption {
  padding: 1rem 0 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--al-text-secondary);
}

.pp-svg { width: 100%; height: auto; }

/* Figure 1's two panels sit side by side while each can still hold its labels,
   and stack once they cannot. flex-basis 14rem is the width below which the
   node diagram starts crowding. */
/* nowrap is deliberate: .pp-svg carries width:100%, so with wrapping enabled
   each panel's hypothetical size fills the row and the second would drop to its
   own line at every width. Without wrapping they share the row and shrink. */
.pp-panels {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  align-items: flex-start;
}
/* The max-width stops a stacked panel from ballooning on a wide screen. */
.pp-panels .pp-svg { max-width: 24rem; }

/* Stacking is driven by an explicit breakpoint rather than a flex-basis so the
   width at which it happens is stated once and can be reasoned about, instead of
   emerging from a sum of paddings and caps. Below this the panels are full width
   and their labels stay near their intended size. */
@media (max-width: 42rem) {
  .pp-panels { flex-wrap: wrap; }
  .pp-panels .pp-svg { flex: 1 1 100%; }
}

/* The two series. Dark Sand against the theme-aware accent — a hue AND
   lightness difference, so it survives red/green colour blindness and greyscale
   printing, which the master's red-versus-green does not. */
.pp-svg-bi     { fill: none; stroke: var(--ta-dark-sand); stroke-width: 2.6; }
.pp-svg-hub-l  { fill: none; stroke: var(--ta-accent);    stroke-width: 2.6; }
.pp-svg-bi, .pp-svg-hub-l { stroke-linecap: round; stroke-linejoin: round; }

/* The mesh is the argument of the left panel — 28 channels have to read as
   congestion, so it stays legible rather than tasteful. */
.pp-svg-mesh line  { stroke: var(--ta-dark-sand); stroke-width: 1.3; opacity: 0.95; }
.pp-svg-spoke line { stroke: var(--ta-accent); stroke-width: 1.8; }
.pp-svg-ring  { fill: none; stroke: var(--ta-dark-sand); stroke-width: 13; }
.pp-svg-hub   { fill: var(--ta-accent); }
.pp-svg-node  { fill: var(--al-text-primary); }

.pp-svg-grid line { stroke: var(--al-border-muted); stroke-width: 1; }
.pp-svg-axis      { stroke: var(--al-border-default); stroke-width: 1.5; }
.pp-svg-drop      { stroke: var(--meta); stroke-width: 1; stroke-dasharray: 3 3; }
.pp-svg-mark      { fill: var(--meta); }

.pp-svg text { font-family: var(--al-font-ui); }

.pp-svg-t {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--al-text-primary);
}
.pp-svg-n, .pp-svg-tick, .pp-svg-vs, .pp-svg-ax {
  font-family: var(--al-font-mono);
  fill: var(--meta);
  text-anchor: middle;
}
.pp-svg-n    { font-size: 14px; }
/* 13 user units at the chart's 0.87 desktop scale renders at 11.3px. */
.pp-svg-tick { font-size: 13px; }
.pp-svg-ticky { text-anchor: end; }
.pp-svg-vs   { font-size: 13px; letter-spacing: 0.1em; }
.pp-svg-ax   { font-size: 13px; letter-spacing: 0.06em; }

.pp-svg-hubl {
  font-size: 15px;
  font-weight: 500;
  text-anchor: middle;
  fill: var(--al-accent-text);
}

.pp-svg-lab { font-size: 16px; font-weight: 500; text-anchor: middle; }
.pp-svg-lbi  { fill: var(--ta-dark-sand); }
.pp-svg-lhub { fill: var(--ta-accent); }
.pp-svg-sub  { font-size: 11px; }

/* Figure 2 cannot stack — it is one pair of axes. Its labels are in user units,
   so they shrink with the viewBox: at 390px the chart draws at 0.39 scale and a
   12px tick becomes 4.6px. The sizes below are scaled back up so the rendered
   size stays near 11-13px, and the crowding that causes is relieved by dropping
   every other gridline label and the axis title, both of which the caption
   already covers. Measured, not guessed: 0.81 scale at 768px, 0.49 at 480px. */
@media (max-width: 48rem) {
  .pp-svg-chart .pp-svg-tick { font-size: 17px; }
  .pp-svg-chart .pp-svg-ax   { font-size: 18px; }
  .pp-svg-chart .pp-svg-lab  { font-size: 22px; }
  .pp-svg-chart .pp-svg-sub  { font-size: 15px; }
}

@media (max-width: 30rem) {
  .pp-svg-chart .pp-svg-tick { font-size: 26px; }
  .pp-svg-chart .pp-svg-lab  { font-size: 34px; }
  .pp-svg-chart .pp-svg-sub  { font-size: 23px; }
  .pp-svg-chart .pp-svg-alt,
  .pp-svg-chart .pp-svg-ax { display: none; }
}

/* Figure 1's panel captions get the same treatment once stacked, though far
   less of it — each panel keeps most of the column width. */
@media (max-width: 30rem) {
  .pp-panels .pp-svg-t { font-size: 20px; }
  .pp-panels .pp-svg-n { font-size: 15px; }
}

/* The contents are a jump list, not an outline, on a phone: 21 entries stood
   775px tall on an 844px screen, so the paper began below the fold. The ten
   top-level sections fit in a third of that. */
@media (max-width: 48rem) {
  .pp-toc a.lvl2 { display: none; }
}

/* --------------------------------------------------------------- page foot */

.pp-foot {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--al-border-muted);
  display: grid;
  gap: 1.25rem;
}

.pp-legal {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--meta);
}

/* --------------------------------------------------------------- wide only */

/* The contents move into their own sticky column once there is room for one
   beside a 37rem measure without squeezing it. 16.5rem rail + 37rem + 14rem
   contents + gutters lands just under 78rem, so 80rem is the honest threshold. */
@media (min-width: 80rem) {
  .pp-body .pp-wrap {
    display: grid;
    grid-template-columns: minmax(0, var(--pp-wide)) 14rem;
    column-gap: 3rem;
    align-items: start;
  }
  .pp-up, .pp-head, .pp-article { grid-column: 1; }

  .pp-toc {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: sticky;
    top: 2.5rem;
    margin-top: 1.5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--al-border-muted);
    border-radius: 0;
    padding: 0 0 0 1.25rem;
  }
}

/* ------------------------------------------------------------------- print */

@media print {
  .rail, .pp-toc, .pp-up, .site-footer, .skip, .theme-toggle { display: none !important; }
  .pp-wrap { padding: 0; display: block; }
  .pp-article, .pp-head, .pp-fig, .pp-tablewrap { max-width: none; }
  .pp-abstract, .pp-disclosure, .pp-fig, .pp-toc { background: none; }
  .pp-h1, .pp-h2 { break-after: avoid; }
  .pp-block, .pp-fig, .pp-tablewrap { break-inside: avoid; }
  .pp-fnref a { color: inherit; }
}