/* PageRank — a Logical Art nibble.
 *
 * The subject is a total, so the picture is a list of ranks and two numbers
 * under it. Colour marks the one measured thing, which here is the sum and the
 * pages that leak it: a dead end is the only element that ever takes the accent
 * while the graph is intact.
 *
 * Written for this page rather than copied from a sibling and renamed. That is
 * not a style preference: crc.css carried ninety-two lines of Masking's and
 * Hamming's stylesheets, including a rule combining Hamming's root class with
 * CRC's verdict class, which could match on neither page.
 */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* The accent lives here, on the root, rather than on .pr where it started.
   .pr-quote sits in .pr-why and inside the ledger's <details>, both of which
   are OUTSIDE .pr, so a property declared on .pr was simply not in scope for
   them: `border-left: 2px solid var(--accent)` resolved to a colour that did
   not exist, and an invalid value drops the whole declaration. The border was
   never drawn and nothing said so, which is the same silent failure as the
   machine whose null accent rendered as the literal string None.

   Caught by la-paints-audit, not by reading, and confirmed by reading the
   computed border width back as 0px. */
body {
  font-family: var(--la-font-ui);
  background: var(--la-page);
  color: var(--la-ink);
  line-height: var(--la-leading-body);
  -webkit-font-smoothing: antialiased;
}

main.nibble {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* Read but not seen. [hidden] is restated because any selector carrying a
   display value outranks the user-agent rule for the attribute, which has
   shipped broken in this family three times. */
.pr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pr-sr[hidden] { display: none; }

/* ---- the four stages ----------------------------------------------------- */
.pr-steplabel {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
}
.pr-steplabel:first-of-type { margin-top: var(--la-space-2); }

.pr-stepno {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  border: 1px solid var(--la-hairline);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pr-hint, .pr-note {
  margin-top: var(--la-space-1);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

/* ---- stage 1: the graph -------------------------------------------------- */
.pr-links {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: var(--la-space-1);
}

.pr-node {
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
  font-size: var(--la-text-sm);
}

.pr-nodename {
  font-family: var(--la-font-mono);
  font-weight: 600;
  min-width: 1.5rem;
}

.pr-nodelinks { color: var(--la-ink-dim); }

/* A page that points nowhere is the leak, so it is the one thing marked. Marked
   structurally as well as by colour, because colour is not the only channel a
   reader has. */
.pr-node[data-dead="yes"] .pr-nodename,
.pr-node[data-dead="yes"] .pr-nodelinks { color: var(--accent); }
.pr-node[data-dead="yes"] .pr-nodename { text-decoration: underline dotted; }

/* ---- stage 2: what each page hands out ----------------------------------- */
.pr-share {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: var(--la-space-1);
}

.pr-sharerow {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}
.pr-sharerow[data-dead="yes"] { color: var(--accent); }

/* ---- stage 3: the ranks -------------------------------------------------- */
.pr-knob {
  display: grid;
  gap: var(--la-space-1);
  margin-top: var(--la-space-3);
}
.pr-knob[hidden] { display: none; }

.pr-knob label {
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

.pr-value {
  font-family: var(--la-font-mono);
  color: var(--la-ink);
}

.pr-knob input[type="range"] {
  width: 100%;
  /* 2.5.8 asks 24 by 24 at AA; a range needs a comfortable grab area. */
  min-height: 2.75rem;
  accent-color: var(--accent);
}
.pr-knob input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pr-ranks {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: var(--la-space-2);
}

.pr-rank {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: var(--la-space-2);
}

.pr-ranklabel {
  font-family: var(--la-font-mono);
  font-weight: 600;
  font-size: var(--la-text-sm);
}

/* The bar is a proportion of the largest rank, which is a picture of the order
   rather than of the total. The total is a number and is printed as one. */
.pr-rankbar {
  height: 0.5rem;
  border-radius: 1px;
  background: var(--la-ink-dim);
  display: block;
}

.pr-rankval {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  font-variant-numeric: tabular-nums;
}

/* CSP forbids an inline style attribute, so the widths are data values with a
   rule per step. Twenty-one steps of five is the resolution the page rounds to,
   so nothing is lost between the number and the picture. */
.pr-rank[data-w="0"] .pr-rankbar { width: 0%; }
.pr-rank[data-w="5"] .pr-rankbar { width: 5%; }
.pr-rank[data-w="10"] .pr-rankbar { width: 10%; }
.pr-rank[data-w="15"] .pr-rankbar { width: 15%; }
.pr-rank[data-w="20"] .pr-rankbar { width: 20%; }
.pr-rank[data-w="25"] .pr-rankbar { width: 25%; }
.pr-rank[data-w="30"] .pr-rankbar { width: 30%; }
.pr-rank[data-w="35"] .pr-rankbar { width: 35%; }
.pr-rank[data-w="40"] .pr-rankbar { width: 40%; }
.pr-rank[data-w="45"] .pr-rankbar { width: 45%; }
.pr-rank[data-w="50"] .pr-rankbar { width: 50%; }
.pr-rank[data-w="55"] .pr-rankbar { width: 55%; }
.pr-rank[data-w="60"] .pr-rankbar { width: 60%; }
.pr-rank[data-w="65"] .pr-rankbar { width: 65%; }
.pr-rank[data-w="70"] .pr-rankbar { width: 70%; }
.pr-rank[data-w="75"] .pr-rankbar { width: 75%; }
.pr-rank[data-w="80"] .pr-rankbar { width: 80%; }
.pr-rank[data-w="85"] .pr-rankbar { width: 85%; }
.pr-rank[data-w="90"] .pr-rankbar { width: 90%; }
.pr-rank[data-w="95"] .pr-rankbar { width: 95%; }
.pr-rank[data-w="100"] .pr-rankbar { width: 100%; }

/* ---- stage 4: the totals ------------------------------------------------- */
.pr-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2) var(--la-space-4);
  margin-top: var(--la-space-4);
  padding-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
}

.pr-reg {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
  font-variant-numeric: tabular-nums;
}

.pr-verdictline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

/* The leak is the one state that earns the accent on the verdict, because it is
   the one the reader caused and the one the paper does not mention. */
.pr[data-dead="yes"] .pr-verdictline { color: var(--accent); }

.pr-agreeline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}
/* If the two forms ever disagree about the ORDER, the page is making a claim it
   cannot support, and that has to be loud rather than tucked into a sentence. */
.pr[data-agree="no"] .pr-agreeline {
  color: var(--accent);
  font-weight: 600;
}

/* ---- controls ------------------------------------------------------------ */
.pr-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}
.pr-buttons[hidden] { display: none; }

