/* A public scientific record, styled like one. Plain ground, plain ink, two
   faces: Geist for language, JetBrains Mono for anything machine-shaped
   (counts, hashes, dates, identifiers, metadata). No cards, shadows or hover
   theatre. The same faces and colours as teal-sea.com, so the front door and
   the record read as one document.

   ONE TYPE SCALE. Five sizes, and every rule below draws from them. The last
   version of this file promised four steps in its header and used nine in its
   body, one per session that touched it; this one is the consolidation.

     --xl   2.25rem   the one headline, and the figures in the vitals block
     --l    1.375rem  section headings
     --m    1.0625rem body: prose, claims, table cells, ladder, documents
     --s    .875rem   everything set in mono: masthead, metadata, labels,
                      receipts, captions, section numbers, footer, nav
     --code .9375rem  inline code, which sits inside body text and needs to be
                      a hair smaller than it to look the same size

   Two rules that follow from it. SIZE marks a section: h1 and h2 are the only
   things larger than the body. WEIGHT marks a sub-item: h3, result names,
   ladder names and entry titles sit at body size in bold. Nothing is set in
   lowercase by CSS; headings read as written. Nothing on the page is below
   --s, and the metadata grey is dark enough to read beside the prose. */
:root{
  --paper:#fbf9f9; --ink:#1b1c1c; --ink2:#2c2d2d; --soft:#6f7979; --faint:#8a9393;
  --rule:#1b1c1c; --hair:#bec9c8; --track:#efeded;
  --link:#1b1c1c; --seen:#1b1c1c;
  --mark:#0f6b68;

  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:var(--sans);

  --xl:2.25rem; --l:1.375rem; --m:1.0625rem; --s:.875rem; --code:.9375rem;
  --measure:68ch;
}

/* Two states, not three. The page loads light; dark is the reader's explicit
   choice, remembered. */
:root[data-theme="dark"]{
  --paper:#000; --ink:#f2f2f2; --ink2:#e0e0e0; --soft:#9a9a9a; --faint:#757575;
  --rule:#f2f2f2; --hair:#2a2a2a; --track:#1a1a1a;
  --link:#f2f2f2; --seen:#f2f2f2; --mark:#5fb8b2;
}

/* The system setting governs. teal-sea.com honours it and this page did
   not, so the two disagreed whenever a reader crossed between them:
   localStorage is per-origin, so no choice made on one is visible to the
   other. Same variables as above, applied from the media query instead. */