.pr-button {
  font: inherit;
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  min-height: 2.75rem;
  padding: 0 var(--la-space-3);
  cursor: pointer;
}
.pr-button:hover { border-color: var(--accent); color: var(--accent); }
.pr-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pr-proof {
  margin-top: var(--la-space-4);
  padding-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

/* ---- the prose ----------------------------------------------------------- */
.pr-why { margin-top: var(--la-space-5); }
.pr-why h2 {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-lg);
  font-weight: 600;
}
.pr-why p { margin-top: var(--la-space-2); }

/* The paper's own words, set apart so it is obvious which sentences are being
   quoted and which are this page's argument about them.

   Marked by the rule and the indent alone, with no background of its own. It
   had one, var(--la-raised), which works over the page but is the EXACT colour
   the ledger's <details> already paints, so the copy inside the ledger was
   painting raised on raised and drawing nothing at all. One rule cannot carry a
   background that reads on two different surfaces, and a quotation does not
   need one. Caught by la-paints-audit comparing the two colours; both are
   rgb(16, 19, 21), which is not something reading the stylesheet would show. */
.pr-quote {
  margin-top: var(--la-space-3);
  padding: var(--la-space-1) 0 var(--la-space-1) var(--la-space-3);
  border-left: 2px solid var(--accent);
}
.pr-quote p {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink);
}
.pr-quote p + p { margin-top: var(--la-space-2); }

@media (max-width: 30rem) {
  .pr-rank { grid-template-columns: 1.25rem 1fr auto; }
  .pr-sharerow { font-size: 0.6rem; }
}