@media (prefers-color-scheme: dark){
  :root{
  --paper:#000; --ink:#f2f2f2; --ink2:#e0e0e0; --soft:#9a9a9a; --faint:#757575;
  --rule:#f2f2f2; --hair:#2a2a2a; --track:#1a1a1a;
  --link:#f2f2f2; --seen:#f2f2f2; --mark:#5fb8b2;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:var(--m)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.page{max-width:52rem;margin:0 auto;padding:0 1.1rem 3.5rem}

/* Prose is capped in ch, the font's own unit, so the line length holds at any
   reader font size. Tables, figures and code are not capped: they need width. */
p,.stand,.entry p,.result .claim,.doc p,.doc li,.doc blockquote{max-width:var(--measure)}
a{color:var(--link)}
a:visited{color:var(--seen)}

/* ---- masthead ---------------------------------------------------------- */
.mast{padding:1.1rem 0 .4rem;font-family:var(--mono);font-size:var(--s);
  color:var(--soft);line-height:1.6}
.mast .who{color:var(--ink);display:block}
.mast b{font-weight:400;color:var(--ink2)}

/* ---- headings ---------------------------------------------------------- */
h1{font-size:var(--xl);font-weight:500;line-height:1.15;
  margin:1.2rem 0 .7rem;letter-spacing:-.02em;max-width:var(--measure)}
.stand{font-size:var(--m);line-height:1.6;color:var(--ink);margin:0 0 1.1rem}

section{margin-top:2.25rem;border-top:1px solid var(--hair);padding-top:1.1rem}
h2{font-size:var(--l);font-weight:500;margin:0 0 .8rem;
  letter-spacing:-.015em;color:var(--ink);line-height:1.25}
/* The section number is a real grid cell beside the title, so it cannot drift
   off the left edge at large reader sizes. It is metadata and is sized as
   metadata; raised so its digits top out level with the title's ascenders. */
h2:has(.num){display:grid;grid-template-columns:max-content 1fr;gap:0 .5rem;
  align-items:baseline}
h2 .num{font-family:var(--mono);font-size:var(--s);color:var(--mark);font-weight:500;
  font-variant-numeric:tabular-nums;position:relative;
  top:calc((var(--l) - var(--s)) * -0.662)}
h3{font-size:var(--m);font-weight:700;color:var(--ink);margin:1.6rem 0 .5rem}

/* ---- body ---------------------------------------------------------------- */
p{margin:0 0 .85rem}
.meta,p.meta{font-family:var(--mono);font-size:var(--s);color:var(--soft);
  font-variant-numeric:tabular-nums;line-height:1.6}
/* A repository path is one unbreakable token, and the library is built out of
   them: the link `hunts/lambda_dh_bounds/attack_adversary1_normalised.md` is
   547px and a description reading `tests/test_hunt_probe_discipline.py::
   test_no_hunt_probes_without_a_ledger` is 580px. Either one is wider than a
   390px phone, and one is enough. The text overflows its box without widening
   it, so the document scrolls sideways to 594px while every element still
   measures 375. The column then sits to the left and the rest of each screen
   below reads as blank, which is what the library looked like on a phone.
   Breaking inside these tokens costs nothing: they are paths, not sentences.
   Both halves are needed. The links alone left the descriptions overflowing,
   which is how this shipped once already. */
.meta a,.entry p{overflow-wrap:anywhere}
code{font-family:var(--mono);font-size:var(--code);font-weight:400}
strong{font-weight:700}
.statement{margin:1rem 0;padding-left:1rem;border-left:2px solid var(--hair)}
hr{border:none;border-top:1px solid var(--hair);margin:1.5rem 0;height:0}

/* ---- vitals: the figures that are the claim of the page ------------------ */
table.vitals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem 3.5rem;width:fit-content;max-width:100%;margin:1.4rem 0;
  align-items:start;font-variant-numeric:tabular-nums}
table.vitals tbody{display:contents}
table.vitals tr{display:flex;flex-direction:column;align-items:center;
  border-top:1px solid var(--hair);padding-top:.55rem;text-align:center}
table.vitals td{display:block;border:none;padding:0;color:var(--ink)}
table.vitals td.n{font-size:var(--xl);font-weight:500;line-height:1.1;
  letter-spacing:-.015em;text-align:center}
table.vitals td.k{font-family:var(--mono);font-size:var(--s);letter-spacing:.02em;
  color:var(--soft);margin-top:.15rem}
table.vitals tr.zero td.n{color:var(--mark)}

/* ---- tables: plain, ruled --------------------------------------------- */
.wrap{overflow-x:auto;margin:0 0 1.1rem}
table{width:100%;border-collapse:collapse;font-size:var(--m);
  font-variant-numeric:tabular-nums;text-align:left}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:var(--s);
  color:var(--soft);padding-bottom:.45rem}
th{text-align:left;font-weight:700;color:var(--ink);padding:0 1rem .3rem 0;
  border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:.32rem 1rem .32rem 0;border-bottom:1px solid var(--hair);
  vertical-align:top;color:var(--ink)}
th.r,td.r{text-align:right}
td.nw{white-space:nowrap}
td.mono{font-family:var(--mono);font-size:var(--s)}
th:last-child,td:last-child{padding-right:0}
td.note{font-size:var(--m);min-width:12rem}
.barcell{width:5rem}
.bar{display:block;height:5px;background:var(--track);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);display:block}

/* ---- certainty ladder ---------------------------------------------------- */
.rung{display:grid;grid-template-columns:2.2rem 1fr;gap:0 .8rem;
  padding:.55rem 0;border-bottom:1px solid var(--hair)}
.rung:last-child{border-bottom:none}
.rung .lvl{font-family:var(--mono);font-size:var(--s);color:var(--soft);
  font-variant-numeric:tabular-nums}
.rung .nm{font-size:var(--m);font-weight:700;color:var(--ink)}
.rung .ds{font-size:var(--m);color:var(--ink);line-height:1.5;margin-top:.15rem}
.rung .st{font-family:var(--mono);font-size:var(--s);color:var(--soft);
  margin-top:.25rem;display:block}
.rung.off .nm,.rung.off .ds,.rung.off .st{color:var(--faint)}

/* ---- entries: a definition list in all but name -------------------------- */
.entry{padding:.55rem 0;border-bottom:1px solid var(--hair)}
.entry:last-of-type{border-bottom:none}
.entry .when{font-family:var(--mono);font-size:var(--s);color:var(--soft);
  font-variant-numeric:tabular-nums}
.entry h4{font-size:var(--m);font-weight:700;margin:.1rem 0 .15rem}
.entry p{margin:.15rem 0 0;font-size:var(--m)}
.entry .meta{margin-top:.2rem}

/* ---- results: each a claim with its receipt ------------------------------ */
.result{padding:1.4rem 0;border-bottom:1px solid var(--hair)}
.result:last-of-type{border-bottom:none}
.result .rname{margin:0 0 .4rem;font-size:var(--m);font-weight:700;line-height:1.3;
  color:var(--ink)}
.result .rn{font-family:var(--mono);font-size:var(--s);color:var(--mark);
  font-variant-numeric:tabular-nums;margin-right:.4rem;font-weight:500}
.result .claim{margin:0;font-size:var(--m);line-height:1.6;color:var(--ink)}
.result .receipt{margin:.55rem 0 0;font-family:var(--mono);font-size:var(--s);
  color:var(--soft)}

.pill{font-family:var(--mono);font-size:var(--s);color:var(--soft);white-space:nowrap}
.pill.fail{color:#a33}

/* ---- the sequence table on the front page ------------------------------- */
table.sequence td.who{min-width:11rem}
table.sequence td.pct{font-family:var(--mono);font-size:var(--s);white-space:nowrap}
table.sequence tr.ours td{color:var(--ink)}
table.sequence tr.ours td.pct{color:var(--mark)}

/* ---- footer nav ----------------------------------------------------------- */
/* Ten links, laid out as a grid so the shape is chosen rather than left to
   wherever the text happens to run out of room. Inline, it broke after the
   ninth at every desktop width and left `linkedin` on a line of its own.
   Ten columns across a wide screen, five and five below 48rem. If an
   eleventh link is ever added, both counts want revisiting; a test asserts
   the number so that is a decision and not a surprise. */
nav.foot{margin-top:3.2rem;padding-top:1rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:var(--s);letter-spacing:.03em;color:var(--soft);
  display:grid;grid-template-columns:repeat(10,max-content);
  justify-content:space-between;column-gap:.6rem;row-gap:.6rem}
nav.foot .themetoggle{font:inherit;color:var(--link);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline}
nav.foot .themetoggle:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

/* ---- a document, rendered here rather than on a code host --------------- */
.crumb{font-family:var(--mono);font-size:var(--s);color:var(--soft);margin:.9rem 0 .3rem}
.doc{margin-top:1.2rem;font-size:var(--m);line-height:1.6}
.doc h2{font-size:var(--l);margin:1.9rem 0 .6rem;border-bottom:1px solid var(--hair);
  padding-bottom:.25rem;font-weight:500}
.doc h3{font-size:var(--m);margin:1.5rem 0 .4rem;font-weight:700}
.doc h4,.doc h5,.doc h6{font-size:var(--m);font-weight:700;margin:1.2rem 0 .35rem}
.doc p{margin:0 0 .85rem}
.doc ul,.doc ol{margin:0 0 .85rem;padding-left:1.4rem}
.doc li{margin:.15rem 0}
.doc pre{background:var(--track);padding:.6rem .7rem;overflow-x:auto;
  margin:0 0 .9rem;font-size:var(--s);line-height:1.5;font-family:var(--mono)}
.doc pre code{font-size:inherit}
.doc blockquote{margin:0 0 .9rem;padding-left:1rem;border-left:2px solid var(--hair)}
.doc blockquote p:last-child{margin-bottom:0}
.doc hr{margin:1.6rem 0}
.doc table{font-size:var(--s)}
/* A citation URL is text a reader can copy, not a link this page follows. */
.doc .url{font-family:var(--mono);font-size:var(--s);color:var(--soft);word-break:break-all}

/* ---- the chrome the front door wears, carried onto the record ----------- */
.topnav{border-bottom:1px solid var(--hair);position:sticky;top:0;
  background:var(--paper);z-index:5}
.topnav-in{max-width:80rem;margin:0 auto;padding:.9rem clamp(1.15rem,4vw,2.5rem);
  display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
/* The wordmark is the front door's, at the front door's size: the one value
   on this page not drawn from the scale, because it is not this page's. */
.wordmark{font-weight:500;font-size:1.25rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;margin-right:auto}
.wordmark .slash,.slash{color:var(--mark)}
.sections{display:flex;gap:1.6rem;font-family:var(--mono);font-size:var(--s);
  letter-spacing:.03em}
.sections a{color:var(--soft);text-decoration:none;padding-bottom:2px}
.sections a:hover{color:var(--ink)}
.sections a[aria-current]{color:var(--ink);border-bottom:1px solid var(--mark)}
.topnav .themetoggle{font-family:var(--mono);font-size:var(--s);letter-spacing:.03em;
  color:var(--soft);background:none;border:0;padding:0;cursor:pointer}
.topnav .themetoggle:hover{color:var(--ink)}
.topnav .themetoggle:focus-visible,.sections a:focus-visible,.wordmark:focus-visible{
  outline:2px solid var(--mark);outline-offset:3px}

/* ---- small screens ------------------------------------------------------ */
@media (max-width:40rem){
  :root{--xl:1.875rem;--l:1.25rem;--m:1rem}
  .page{padding:0 .9rem 3rem}
  .sections{gap:1.1rem}
  .topnav{position:static}
  .topnav-in{gap:.55rem 1.1rem}
  .wordmark{flex:0 0 100%;margin-right:0}
  .sections{flex:1 1 auto}
  .topnav .themetoggle,.themetoggle{margin-left:auto}
  table.vitals{gap:1.2rem 2rem}
}

@media (max-width:48rem){
  nav.foot{grid-template-columns:repeat(5,1fr);justify-content:start}
}

/* Five columns need 329px of link and gap, so at 320px they overflowed the
   column by 39px and gave the page a sideways scroll: the same fault the
   library had, introduced by the fix for the ragged wrap. Ten divides by two
   as well, so the narrowest phones get two columns and five rows.

   22.4rem, not 22.5rem. The column is the viewport less 29px of padding, so
   five columns fit from 358px up, and 360px is the width of a great many
   Android phones. Half a rem higher and every one of them took the tall
   layout it did not need. */
@media (max-width:22.4rem){
  nav.foot{grid-template-columns:repeat(2,1fr)}
}

/* ---- print ----------------------------------------------------------------- */
@media print{
  :root{--paper:#fff; --ink:#000; --ink2:#000; --soft:#333; --faint:#555;
        --rule:#000; --hair:#bbb; --track:#eee; --link:#000; --seen:#000; --mark:#000;}
  body{font-size:11pt}
  .page{max-width:none;padding:0}
  .doc a[href^="http"]::after,
  .result a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#333}
  nav.foot,.topnav{display:none}
  h1,h2,h3{break-after:avoid}
  .result,.rung,.entry,table,figure{break-inside:avoid}
  .wrap{overflow-x:visible}
}