/* ============================================================
   The site's pages on top of the kpress design system.

   The design system is written down in paper-design.md beside this file: colour,
   typography, the math-face rule, cards, chips and tables. This stylesheet implements
   its site layer for the overview, the frontier atlas and the tutorial, and the
   navigation bar every page carries. Change the document first, then this file.
   Every value is a kpress token or derived from one, so the additions follow the theme
   and the print rules.
   ============================================================ */

/* A standalone page scrolls the document, as the explainer does. */
html,
body {
  height: auto;
  overflow: visible;
}
.kpress-page-main.kpress-viewport {
  block-size: auto;
  overflow: visible;
}

/* One accent, everywhere: the explainer's rule, redeclared where kpress sets the link. */
:root,
.kpress,
.kpress-page-main,
.kpress-tooltip,
:is(.kpress, .kpress-page-main, .kpress-tooltip)[data-kpress-resolved-theme],
:is(.kpress, .kpress-page-main, .kpress-tooltip)[data-kpress-palette][data-kpress-resolved-theme],
body {
  --kpress-doc-link: var(--kpress-doc-accent);
  --color-primary-light: var(--kpress-doc-accent);
}
/* The rung scale: a fill's lightness and chroma at level 0, and what one level adds to
   each. Chips are light fills carrying the page's own text colour: level 0 sits close to
   the page background, nearly neutral, and each level is darker and more saturated;
   dark mode turns the lightness over (below). `devtools.rung_scale` measures every fill
   these make and its text contrast (paper-design.md, Color). */
:root {
  --site-rung-base: 95%;
  --site-rung-step: -5.5%;
  --site-rung-chroma-base: 0.015;
  --site-rung-chroma-step: 0.024;
}
/* The site's own colours, each a token, so that a colour is tried and changed in one
   place (`devtools.check_colour_tokens` refuses a rule that names one of its own;
   paper-design.md, Color). Significance's ink is a dark teal between the confirmation
   green and the verification blue, darker and bluer than the accent so that it never
   reads as a link, and light in dark mode (below): the colour of significance wherever
   the site shows one (`overview_sections.significance_mark`; the owner, 2026-10-03,
   `think-m3m4`), which `devtools.rung_scale` measures against the page in both themes.
   The new-result star is the one warm mark. A popover's backdrop dims the page with a
   scrim. A mix of the page's own colours keeps its mix in the rule that paints with it,
   since a token resolves where it is declared and the dark theme's page colours are set
   below the root; its ratio is the token: a plain chip's tint of the muted gray, and how
   much accent a pressed action keeps. Both blocks stand before the dark theme's values,
   which share their specificity on the root, so the dark ones win there as they do
   below it (`think-uer5`). */
:root {
  --site-significance: oklch(42% 0.07 205);
  --site-new-result: oklch(52% 0.19 25);
  --site-scrim: oklch(0% 0 0 / 0.12);
  --site-chip-tint: 16%;
  --site-action-hover-accent: 85%;
}
:root:where([data-kpress-resolved-theme="dark"]),
:where([data-kpress-resolved-theme="dark"]) :is(.kpress, .kpress-page-main, .kpress-tooltip),
:is(.kpress, .kpress-page-main, .kpress-tooltip)[data-kpress-resolved-theme="dark"] {
  /* The accent's dark value is in site-nav.css, which every page carries, the workbench
     included. Chips turn over with the page: dark fills that lighten and saturate with
     the level, the lowest close to the page's own dark background. */
  --site-rung-base: 25%;
  --site-rung-step: 4.6%;
  --site-rung-chroma-base: 0.012;
  --site-rung-chroma-step: 0.019;
  --site-significance: oklch(80% 0.085 205);
  --site-new-result: oklch(66% 0.17 25);
  --site-hero-filter: brightness(0.88);
}

/* The paper typography profile, read from paper-type.css, which the explainer carries
   too: the type base and measure, a 19/18 sans base against the prose, and three sans
   weights. */
:root {
  --site-font-scale-sans: var(--paper-font-scale-sans);
  --site-font-weight-sans-light: var(--kpress-font-weight-sans-regular);
  --site-font-weight-sans-medium: var(--paper-font-weight-sans-medium);
  --site-font-weight-sans-bold: var(--paper-font-weight-sans-bold);
  --site-font-size-sans-base: calc(var(--kpress-font-size-base) * var(--site-font-scale-sans));
  --site-font-size-support: calc(var(--site-font-size-sans-base) * var(--paper-support-scale));
  --site-font-size-note: calc(var(--site-font-size-sans-base) * var(--paper-note-scale));
  /* A table's filter bar, its controls and their labels: a step under the table's own
     text, so the bar reads as the table's tools and not as its content. */
  --site-font-size-control: calc(var(--site-font-size-sans-base) * 0.8);
  --site-support-color: var(--kpress-doc-muted);
  --site-wide: calc(var(--kpress-measure) + 24rem);
  /* How far a block may bleed past the wide track (the atlas grid, and a data table
     above `--site-table-bleed-from`): paper-design.md, Wide bleed. */
  --site-bleed-max: 140rem;
  --site-table-bleed-from: 80rem;
  /* A table stops at 100rem, short of the atlas's cap: past it, its columns only spread
     apart and a row gets harder to follow. */
  --site-table-max: 100rem;
  /* The tables of results hold eight columns since 2026-10-04 (`think-46fw`; nine from
     2026-10-03, `think-m3m4`), and on a very wide window they bleed further than the
     other tables (`think-bcmc`); at 1280 pixels and below they are as wide as before. */
  --site-results-table-max: 112rem;
  /* The space above and below every table, on screen: a site table with its filter bar,
     and a document's own table (paper-design.md, Tables). */
  --site-table-space: 2rem;
  /* The measure a long list of cases wraps in, in the n column of a table of results: a
     result about five values or more sets them in the line, this many digits to a line
     (paper-design.md, Tables). */
  --site-cases-measure: 24ch;
  /* The least space between a wide block and the edge of the page's content area, inside
     the page's margin: a table and its filter bar, a row of cards, the atlas grid. It is
     KPress's own document gutter, so a wide block with no room to spare is as wide as
     the text, and it is measured from the page, never from the window (below). */
  --site-wide-gutter: 0.5rem;
  /* The space under a page's title: to its subtitle and from the subtitle to the first
     paragraph, or straight to the first paragraph of a page that has no subtitle. */
  --site-subtitle-space: 1.5rem;
  --site-subtitle-scale: 1.1;
  /* How much nearer the bar a page's opening picture sits than a title would: a drawing
     has no line spacing above its edge, so the same space reads larger. */
  --site-hero-lift: 0.5rem;
}
.site-page a,
.kpress-tooltip a {
  color: var(--kpress-doc-accent);
  text-decoration: none;
}
.site-page a:hover {
  text-decoration: underline;
}
.site-page h2 {
  text-align: center;
  margin-block: var(--paper-section-space) var(--paper-section-space-below);
}

/* ---------- Page body ---------- */
/* Capped at 100% as kpress caps its column: beside a TOC the column is a grid item with
   auto margins, sized to its min-content, so a wide code block or table would otherwise
   push it past a phone's viewport instead of scrolling inside it. The text fills the
   column, as the explainer's does: its lines run the measure plus both insets, 800px at
   a desktop, and on a phone the page margin alone keeps them off the screen's edge. */
.site-page {
  margin-inline: auto;
  max-width: min(100%, calc(var(--kpress-measure) + 2 * var(--kpress-column-inset)));
  padding-block-end: calc(var(--kpress-font-size-base) * 5);
  padding-inline: 0;
}
/* Wide blocks (tables, the atlas figure, card grids) take a wider track than prose, and
   stop `--site-wide-gutter` short of the page's content area on either side. That area
   is KPress's page container less its margin, `100cqw`: the width the page is laid out
   in. `100vw` is not, since it counts a scrollbar the layout does not, and a narrow page
   clips at the document's edge, so a block sized from the window ran under the clip and
   lost its first and last few pixels. */
.site-page .site-wide {
  --site-wide-room: calc(100cqw - 2 * var(--site-wide-gutter));
  margin-inline: calc((min(var(--site-wide), var(--site-wide-room)) - 100%) / -2);
  max-width: min(var(--site-wide), var(--site-wide-room));
}
/* A data table's wide track bleeds as the atlas grid does, but only above
   `--site-table-bleed-from`: there it is exactly the wide track above, and past it the
   table grows a pixel for each pixel of window, to the gutters or `--site-table-max`.
   Any `.site-wide` that is or holds a table wrap takes it, so a new table needs no rule. */
.site-page .site-wide:is(.site-table-wrap, :has(> .site-table-wrap)) {
  --site-table-grow: max(0px, 100vw - var(--site-table-bleed-from));
  --site-table-wide: min(
    var(--site-table-max),
    var(--site-wide-room),
    calc(var(--site-wide) + var(--site-table-grow))
  );
  margin-inline: calc((var(--site-table-wide) - 100%) / -2);
  max-width: var(--site-table-wide);
}
/* The tables of results hold eight columns since 2026-10-04, when the Details column
   moved into the row's popover (`think-46fw`; nine from 2026-10-03, `think-m3m4`):
   1095.5 pixels at their floors where every row shows, 1198 with nine. They bleed from
   74rem (1184 pixels), as they did when nine columns outran the wide track's 1104, fit
   from about 1176, and are 1200 pixels wide at 1280, as wide as the frontier table
   there, with 104.5 to spare, which the long list of cases takes; narrower, they scroll
   in their wrap, as any table does where its floors outrun the window. */
.site-page .site-wide:has(> .site-table-wrap .site-results) {
  --site-table-bleed-from: 74rem;
  --site-table-max: var(--site-results-table-max);
}
.site-hero {
  text-align: center;
}
/* A block for a screen reader alone, such as the title of a page that shows none (the
   Visualize page, which its section tabs name): out of the flow, one pixel, clipped. */
.site-visually-hidden {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
/* A page's first block starts `--site-page-top` below the bar's rule (site-nav.css): the
   column's own top padding is that token, and its first block, a hero or a document's
   title, brings no margin of its own. */
@media screen {
  .kpress-page-main > .kpress-doc > .kpress-doc-layout > .kpress-long-text {
    padding-block-start: var(--site-page-top);
  }
  .kpress-long-text > :first-child,
  .kpress-long-text > :first-child > .site-hero:first-child,
  .site-hero:first-child > :first-child {
    margin-block-start: 0;
  }
}
/* The page title: the sans face in upright caps (never KPress's italic h2) at 1.5 times
   the sans base, centred. A page's `h1` in its hero takes it, and so does any heading
   given `site-title` (the homepage, which has no `h1`, sets its first section this way). */
.site-hero h1,
.kpress .site-title {
  font-family: var(--kpress-font-sans);
  font-size: calc(var(--site-font-size-sans-base) * var(--paper-title-scale));
  font-style: normal;
  font-weight: var(--site-font-weight-sans-medium);
  letter-spacing: var(--kpress-caps-spacing);
  text-align: center;
  text-transform: var(--kpress-caps-transform);
}
/* A page's subtitle, such as "A survey of all reviewed results": the sans face a small
   step above the base (`--site-subtitle-scale`), in the page's own text colour, with
   the same space above it (from the title) as below it (to the first paragraph). A
   formula in one is sans math, as its text is. */
.kpress .site-hero .subtitle {
  color: var(--kpress-doc-text);
  font-family: var(--kpress-font-sans);
  font-size: calc(var(--site-font-size-sans-base) * var(--site-subtitle-scale));
  font-weight: var(--site-font-weight-sans-light);
  line-height: var(--paper-heading-leading);
  margin-block: var(--site-subtitle-space);
}
/* A title with no subtitle, a document's own `h1` among them, stands the same space
   above its first paragraph, on screen. */
@media screen {
  .site-page h1 {
    margin-block-end: var(--site-subtitle-space);
  }
}
.kpress .site-hero:has(.subtitle) h1 {
  margin-block-end: 0;
}
/* The closing credit: two quiet centred lines (`render_overview.colophon_lines`), whose
   line and part rules are in site-nav.css, which the papers carry too. */
.site-colophon {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: calc(var(--site-font-size-sans-base) * var(--paper-colophon-scale));
  font-weight: var(--site-font-weight-sans-light);
  margin-block-start: 3rem;
  text-align: center;
}

/* ---------- Cards ---------- */
/* A card section is a frame the width of the wide track holding the cards, so the cards
   can ask how wide their frame is. A card comes in three sizes, which it names in
   `data-card-size`, and is as wide as a column of the grid of its size's columns the
   frame fits, with 1rem gaps: small columns are at least 12rem, medium 16rem and large
   21rem, so a 69rem frame holds four small or four medium cards to a line, or three large; no size sets
   more than four to a line (the owner, 2026-10-05).
   `--site-cards-small`, `-medium` and `-large` are those counts, each stepped by its own
   container queries: n columns of minimum m and n - 1 gaps need (m + 1)n - 1 rem. A card
   that names no size is medium. On screen the cards are one wrapping row that centres
   every line it does not fill, a short section and the last line of a long one alike;
   a section set in lines of its own is one such row per line.
   Print keeps the plain grid of medium columns, filled from the left. A card's popover
   is its sibling but never in the row: closed it is not displayed, and open it is in the
   top layer. */
.site-cards-frame {
  container-type: inline-size;
  margin-block: 1.5rem;
}
.site-cards {
  --site-card-gap: 1rem;
  --site-cards-small: 1;
  --site-cards-medium: 1;
  --site-cards-large: 1;
  display: grid;
  gap: var(--site-card-gap);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
/* Each line of a section set in lines of its own is a row of its cards, a gap below the
   line before it. */
.site-cards + .site-cards {
  margin-block-start: var(--site-card-gap);
}
@container (width >= 25rem) {
  .site-cards {
    --site-cards-small: 2;
  }
}
@container (width >= 33rem) {
  .site-cards {
    --site-cards-medium: 2;
  }
}
@container (width >= 38rem) {
  .site-cards {
    --site-cards-small: 3;
  }
}
@container (width >= 43rem) {
  .site-cards {
    --site-cards-large: 2;
  }
}
@container (width >= 50rem) {
  .site-cards {
    --site-cards-medium: 3;
  }
}
@container (width >= 51rem) {
  .site-cards {
    --site-cards-small: 4;
  }
}
@container (width >= 65rem) {
  .site-cards {
    --site-cards-large: 3;
  }
}
@container (width >= 67rem) {
  .site-cards {
    --site-cards-medium: 4;
  }
}
@container (width >= 87rem) {
  .site-cards {
    --site-cards-large: 4;
  }
}
@media screen {
  .site-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-cards > .site-card {
    --site-cards-line: var(--site-cards-medium);
    --site-cards-gaps: calc((var(--site-cards-line) - 1) * var(--site-card-gap));
    flex: 0 0 calc((100% - var(--site-cards-gaps)) / var(--site-cards-line));
    min-inline-size: 0;
  }
  .site-cards > .site-card[data-card-size="small"] {
    --site-cards-line: var(--site-cards-small);
  }
  .site-cards > .site-card[data-card-size="large"] {
    --site-cards-line: var(--site-cards-large);
  }
  /* A section set in lines of its own (`SECTION_CARD_LINES`) sets no more cards to a
     line than its longest line holds, so its lines share one column width: the page
     cards stand one, three and two, at the width of three to a line, the three papers
     of the n = 11 series on the line of three. */
  .site-cards[data-cards-most="3"] > .site-card {
    --site-cards-line: min(var(--site-cards-medium), 3);
  }
}
/* A card is a clean summary with square corners. Most cards are a button that opens a
   popover previewing where it leads, which ends in the one button that goes there; a
   direct card is the link itself and opens its target in a new tab. A
   card gets a gentle wash on hover, and a gray icon in its corner, repeated on the
   popover's button, says where that is: a down arrow scrolls to a row on this page, a
   diagonal arrow leaves the site, and a right arrow opens another page of it. The rule
   is in paper-design.md. */
.kpress .site-card {
  --site-card-pad-block: 0.9rem;
  --site-card-pad-start: 1rem;
  --site-card-pad-end: 1rem;
  border: 1px solid var(--kpress-doc-border);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--site-card-pad-block) var(--site-card-pad-end) var(--site-card-pad-block)
    var(--site-card-pad-start);
}
.kpress :is(a, button).site-card {
  --site-card-pad-end: 2.2rem;
  color: inherit;
  position: relative;
  text-decoration: none;
  transition: var(--site-hover-transition);
}
.kpress button.site-card {
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: start;
  width: 100%;
}
.kpress :is(a, button).site-card:hover,
.kpress :is(a, button).site-card:focus-visible {
  background: var(--site-wash);
}
/* A card with a foot (`link_card(foot=)`): a box holding the card's link and then a
   closing line with links of its own, a project's tally of results, since a link cannot
   hold a link. The box is the card: it takes the border and the size, and washes and
   shows its corner icon while its link is hovered or focused, as a card that is itself
   the link does. The link carries the card's padding; the foot stands at the card's
   lower edge, so the tallies of a row line up whatever the notes above them run to. */
.kpress div.site-card.site-card-footed {
  --site-card-pad-end: 2.2rem;
  gap: 0;
  padding: 0;
  position: relative;
  transition: var(--site-hover-transition);
}
.kpress .site-card-footed > .site-card-main {
  color: inherit;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--site-card-pad-block) var(--site-card-pad-end) 0.5rem var(--site-card-pad-start);
  text-decoration: none;
}
.kpress .site-card-footed:has(> .site-card-main:is(:hover, :focus-visible)) {
  background: var(--site-wash);
}
.kpress div.site-card.site-card-footed::after {
  color: var(--kpress-doc-muted);
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--site-hover-duration) var(--site-hover-easing);
}
.kpress .site-card-footed:has(> .site-card-main:is(:hover, :focus-visible))::after {
  opacity: 1;
}
.kpress .site-card-footed > .site-card-foot {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  line-height: 1.4;
  margin: 0;
  padding: 0 1rem var(--site-card-pad-block) var(--site-card-pad-start);
}

/* ---------- Arrows ----------
   Every arrow on the site is this one drawing, never a typed character: the text face
   has no glyphs for most arrows, and each browser drew them from a different fallback
   font (paper-design.md, Arrows). A shaft and an open head in a 16-unit box, stroke 1.6
   with round caps and joins, painted as a mask over the text colour. Each direction is
   the drawing turned: right as drawn, left mirrored, down and up a quarter turn,
   external an eighth turn back. The two other shapes are the sort pair and the double
   chevron: the arrow's open head twice, one over the other, in the same box and stroke,
   pointing down as drawn (double-down) and up turned half round (double-up), which the
   atlas's expander carries. Inline markup is `overview_sections.arrow_icon`; the rest
   are the pseudo-elements named here. */
:root {
  --site-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
  --site-arrow-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13.5v-11M2 5.5l3-3 3 3M11 2.5v11M8 10.5l3 3 3-3'/%3E%3C/svg%3E");
  --site-arrow-double: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3 8 7.5 12.5 3M3.5 8 8 12.5 12.5 8'/%3E%3C/svg%3E");
}
/* Kept at low specificity, so each place an arrow sits can place and time it. */
.site-icon-arrow,
.kpress
  :where(.site-card, .site-popover-action):where(
    [data-go="scroll"],
    [data-go="external"],
    [data-go="page"]
  )::after,
:where(.site-table th[data-sort])::after {
  --site-arrow-turn: 0deg;
  --site-arrow-flip: 1;
  --site-arrow-nudge: 2px 0;
  background-color: currentColor;
  block-size: 1em;
  display: inline-block;
  flex: none;
  inline-size: 1em;
  margin-inline-start: 0.3em;
  mask: var(--site-arrow) center / contain no-repeat;
  rotate: var(--site-arrow-turn);
  scale: var(--site-arrow-flip) 1;
  transition: translate var(--site-hover-duration) var(--site-hover-easing);
  vertical-align: -0.125em;
}
.kpress
  :where(.site-card, .site-popover-action):where(
    [data-go="scroll"],
    [data-go="external"],
    [data-go="page"]
  )::after,
:where(.site-table th[data-sort])::after {
  content: "";
}
.site-icon-arrow[data-arrow="left"] {
  --site-arrow-flip: -1;
  --site-arrow-nudge: -2px 0;
  margin-inline: 0 0.3em;
}
.site-icon-arrow[data-arrow="down"],
.kpress :is(.site-card, .site-popover-action)[data-go="scroll"]::after {
  --site-arrow-turn: 90deg;
  --site-arrow-nudge: 0 2px;
}
.site-icon-arrow[data-arrow="up"] {
  --site-arrow-turn: -90deg;
  --site-arrow-nudge: 0 -2px;
}
.site-icon-arrow[data-arrow="external"],
.kpress :is(.site-card, .site-popover-action)[data-go="external"]::after {
  --site-arrow-turn: -45deg;
  --site-arrow-nudge: 1.5px -1.5px;
}
.site-icon-arrow[data-arrow="double-down"],
.site-icon-arrow[data-arrow="double-up"] {
  --site-arrow-nudge: 0 2px;
  mask-image: var(--site-arrow-double);
}
.site-icon-arrow[data-arrow="double-up"] {
  --site-arrow-turn: 180deg;
  --site-arrow-nudge: 0 -2px;
}
/* The one hover: an arrow in a link or button moves a little the way it points and keeps
   the element's colour. A disabled button's arrow stays still; a card's corner icon fades
   in with the card instead (below); reduced motion moves nothing. */
:is(a, button):not(:disabled):is(:hover, :focus-visible) .site-icon-arrow,
.kpress .site-popover-action:is(:hover, :focus-visible)::after {
  translate: var(--site-arrow-nudge);
}
@media (prefers-reduced-motion: reduce) {
  :is(a, button):not(:disabled):is(:hover, :focus-visible) .site-icon-arrow,
  .kpress .site-popover-action:is(:hover, :focus-visible)::after {
    translate: none;
  }
}

/* A card's corner icon: the site's arrow, gray, fading in with the card's wash. */
.kpress :is(a, button).site-card::after {
  color: var(--kpress-doc-muted);
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  margin: 0;
  opacity: 0;
  position: absolute;
  transition: opacity var(--site-hover-duration) var(--site-hover-easing);
}
.kpress :is(a, button).site-card:hover::after,
.kpress :is(a, button).site-card:focus-visible::after {
  opacity: 1;
}

/* A card's optional hero: a small picture heading it, edge to edge above its label, in
   a 16:9 box it covers from its top edge, so cards with pictures of any shape line up
   in a row. A hairline parts it from the text. Dark mode dims it a little, since the
   pictures are prints on white. The corner icon sits over the picture on a chip of the
   page's background, so it reads on any image. The rule is in paper-design.md. */
.kpress .site-card .site-card-hero {
  aspect-ratio: 16 / 9;
  background: var(--site-wash);
  border-block-end: 1px solid var(--kpress-doc-border);
  display: block;
  margin-block: calc(-1 * var(--site-card-pad-block)) 0.55rem;
  margin-inline: calc(-1 * var(--site-card-pad-start)) calc(-1 * var(--site-card-pad-end));
  overflow: hidden;
}
.kpress .site-card .site-card-hero img {
  block-size: 100%;
  display: block;
  filter: var(--site-hero-filter, none);
  inline-size: 100%;
  margin: 0;
  max-inline-size: none;
  object-fit: cover;
  object-position: top;
}
/* The chip under a hero card's icon is its own box, since the icon is a mask. */
.kpress :is(a, button).site-card:has(.site-card-hero)::after {
  inset-block-start: calc(0.5rem + 0.3em);
  inset-inline-end: calc(0.5rem + 0.3em);
}
.kpress :is(a, button).site-card:has(.site-card-hero)::before {
  background: var(--kpress-doc-bg);
  block-size: 1.6em;
  content: "";
  inline-size: 1.6em;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  opacity: 0;
  position: absolute;
  transition: opacity var(--site-hover-duration) var(--site-hover-easing);
}
.kpress :is(a, button).site-card:is(:hover, :focus-visible)::before {
  opacity: 1;
}

/* A card's popover shows where the card leads, another page framed in its embed
   view or a preview of a row here, and ends in the button that goes there: a plain sans panel with square corners over a faint scrim, closed by its
   cross, Escape, or a click outside. */
.site-popover {
  background: var(--kpress-doc-bg);
  border: 1px solid var(--kpress-doc-border);
  border-radius: 0;
  box-shadow: 0 0.5rem 2rem var(--site-shadow);
  color: var(--kpress-doc-text);
  font-family: var(--kpress-font-sans);
  font-weight: var(--site-font-weight-sans-light);
  max-block-size: var(--site-popover-max-block);
  max-width: min(36rem, 100vw - 2rem);
  overflow: auto;
  padding: var(--site-popover-pad);
}
/* Every popover's margins are one token, the same on all four sides, and its close
   button one square tap target set in from the corner. Only the first block after the
   button keeps clear of it, so the margins stay even everywhere else.

   A popover's height has one limit, the window's: it may be as tall as the window less
   one margin above and one below (`--site-popover-window-margin`, 4% of the window's
   height, never under 1rem nor over 3rem), so a taller window shows more of a long
   panel and none stops at a fixed height. It is centred, so the two margins are equal,
   and it scrolls inside. The limit is `max-block-size` alone: `max-height` is the same
   property, and whichever a rule declares later is the one that holds. */
:root {
  --site-popover-pad: 1.75rem;
  --site-popover-close: 2.75rem;
  --site-popover-close-inset: 0.6rem;
  --site-popover-window-margin: clamp(1rem, 4dvh, 3rem);
  --site-popover-max-block: calc(100dvh - 2 * var(--site-popover-window-margin));
}
/* A phone keeps the heights it had: a card's or a row's popover up to 80% of the window
   and 40rem, here; a framed page, the case popover and a result overview in their own
   rules below. */
@media (max-width: 40rem) {
  :root {
    --site-popover-pad: 1.1rem;
    --site-popover-close-inset: 0.25rem;
  }
  .site-popover {
    max-block-size: min(80vh, 40rem);
  }
}
.site-popover > .site-popover-close + * {
  padding-inline-end: calc(
    var(--site-popover-close) +
    var(--site-popover-close-inset) -
    var(--site-popover-pad)
  );
}
.site-popover::backdrop {
  background: var(--site-scrim);
}
.site-popover .site-popover-close {
  transition: var(--site-hover-transition);
  background: none;
  border: 0;
  color: var(--kpress-doc-muted);
  cursor: pointer;
  block-size: var(--site-popover-close);
  display: grid;
  font-family: var(--kpress-font-sans);
  font-size: 1.75rem;
  font-weight: var(--site-font-weight-sans-light);
  inline-size: var(--site-popover-close);
  inset-block-start: var(--site-popover-close-inset);
  inset-inline-end: var(--site-popover-close-inset);
  line-height: 1;
  place-items: center;
  position: absolute;
}
.site-popover .site-popover-close:is(:hover, :focus-visible) {
  background: var(--site-wash);
  color: var(--kpress-doc-text);
}
.site-popover .site-popover-value {
  font-size: 1.15em;
  margin-block: 0.5rem 1rem;
}
.site-popover .site-popover-links {
  font-size: var(--site-font-size-note);
  margin-block: 0.6rem 0;
}
/* A framed page takes the whole height a popover may have, and the frame the height its
   heading and buttons leave, so Expand never scrolls out of reach. */
.site-popover[data-go="page"] {
  inline-size: min(46rem, 100vw - 2rem);
  max-inline-size: none;
}
.site-popover[data-go="page"]:popover-open {
  block-size: var(--site-popover-max-block);
  display: flex;
  flex-direction: column;
  max-block-size: none;
  overflow: hidden;
}
@media (max-width: 40rem) {
  .site-popover[data-go="page"]:popover-open {
    block-size: min(88vh, 56rem);
  }
}
.site-popover[data-go="page"] > * {
  flex: none;
}
/* The target itself, framed narrow: the page shows its document alone (embed.js). */
.site-popover .site-popover-frame {
  border: 1px solid var(--kpress-doc-border);
  display: block;
  inline-size: 100%;
}
.site-popover[data-go="page"] > .site-popover-frame {
  flex: 1 1 auto;
  min-block-size: 0;
}
/* Every popover ends in its one button, centred, with any "On GitHub" link beside it. */
.site-popover .site-popover-actions {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: center;
  margin-block: 0.8rem 0;
}
.site-popover .site-popover-also {
  font-size: var(--site-font-size-note);
}
.site-popover .site-popover-preview {
  color: var(--site-support-color);
  font-size: var(--site-font-size-note);
  line-height: 1.45;
}
.site-popover .site-popover-preview :is(p, ul) {
  margin-block: 0 0.6rem;
}
.site-popover .site-popover-preview ul {
  padding-inline-start: 1.2rem;
}
.site-popover .site-popover-more {
  list-style: none;
}
/* The site's one action button, in two places: a popover's link to where it leads
   (`.site-popover-action`), and the one action under a table or grid (`.site-action`,
   in a centred `.site-action-row`): "See all results" under the recent table, a link
   with the arrow right, and the atlas's expander, a button with the double chevron down
   or up (paper-design.md, Action under a table or grid). One look for all of them: the
   accent fill, the page's background for the text, the medium sans, and the icon after
   the label at the label's own size. A <button> takes it with the browser's own border,
   face and size put back to the link's. */
.kpress :is(.site-popover a, button).site-popover-action,
.kpress :is(a, button).site-action {
  align-items: center;
  background: var(--kpress-doc-accent);
  color: var(--kpress-doc-bg);
  display: inline-flex;
  font-weight: var(--site-font-weight-sans-medium);
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  transition: var(--site-hover-transition);
}
.kpress .site-popover a.site-popover-action::after,
.kpress .site-action .site-icon-arrow {
  align-self: center;
  margin: 0;
}
.kpress button:is(.site-popover-action, .site-action) {
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--kpress-font-sans);
  font-size: inherit;
  font-weight: var(--site-font-weight-sans-medium);
  line-height: inherit;
}
.kpress :is(.site-popover a, button).site-popover-action:is(:hover, :focus-visible),
.kpress :is(a, button).site-action:is(:hover, :focus-visible) {
  background: color-mix(
    in oklch,
    var(--kpress-doc-accent) var(--site-action-hover-accent),
    var(--kpress-doc-text)
  );
  color: var(--kpress-doc-bg);
}
/* The row that holds the one action under a table or grid: centred, in the sans at the
   note size, `--site-action-space` under what it follows, and a table's own space,
   `--site-table-space`, below it, so text that follows a button stands as clear of it
   as of a table (the owner, 2026-10-02, `think-0o9u`; nothing below it until then).
   Where a heading follows, its larger space takes over, the two margins being one.
   The row is a paragraph, so the rule is scoped to the page to outrank KPress's
   `.kpress-prose p`, whose 0.75rem stood in for both margins until then. */
.kpress .site-action-row {
  --site-action-space: 1.2rem;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-medium);
  margin-block: var(--site-action-space) var(--site-table-space);
  text-align: center;
}

.kpress :is(.site-card, .site-popover, .site-case) .site-card-label {
  color: var(--kpress-doc-muted);
  font-family: var(--kpress-font-sans);
  font-size: var(--kpress-caps-label-size, 0.8rem);
  font-weight: var(--site-font-weight-sans-medium);
  letter-spacing: var(--kpress-caps-spacing);
  text-transform: var(--kpress-caps-transform);
}
/* A card's headline, and its popover's, which repeats it: the sans face at the medium
   weight, the face and weight of the page title and of the sans section headings
   (`h3`), at the headings' own leading (`--paper-heading-leading`, paper-type.css), so
   a headline of two or three lines reads as one block. A long closed form, such as a
   nested radical, scrolls inside its card rather than widening the page. */
.kpress .site-card .site-card-value,
.site-popover .site-popover-value {
  font-family: var(--kpress-font-sans);
  font-weight: var(--site-font-weight-sans-medium);
  line-height: var(--paper-heading-leading);
}
/* A formula in a headline or a heading keeps the line's leading. KPress sets an inline
   formula's box at a line of 1.4 and KaTeX its own at 1.2, either of which makes the line
   holding a formula taller than the lines around it; with no line of its own, a formula
   is as tall as KaTeX's struts, which give it the height and depth it needs. */
.site-page :is(h1, h2, h3, h4) :is(.kpress-math, .katex),
:is(.site-card-value, .site-popover-value, .site-case-title, .site-hero .subtitle)
  :is(.kpress-math, .katex) {
  line-height: 0;
}
/* The tighter leading takes the room a looser line kept around the headline, so the
   headline carries it as margin: a little above, under the label, and more below, over
   the note. */
.kpress .site-card .site-card-value {
  font-size: 1.15em;
  margin-block: 0.2rem 0.3rem;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.kpress .site-card .site-card-note {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  line-height: 1.4;
}

/* A link card's address, under its note: the host's mark in the support gray, level with
   the address's first line, then the address, which wraps after a slash (and only
   inside a name too long for a line) rather than widen the card. */
.kpress .site-card .site-card-url {
  align-items: first baseline;
  color: var(--site-support-color);
  display: flex;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  gap: 0.4rem;
  margin-block-start: 0.35rem;
  overflow-wrap: break-word;
}
.kpress .site-card .site-link-icon {
  block-size: 1em;
  flex: none;
  inline-size: 1em;
  translate: 0 0.15em;
}

/* ---------- Tables: additions to .kpress-table ---------- */
/* Every table stands `--site-table-space` clear of the text above and below it, on
   screen: the space is above a table's filter bar when it has one, which keeps its own
   small gap to the table, and below the table's wrap. A document's table, which KPress
   wraps itself, takes the same token. Print keeps KPress's own spacing. */
.site-table-tools {
  display: flex;
  flex-wrap: wrap;
  /* Every control's words share the line's baseline, so a checkbox's label, which is
     shorter than a select, reads level with the labels beside it, and so does the
     count. */
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  font-family: var(--kpress-font-sans);
  /* Smaller than the table's text since 2026-10-02 (the owner, `think-gwcu`), the
     support size until then. */
  font-size: var(--site-font-size-control);
  font-weight: var(--site-font-weight-sans-light);
  margin-block: var(--site-table-space) 0.5rem;
}
@media screen {
  .kpress-table-wrap,
  .site-table-wrap {
    margin-block: var(--site-table-space);
  }
  .site-table-tools + .site-table-wrap {
    margin-block-start: 0;
  }
  /* A table of results keeps its legend close under it, and the legend takes the
     table's space below. */
  .site-table-wrap:has(+ .site-rung-legend) {
    margin-block-end: 0.75rem;
  }
  .site-rung-legend {
    margin-block-end: var(--site-table-space);
  }
}
/* On a narrow pane KPress lets a document's table run past the column, across the
   document's gutter and under its clip. Here it keeps to the column and scrolls inside
   its wrap, so the scroller itself keeps the gutter. The band is KPress's own, a query
   on its page container, so the two rules always apply together. */
@container kpress-doc (max-width: 47.99rem) {
  .kpress .site-page .kpress-table-wrap {
    max-inline-size: 100%;
  }
}
.site-table-tools label {
  color: var(--kpress-doc-muted);
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
}
/* A preset-only control (`data-preset`) is out of the bar until a link sets it: the
   label's own display would otherwise show it. */
.site-table-tools label[hidden] {
  display: none;
}
.site-table-tools :is(select, input) {
  background: var(--kpress-doc-bg, transparent);
  border: 1px solid var(--kpress-doc-border);
  border-radius: var(--kpress-radius-sm, 4px);
  color: var(--kpress-doc-text);
  font: inherit;
  padding: 0.05rem 0.3rem;
}
/* A touch screen's browser zooms the page into a field whose text is under 16px when it
   takes focus, so there a control keeps 16px at least; its label stays the bar's size. */
@media (pointer: coarse) {
  .site-table-tools :is(select, input:not([type="checkbox"])) {
    font-size: max(16px, 1em);
  }
}
/* A checkbox is the bar's own control too: the site's accent when checked, never the
   browser's blue, no box of its own around it, and its words on one line beside it. */
.site-table-tools label:has(input[type="checkbox"]) {
  white-space: nowrap;
}
.site-table-tools input[type="checkbox"] {
  accent-color: var(--kpress-doc-accent);
  border: 0;
  margin: 0;
  padding: 0;
}
/* An age in days is a few digits. A number input with no `max` to size it by would
   otherwise take a text field's width. */
.site-table-tools input[data-bound="age"] {
  inline-size: 4.5rem;
}
/* A control at its no-filter value, a select's "All" or an empty field showing its
   placeholder, is gray; a control that filters is the text colour, so the bar says at a
   glance what narrows the table (the owner, 2026-10-02, `think-pcei`). It follows the
   reader's changes with no script: `:checked` is the option shown. A checkbox's words
   are its value, gray unchecked and the text colour checked. The menu's own options
   keep the text colour. The labels before the controls stay gray. */
.site-table-tools select:has(option[value=""]:checked) {
  color: var(--site-support-color);
}
.site-table-tools select option {
  color: var(--kpress-doc-text);
}
.site-table-tools input::placeholder {
  color: var(--site-support-color);
  opacity: 1;
}
.site-table-tools label:has(input[type="checkbox"]:checked) {
  color: var(--kpress-doc-text);
}
/* The count, what the table holds now ("324 cases", "7 of 65 results"), is the bar's
   one result, so it is the text colour, not the labels' gray. */
.site-table-tools .site-count {
  color: var(--kpress-doc-text);
  margin-inline-start: auto;
}
.site-table-wrap {
  overflow-x: auto;
}
/* The site's tables, the results tables and the frontier table, have no frame: KPress
   draws a border round every table, and on a long table it was clutter (the owner,
   2026-10-02, `think-wadm`). The rule under the header and the light rule under each
   row are all a table's lines. */
.site-table {
  border-collapse: collapse;
  width: 100%;
}
.kpress .site-table {
  border: 0;
}
.site-table thead th {
  position: sticky;
  top: 0;
  background: var(--kpress-doc-bg);
  z-index: 1;
}
.site-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
/* The sort indicator: the site's sort pair while unsorted, its arrow once sorted. */
.site-table th[data-sort]::after {
  color: var(--kpress-doc-muted);
  font-size: 0.8em;
  mask-image: var(--site-arrow-sort);
  transition: none;
}
.site-table th[aria-sort="ascending"]::after {
  --site-arrow-turn: -90deg;
  color: var(--kpress-doc-accent);
  mask-image: var(--site-arrow);
}
.site-table th[aria-sort="descending"]::after {
  --site-arrow-turn: 90deg;
  color: var(--kpress-doc-accent);
  mask-image: var(--site-arrow);
}
.site-table td {
  line-height: 1.4;
  vertical-align: top;
}
/* A header sits at the foot of its cell and aligns as its column does: text to the
   start, numbers to the end. */
.kpress .site-table thead th {
  text-align: start;
  vertical-align: bottom;
}
.kpress .site-table td.num,
.kpress .site-table th.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
/* The short columns keep as narrow as their content, leaving the spare width to the long
   text column. The id and the date stay on one line; an n can be a long list of counts,
   so it wraps, and a table of results gives a long list a measure of its own (below).
   An id is five characters, narrower than the 6rem KPress keeps a cell to, so its column
   gives that floor up. A phone's card-per-row layout sizes its own cells. */
@media (width >= 40rem) {
  .site-table :is(.site-col-id, .site-col-n, .site-col-date) {
    width: 0;
  }
  .site-table :is(.site-col-id, .site-col-date) {
    white-space: nowrap;
  }
  .site-table .site-col-id {
    min-width: 0;
  }
}
.site-table tr[hidden] {
  display: none;
}
/* The row a page's address names (`all-results.html#t-018`) shows whatever the filters
   hide, so a link to a row never lands on nothing: with scripts `table.js` keeps it,
   and without them this rule does. */
.site-table tr[hidden]:target {
  display: table-row;
}
/* Without scripts the filters cannot be changed, so nothing stays filtered: every row
   shows, and the bar, which would do nothing, does not. */
@media (scripting: none) {
  .site-result-filters {
    display: none;
  }
  .site-table tbody tr[hidden] {
    display: table-row;
  }
}
@media (scripting: none) and (width < 40rem) {
  .site-results tbody tr[hidden] {
    display: grid;
  }
}
:is(.site-table, .site-popover) .site-detail {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  line-height: 1.45;
  margin-block: 0.4rem 0.2rem;
}
:is(.site-table, .site-popover) .site-detail dt {
  font-weight: var(--site-font-weight-sans-medium);
  color: var(--kpress-doc-text);
}
:is(.site-table, .site-popover) .site-detail dd {
  margin: 0 0 0.4rem 0;
}
.site-records {
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
}
.site-records a {
  white-space: nowrap;
}
/* ---------- Chips ----------
   Every small label on the site is one chip: square corners, the sans face at the note
   size, a solid fill and no border, lettered in the page's own text colour. In light
   mode every fill is light enough for dark text; in dark mode every fill is dark and
   the text light. A plain chip is a neutral tint; a status chip takes its status's
   fill (below). A rung chip adds `site-rung-fill`. */
.site-chip {
  background: color-mix(
    in oklch,
    var(--kpress-doc-muted) var(--site-chip-tint),
    var(--kpress-doc-bg)
  );
  border-radius: 0;
  color: var(--kpress-doc-text);
  display: inline-block;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-medium);
  line-height: 1.45;
  /* A row of chips wraps like words, between chips; this margin keeps a wrapped row of
     them from touching the row above, wherever they sit. */
  margin-block: 0.15rem;
  padding: 0 0.35rem;
  /* No chip wraps: its words stay on one line, in a table, a popover, the ladders or a
     card, and no rule anywhere on the site lets one break. What holds a chip is made
     wide enough for it. */
  white-space: nowrap;
}
/* A status chip takes a fill from the rung scale (below), so it turns over with the
   page and keeps the scale's contrast, and one status reads the same wherever it is
   drawn (the owner, 2026-10-02, `think-c19o`): a case's `proved` is green and its `open`
   yellow, on the frontier table, a case record and a result's list of cases; a result's
   `confirmed` is the green of the confirmation rungs, at C3's strength, and its
   `reviewed` the verification rungs' blue. The other statuses, the kinds and the
   standings keep the plain chip. `devtools.rung_scale` measures these fills too. */
.site-chip:is([data-case-status], [data-status="confirmed"], [data-status="reviewed"]) {
  --rung-chroma-boost: 0;
  background: oklch(
    calc(var(--site-rung-base) + var(--rung-level) * var(--site-rung-step))
      calc(
        var(--site-rung-chroma-base) +
        var(--rung-level) *
        var(--site-rung-chroma-step) +
        var(--rung-chroma-boost)
      )
      var(--rung-hue)
  );
}
.site-chip[data-status="confirmed"] {
  --rung-hue: 158;
  --rung-level: 3;
}
.site-chip[data-status="reviewed"] {
  --rung-hue: 250;
  --rung-level: 2;
}
.site-chip[data-case-status="proved"] {
  --rung-hue: 145;
  --rung-level: 3;
}
.site-chip[data-case-status="open"] {
  --rung-hue: 95;
  --rung-level: 2;
  --rung-chroma-boost: 0.02;
}

/* A rung's fill moves with its level on its own scale, always behind the page's text
   colour: level 0 is nearly the page background, and each level above it is stronger
   (darker in light mode, lighter in dark) and more saturated. Verification is the blue
   and confirmation the green of the packing palette's squares. Significance is no chip
   (`.site-significance`, below). */
.site-rung-fill {
  --rung-hue: 250;
  --rung-chroma-base: var(--site-rung-chroma-base);
  --rung-chroma-step: var(--site-rung-chroma-step);
  --rung-level: 0;
  background: oklch(
    calc(var(--site-rung-base) + var(--rung-level) * var(--site-rung-step))
      calc(var(--rung-chroma-base) + var(--rung-level) * var(--rung-chroma-step)) var(--rung-hue)
  );
  color: var(--kpress-doc-text);
}
.site-rung-fill[data-rung="C"] {
  --rung-hue: 158;
}
.site-rung-fill[data-level="1"] {
  --rung-level: 1;
}
.site-rung-fill[data-level="2"] {
  --rung-level: 2;
}
.site-rung-fill[data-level="3"] {
  --rung-level: 3;
}
.site-rung-fill[data-level="4"] {
  --rung-level: 4;
}
.site-rung-fill[data-level="5"] {
  --rung-level: 5;
}
.site-star {
  color: var(--site-new-result);
}
/* A significance rung is its letter and level in the significance teal, medium weight,
   then as many short bars in the same ink as its level, one to five, so a column of them
   reads as a meter: no chip, since significance asks a different question from the
   verification and confirmation chips beside it. The bars sit at the label's middle, a
   line apart, and never wrap away from it. */
.site-significance {
  align-items: center;
  color: var(--site-significance);
  display: inline-flex;
  font-family: var(--kpress-font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: var(--site-font-weight-sans-medium);
  gap: 0.2em;
  vertical-align: baseline;
  white-space: nowrap;
}
.site-significance-bars {
  display: inline-flex;
  gap: 0.08em;
}
.site-significance-bar {
  background: currentcolor;
  block-size: 0.26em;
  border-radius: 0.06em;
  inline-size: 0.36em;
}
@media (forced-colors: active) {
  .site-significance-bar {
    background: CanvasText;
  }
}
@media print {
  .site-nav,
  .site-table-tools {
    display: none;
  }
  .site-table thead th {
    position: static;
  }
}
@media (width < 40rem) {
  .site-nav .site-edition {
    display: none;
  }
}
/* The note under the poster and film cards (PDFs and Videos), in the support gray. */
.site-atlas-note {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  text-align: center;
}
/* A date comes first, and then what it dates, "published" or "established", in the
   support colour, on its own line under the date so the column stays narrow. */
.site-table .site-date-kind {
  color: var(--site-support-color);
  display: block;
}
.site-table .site-col-date {
  white-space: nowrap;
}
/* What a result is sits under its rungs, on a line of its own: its kind, one chip. */
.site-table .site-kind {
  display: block;
  margin-block-start: 0.3rem;
}
/* A result's status has a column of its own, after the rungs (`think-ybt5`; it sat
   under the kind until 2026-10-02): the status chip, then who has the next move where
   the register records it, then `superseded` or `superseded in part` where the result
   is, each with the results that supersede it (`supersession_marks`). The chips wrap
   between themselves, one under another where the cell is too narrow, a kind's gap
   apart, and never inside one: the column is as wide as its widest chip. */
.site-table .site-standing {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
/* The results that supersede one are named by their ids, and an id never breaks at its
   hyphen: `T-` at the end of one line and `020` on the next reads as two things. */
:is(.site-superseded, .site-result-superseded) a {
  white-space: nowrap;
}

.kpress .site-table {
  font-size: var(--site-font-size-note);
}
.kpress .site-table :is(th, td) {
  padding: 0.55rem 0.5rem;
}
/* The result column carries the reading; the rest stay as narrow as their content. */
.site-table .site-col-result {
  min-width: 16.55rem;
}
/* The legend under a table of results (`overview_sections.rung_legend`): three short
   lines in the support colour at the note size, every significance mark, every
   verification and confirmation chip, and the star with the link to the ladders, each
   line wrapping between its marks and never inside one. It stands in a box of its own,
   framed as a card or a case's note is, so it reads as a key and not as more of the bar
   above the table, where it stood until 2026-10-04 (the owner). */
.site-rung-legend {
  border: 1px solid var(--kpress-doc-border);
  border-radius: 0;
  color: var(--site-support-color);
  display: grid;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  gap: 0.3rem;
  margin-block: 0;
  padding: 0.6rem 0.9rem;
}
/* A line wraps between its groups, a rating's name and its marks, and a group between
   its marks, so a rating that wraps starts its own line flush. */
.kpress .site-rung-legend p {
  align-items: center;
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  row-gap: 0.3rem;
}
.site-rung-legend-group {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
}
.site-rung-legend-name {
  color: var(--kpress-doc-text);
  font-weight: var(--site-font-weight-sans-medium);
}
.site-rung-legend .site-significance + .site-significance {
  margin-inline-start: 0.3rem;
}
/* Significance is the second column, narrow but prominent: its mark on one line, and a
   new result's star after the bars, where it stood after the result's text until
   2026-10-03 (`think-m3m4`). The column is as wide as its widest mark, KPress's 6rem
   floor given up as the cases' is: S5's and a star, 77.4px. The mark was trimmed to
   that the same day (`think-r3rd`), its bars 0.36em wide and 0.2em after its label
   (`.site-significance`, above), the cell's padding 0.2rem and the star's margin below,
   from 90.4px, which set the nine columns' floors 7.8px past the 1200 a 1280-pixel
   window gives the table; now they leave it 2. The padding went from 0.3rem to 0.2rem
   when two results' tenth evidence links widened the details column by 6.3px. */
.site-results .site-col-s {
  white-space: nowrap;
}
.kpress .site-results :is(th, td).site-col-s {
  min-width: 0;
  padding-inline: 0.2rem;
}
/* The star takes the cell's end padding and a little of the result's start padding,
   which still keeps it clear of the result's text. */
.site-results .site-col-s .site-star {
  margin-inline: 0.2em -0.4em;
}
/* On a wide table the result takes the spare width: past KPress's 40rem cell cap, and
   ahead of a long credit, which wraps at 20rem. */
.kpress .site-table td.site-col-result {
  max-width: none;
}
.site-table .site-col-credit {
  max-width: 20rem;
}
.site-table .site-records {
  min-width: 10rem;
}
/* A table of results keeps its credit column wide enough for the longest name on one
   line ("Queuingtheorydotcom", 167px of the 184), so a credit wraps between names, two
   or three to a line, and never inside one. KPress's own floor, 6rem, set a credit one
   word to a line while the result column kept the spare width. The rungs column is as
   wide as its widest chip, since no chip wraps: the two rungs share a line, and the
   widest kind, "restricted optimality", sets it at 180 where a row with one shows. The
   result column's floor is its 16.55rem (above): the widest piece of a formula a line
   cannot end inside, 248.5px, and the cell's padding are narrower than that, now that a
   long quotient may end a line after its solidus (`overview_data.breakable_quotients`).
   A result's records are in its row's popover (below). */
@media (width >= 40rem) {
  .site-results .site-col-credit {
    min-width: 11.5rem;
  }
  /* As narrow as its widest chip, like the other short columns: the spare width is the
     result's and the credit's. */
  .site-results :is(.site-col-s, .site-rungs, .site-col-status) {
    width: 0;
  }
}
/* A result's cases, its n: each count or range is a box a line cannot end inside
   (`overview_sections.case_list`), so a range is never cut after its dash. A list reads
   from the start of its cell, as text does, and the column's header with it.

   A cell of up to four values stays on one line and is as narrow as that line, unless
   that line is longer than half the measure (`overview_sections.CASES_ONE_LINE`). A cell
   of five or more, or a long one, wraps (`.site-n-wraps`), and asks for
   `--site-cases-measure`: T-056's 23 values take 6
   lines there, where a column as narrow as one value set them one or two to a line, 15
   lines and a row 386px tall. The measure is what the cell would like, not a floor: a
   table gives a column the width it asks for before the result and the credit, which
   ask for none, take any spare width, and where the window is short of room the column
   narrows first, to half its measure, a range and a count to a line, before the table
   scrolls sideways. KPress's 6rem floor is given up, as the id's is. Where no row
   showing has a long list, the column is as narrow as the short ones, so a single case
   has no empty column beside it. */
.site-n-value {
  white-space: nowrap;
}
@media (width >= 40rem) {
  .kpress .site-results :is(th, td).site-col-n {
    min-width: 0;
    text-align: start;
  }
  .site-results td.site-col-n {
    white-space: nowrap;
  }
  .site-results td.site-col-n.site-n-wraps {
    min-width: calc(var(--site-cases-measure) / 2 + 1rem);
    white-space: normal;
    width: calc(var(--site-cases-measure) + 1rem);
  }
}
/* A formula in a result's summary is set in the line. KPress sets inline math as a box
   of its own (`.kpress-math-inline`, an inline block), and a box too wide for its line
   wraps inside itself and sends the words after it to a new line, which then began with
   the summary's comma. In the line, a formula ends a line where KaTeX lets one end,
   after a relation or a binary operator at its top level, and the words after it follow
   on.

   The formula's last piece is set in the line too. KaTeX sets each piece as a box
   (`.base`, an inline block), and a browser may end a line after a box whatever follows
   it, so a formula whose last piece filled its line sent the comma after it to the
   next: T-078's, once T-079 joined the table (3 October 2026). A word joiner between
   them does not stop Chromium. In the line, the piece is a run of text a line cannot
   end inside, as it was, and the comma, stop or bracket after it keeps to it as it does
   to a word: the line ends after the formula's last relation or operator instead, and
   the last piece and its comma go on together. Nothing in the piece moves, and every
   other piece stays a box, so the formula still ends a line only where KaTeX lets it.
   Across windows of 320 to 1600 pixels no line of either table begins with punctuation
   after a formula, where with the last piece a box 148 of 214 widths had one. */
.site-results .site-col-result :is(.kpress-math-inline, .katex-html > .base:last-child) {
  display: inline;
} /* A result's records, its case link, the register, its evidence, source and reviews,
   are the last entry of its row's popover (`overview_sections._detail`): one line, a dot
   drawn between two links, each link kept whole. They were a Details column of the
   table from 2026-10-02 (`think-e4o3`) to 2026-10-04 (`think-46fw`), one link to a line,
   and before that a line under the summary; the row reads more cleanly without them. */
.site-row-pop .site-detail .site-records a + a::before {
  color: var(--kpress-doc-muted);
  content: "·";
  display: inline-block;
  padding-inline: 0.35em;
}

.site-table .site-rungs {
  white-space: nowrap;
}
.site-table .site-records a {
  white-space: nowrap;
}

/* ---------- A table of results on a phone ----------
   Eight columns do not fit 390px, and scrolling a table sideways to read one claim is the
   wrong trade: each row becomes a small card, id, cases and rungs on its first line, the
   significance under the id and the status line under the rungs on its second, then the
   claim, and the credit and date. The results page's table and the overview's recent table are the one
   table (`.site-results`), so both take it. The card places its cells by class, not by
   column, and orders them (`order`): the wide table's row opens with the date and sets
   the credit before the status, so the card reads as it did before the columns were
   reordered. */
@media (width < 40rem) {
  .site-results thead {
    display: none;
  }
  .kpress .site-results,
  .kpress .site-results tbody {
    box-sizing: border-box;
    display: block;
    min-width: 0;
    width: 100%;
  }
  .site-results tr {
    align-items: baseline;
    border-block-end: 1px solid var(--kpress-doc-border);
    column-gap: 0.6rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.7rem 0.5rem;
    row-gap: 0.3rem;
  }
  .site-results tr[hidden] {
    display: none;
  }
  .site-results tr[hidden]:target {
    display: grid;
  }
  .kpress .site-results td {
    border: 0;
    display: block;
    max-width: none;
    min-width: 0;
    padding: 0;
  }
  .site-results .site-col-id {
    font-weight: 650;
    grid-area: 1 / 1;
  }
  .site-results .site-col-n {
    grid-area: 1 / 2;
  }
  .site-results .site-rungs {
    grid-area: 1 / 3;
  }
  /* The significance opens the card's second line, under the id and the cases, level
     with the status under the rungs. On the first line, between the id and the cases,
     its track came out of the cases', the one that gives way, and next to a long status
     a short list had none: n = 11 stood a word to a line across the rungs (`think-uer5`,
     2026-10-03). */
  .site-results .site-col-s {
    grid-area: 2 / 1 / auto / 3;
  }
  /* The status stands right under the rungs, in their track, on the card's second line,
     as it did when it was in their cell. The track is as wide as its content, and a
     status line of three chips (`recorded`, `waiting on third party`, `superseded`)
     would take the whole card and leave the cases and the credit no room. So the cell
     stops at two chips' width, and a third chip wraps under them. */
  .site-results .site-col-status {
    grid-area: 2 / 3;
  }
  .kpress .site-results td.site-col-status {
    max-width: 14.5rem;
  }
  .site-results td.site-col-n {
    text-align: start;
  }
  .site-results td.site-col-n::before {
    color: var(--kpress-doc-muted);
    content: "n = ";
  }
  /* A list that wraps, of five values or more or a long one, takes a line of its own
     under the id, the rungs and the status, the card's whole width, and wraps there from
     the start of the line: between them it had under half of that. */
  .kpress .site-results td.site-col-n.site-n-wraps {
    grid-area: 3 / 1 / auto / -1;
    text-align: start;
  }
  .site-results .site-col-result {
    grid-column: 1 / -1;
  }
  /* The claim comes before the credit and the date, which the wide row sets on either
     side of it. */
  .site-results .site-col-credit {
    grid-column: 1 / 3;
    order: 1;
  }
  .site-results .site-col-date {
    grid-column: 3;
    order: 2;
    text-align: end;
  }
  .site-results .site-date-kind {
    display: inline;
  }
  .site-results :is(.site-col-credit, .site-col-date) {
    color: var(--kpress-doc-muted);
    font-size: 0.9em;
  }
  .site-results .site-col-result {
    min-width: 0;
  }
}

/* ---------- Quiet cell text and quiet rows ----------
   Secondary text inside a cell, a credit, an "after" list or a finder, in the support
   colour and the sans face, at the table's own size so it stays readable. A superseded
   result's row reads quieter in every site table; its chips keep their fills. */
.site-cell-quiet {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-weight: var(--site-font-weight-sans-light);
}
.kpress .site-table tr[data-current="false"] td {
  color: var(--site-support-color);
}

/* Rows part on a light rule rather than KPress's zebra stripe, and wash on hover, the
   wash easing in and out on the hover timing (site-nav.css, Motion), as it does on
   focus and while the row's popover is open. After the phone layout, which draws the
   same rule under each card. */
.kpress .site-table tbody tr {
  background: none;
  border-block-end: 1px solid var(--kpress-doc-border);
  transition: var(--site-hover-transition);
}
.kpress .site-table tbody tr:hover {
  background: var(--site-wash);
}
/* A row reached by its address (`frontier.html#n-11`, `all-results.html#t-018`) is
   marked with the same wash. */
.kpress .site-table tbody tr:target {
  background: var(--site-wash);
}

/* ---------- Row popovers ----------
   The row is the unit (paper-design.md, Row popovers): a row with detail opens one
   popover, a card's, wherever it is pressed, and no cell expands on its own. Beyond the
   hover wash above, it keeps the wash while it has keyboard focus, with an accent ring
   inside its edge, and while its popover is open. A frontier row, which opens its case's
   record in the case popover (`case-popover.js`), is marked the same way. Once its
   script has made it the control it shows the pointer anywhere on it; its native
   trigger, which opens the popover without scripts, reads as the text it wraps. */
.kpress
  .site-table
  tbody
  tr:is([data-row-popover], [data-case-row]):is(:focus-visible, [aria-expanded="true"]) {
  background: var(--site-wash);
}
.kpress .site-table tbody tr:is([data-row-popover], [data-case-row]):focus-visible {
  outline: 2px solid var(--kpress-doc-accent);
  outline-offset: -2px;
}
.kpress .site-table tbody tr:is([data-row-ready], [data-case-row][aria-controls]) {
  cursor: pointer;
}
.kpress .site-table .site-row-open {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
}

/* ---------- Words stay whole ----------
   No text on the site breaks inside a word. KPress gives every page
   `overflow-wrap: break-word`, which cuts a run of characters only when it is longer
   than a whole line, and the site adds `overflow-wrap: anywhere` nowhere but on the two
   things that are such runs by nature: an exact decimal (`.site-case-decimal`) and a
   repository path (`.site-result-links code`). `anywhere` also lets a column shrink to
   one character, which is how a label comes out a letter a line, so it never goes on
   prose, a label or a column of either.

   A name set as code, an evidence identifier or a result's id, is one word too, and a
   browser would end a line on any of its hyphens. Each name with the comma after it is
   an inline box of its own (`.site-name`): the line breaks before the box, never inside
   it, and only a name longer than the whole line wraps, inside its box. */
.site-name {
  display: inline-block;
  max-inline-size: 100%;
}

/* kpress wraps a wide table in its own full-bleed wrap, sized from the viewport. The
   site's tables already sit in a wide track of their own, so that wrap only has to fill
   it; left to bleed, it runs 20px past a phone's edge. */
.site-table-wrap .kpress-table-wrap {
  left: auto;
  margin: 0;
  transform: none;
  width: 100%;
}

/* ---------- Frontier atlas ---------- */
/* Ten columns: the atlas takes a wider track than the site's other wide blocks. */
.site-page .site-frontier {
  --site-wide: 86rem;
  /* The side of a row's drawing: two lines of the table's text, at the cells' line
     height of 1.4. Every row holds two lines at least (its Records cell is the case
     file's link over the row's trigger), so the drawing, in the padding every cell has,
     is exactly as tall as the shortest row's text and never makes a row taller. */
  --site-frontier-thumb: calc(2.8 * var(--site-font-size-note));
  --site-frontier-cell-inline: 0.4rem;
}
/* A row reads across its middle: every cell is centred on the row's height, so a value
   of one line sits level with the drawing and with the middle of a neighbour of two or
   three lines. The header keeps the foot of its cell, as in every site table. */
.site-frontier td {
  vertical-align: middle;
}
/* Ten columns in the 1200 pixels a 1280-pixel window gives the table. Every column is as
   wide as what it holds and no wider: KPress's 6rem floor would set the drawing, n and
   the star each in 96 pixels. And a cell keeps 0.4rem at either side where the other
   site tables keep 0.5rem, which is the 29 pixels the table needs to fit that track
   with a credit's longest name whole (the note below) and the gap clear of the records
   (the Records cell, below). */
.kpress .site-frontier :is(th, td) {
  min-width: 0;
  padding-inline: var(--site-frontier-cell-inline);
}
/* The drawing has the first column to itself, under no heading, tight to its square:
   the cell is the drawing and the row's start padding, and n follows it at the cells'
   usual distance. */
.kpress .site-frontier .site-thumb {
  color: var(--kpress-doc-muted);
  padding-inline-end: 0;
  width: 0;
}
.kpress .site-frontier .site-col-n {
  padding-inline-start: 0.5rem;
}
.site-thumb svg {
  block-size: var(--site-frontier-thumb);
  display: block;
  inline-size: var(--site-frontier-thumb);
}
/* Strokes in screen pixels, so a square's outline reads at 50 pixels across. */
.site-frontier .site-thumb :is(path, rect) {
  vector-effect: non-scaling-stroke;
}
/* The case a row is about is the one bold thing in it. */
.site-frontier td.site-col-n {
  font-weight: var(--site-font-weight-sans-bold);
}
/* The star's column is as narrow as its heading. */
.site-frontier .site-col-recent {
  width: 0;
}
/* A recent lower bound that corrects a published result says which beside its star,
   `corrects Nagamochi 2005`, in the support grey (the owner, 2026-10-02). In the
   frontier table it stands under the star, a step below the cell's type and breaking
   between its words and never inside a name, so the star's column keeps the width it
   had: at the cell's own size "Nagamochi" alone widened it past the table's track. */
.site-corrects {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
}
.site-frontier .site-corrects {
  display: block;
  font-size: 0.85em;
  line-height: 1.25;
  word-break: normal;
}
/* A credit wraps between its words and never inside a name: KPress lets a table's cell
   break anywhere, which set "Queuingtheorydotcom" on two lines in a column a few pixels
   narrower than the name. The column is now at least as wide as the longest name. */
.site-frontier .site-frontier-note {
  display: block;
  font-size: var(--site-font-size-note);
  line-height: 1.3;
  margin-inline-start: auto;
  max-width: 11rem;
  word-break: normal;
}
.site-frontier .site-approx {
  color: var(--site-support-color);
  display: block;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-variant-numeric: tabular-nums;
  font-weight: var(--site-font-weight-sans-light);
  white-space: nowrap;
}
.site-frontier .site-frontier-same {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  white-space: nowrap;
}
.site-frontier .site-decimal {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The row's trigger sits under the case file's link, so the Records column stays as
   narrow as the link. */
.site-frontier .site-records .site-cell-quiet {
  display: block;
}
/* The gap ends at its cell's edge and the records start at theirs: half a rem more
   between them keeps a decimal from running into the case file's name. */
.kpress .site-frontier td.site-records {
  padding-inline-start: calc(var(--site-frontier-cell-inline) + 0.5rem);
}

/* The homepage's picture: one packing, centered under the title, in the page's ink. */
.site-hero .site-hero-figure {
  margin: 1.5rem auto 0;
  max-inline-size: min(20rem, 70vw);
}
/* Opening the page, it starts `--site-hero-lift` above the page's first-block line. */
@media screen {
  .kpress-long-text > .site-hero:first-child > .site-hero-figure:first-child {
    margin-block-start: calc(-1 * var(--site-hero-lift));
  }
}
.site-hero .site-hero-figure a {
  color: var(--kpress-doc-text);
  display: block;
}
.site-hero .site-hero-figure svg {
  block-size: auto;
  display: block;
  inline-size: 100%;
}
.site-hero-figure figcaption {
  color: var(--kpress-doc-muted);
  font-family: var(--kpress-font-sans);
  font-size: calc(var(--site-font-size-sans-base) * 0.85);
  font-weight: var(--site-font-weight-sans-light);
  margin-block-start: 0.5rem;
}

/* ---------- The rating ladders ----------
   Verification Ladders is one diagram (paper-design.md, Rating ladders): a column for
   each scored dimension, a row for each level, the highest at the top, so the rungs of
   the three ladders line up. It is a grid with table roles, in the wide track, and it
   stands the tables' own space clear of the text. Every rung is the same height: its
   chip is one line and its description a box of exactly two. One rule stands under the
   column heads and none between the rows, which the space between them keeps apart. */
.site-ladders-frame {
  container: site-ladders / inline-size;
}
@media screen {
  .site-ladders-frame {
    margin-block: var(--site-table-space);
  }
}
.site-ladders {
  --site-ladders-leading: 1.4;
  --site-ladders-line: calc(var(--site-font-size-note) * var(--site-ladders-leading));
  /* The rail holds a chip and nothing else, so it is the chip's own width. */
  --site-ladders-rail: 2.25rem;
  --site-ladders-significance-rail: 3.75rem;
  --site-ladders-gap: 0.75rem;
  /* The narrowest a description is ever set: `SHORT_MEANING_LINE` characters a line. */
  --site-ladders-meaning-min: 13.5rem;
  /* What a column keeps clear after its words, before the next column's chip, and no
     more than lets three columns stand in the wide track of a 768-pixel window, 43rem
     (below). */
  --site-ladders-inset: 0.75rem;
  /* Half the space between two rows, which no rule divides: enough to tell one rung's
     second line from the next rung's first, and little enough that the rungs read as
     one ladder. */
  --site-ladders-row-space: 0.4rem;
  display: grid;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  line-height: var(--site-ladders-leading);
  position: relative;
}
.site-ladders > [role="row"] {
  display: contents;
}
/* The level a row stands for is said by its chips; its header is for a screen reader. */
.site-ladders-level {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.site-ladders-head {
  border-block-end: 1px solid var(--kpress-doc-text);
  padding: 0 var(--site-ladders-inset) 0.6rem 0;
}
.kpress .site-ladders .site-ladders-name {
  color: var(--kpress-doc-text);
  display: block;
  font-size: 1.15em;
  font-weight: var(--site-font-weight-sans-medium);
  line-height: var(--paper-heading-leading);
  margin-block-end: 0.3rem;
  transition: var(--site-hover-transition);
}
.kpress .site-ladders .site-ladders-name:is(:hover, :focus-visible) {
  color: var(--kpress-doc-accent);
}
.site-ladders-question {
  color: var(--site-support-color);
  display: block;
}
.site-ladders-cell {
  container-type: inline-size;
  padding-block: var(--site-ladders-row-space);
  padding-inline-end: var(--site-ladders-inset);
}
/* A rung in a narrow cell: its chip, and the description under it across the whole
   cell. */
.site-ladders-rung {
  column-gap: var(--site-ladders-gap);
  display: grid;
  grid-template:
    "chip" auto
    "meaning" auto / minmax(0, 1fr);
}
.site-ladders-rung .site-chip {
  grid-area: chip;
  justify-self: start;
  min-inline-size: var(--site-ladders-rail);
  text-align: center;
}
/* Significance's rungs are marks, not chips (`significance_mark`): its column's rail is
   as wide as the widest, S5 and its five bars (58.8 pixels at the note size), so every description in it starts on one
   line, as the chips' do. A mark stands as tall as a chip, the chip's line height and
   margin, so a rung of it is as tall as any other where it stands on a line of its own
   over its description, and its letters are level with its description's first line
   where it stands beside it. */
.site-ladders-cell[data-ladder="S"] {
  --site-ladders-rail: var(--site-ladders-significance-rail);
}
.site-ladders-rung .site-significance {
  grid-area: chip;
  justify-self: start;
  line-height: 1.45;
  margin-block: 0.15rem;
}
.site-ladders-meaning {
  block-size: calc(2 * var(--site-ladders-line));
  grid-area: meaning;
}
/* A rung with room, 18rem (the widest rail, significance's, the gap and the least
   description): the chip in its rail and the description beside it, its first line
   level with the chip's letters, which the chip's own margin sets down. Every cell
   turns at that one width, so a row's rungs stay one height; at 16.5rem, the chips'
   rail's, a significance description was set 21.6 pixels short of its least and took
   a third line (2026-10-03). The rail is at least its width and never narrower than
   what stands in it: S5's mark, 58.8 pixels in the page's face, ran 1.2 past a 3.6rem
   rail, and a wider face (65 pixels in the fallback, more in some system faces) ran it
   into its description (the owner, 2026-10-05). */
@container (inline-size >= 18rem) {
  .site-ladders-rung {
    align-items: start;
    grid-template-areas: "chip meaning";
    grid-template-rows: auto;
    grid-template-columns: minmax(var(--site-ladders-rail), max-content) minmax(0, 1fr);
  }
  .site-ladders-meaning {
    margin-block-start: 0.15rem;
  }
}
/* Below 42.75rem (three columns of the least description and its inset) three columns
   would set a description narrower than its minimum, so each ladder is a block of its
   own, significance first: its head, then its rungs from the top. The order is the
   grid's; the markup stays a table read level by level. A ladder's missing rung takes no
   room. The diagram is as wide as the wide track, which is sized from the page: 43rem at
   a 768-pixel window, where the page's margin widens, and 42.75rem at a 716-pixel one,
   so three columns hold from 716 pixels up with no width between that stacks. */
@container site-ladders (inline-size < 42.75rem) {
  .site-ladders {
    --site-ladders-inset: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .site-ladders [data-ladder="V"] {
    order: 1;
  }
  .site-ladders [data-ladder="C"] {
    order: 2;
  }
  .site-ladders-head ~ .site-ladders-head {
    margin-block-start: 1.6rem;
  }
  .site-ladders-empty {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }
}

/* The atlas grid: every case's known-best packing in a square cell, numbered beneath.
   It bleeds past the wide track as the window grows, up to 140rem, and its cells keep a
   size that reads, so the row holds more cases the wider the screen: at Medium, four on
   a phone, ten at 1280 pixels, sixteen at 1920 and twenty at 2560. A cell washes on hover
   like a card and opens the case popover (Case records, below). The wash is the cell's
   background,
   behind the drawing, and it is all that changes: every line keeps the page's ink. */
.site-page .site-atlas-grid {
  --site-wide: var(--site-bleed-max);
  --site-atlas-toggle-space: 1.2rem;
  /* The triangle's tiles: the least width one may have, which sets how many a line
     holds (overview/atlas-view.js reads it, in rem or px), and the most. The least is
     the smallest at which a drawing still reads as a packing and its three-figure
     number fits under it, a little over the 24 pixels a pointer target needs; it lets
     all 35 tiles of the eighteenth row stand on one line from a 1024-pixel window up. */
  --site-atlas-tile-min: 1.625rem;
  --site-atlas-tile-max: 4.5rem;
  /* The grid's least cell at Medium, and the size's scale (overview/atlas-view.js reads
     it): Small draws a tile two thirds as wide and Large half as wide again, in either
     view. The block's `data-atlas-size` sets it, below. */
  --site-atlas-cell-min: 6.4rem;
  --site-atlas-scale: 1;
  /* The move between the views: one duration and one easing for every tile, read by
     the script. Reduced motion makes the switch instant, as it does every hover. */
  --site-atlas-move-duration: 360ms;
  --site-atlas-move-easing: cubic-bezier(0.2, 0, 0, 1);
  /* The block is a size container, so a tile's width can be written from the block's
     (`100cqi`) and the tiles a line holds. */
  container-type: inline-size;
  position: relative;
}
/* Under a finger a tile is at least 2.5rem, 40 pixels, so a phone's line holds eight. */
@media (max-width: 40rem), (pointer: coarse) {
  .site-page .site-atlas-grid {
    --site-atlas-tile-min: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-page .site-atlas-grid {
    --site-atlas-move-duration: 0ms;
  }
}
/* The three sizes of tile (think-ht8t): Medium is the scale of 1 above, the size the
   atlas had before it offered a choice. */
.site-page .site-atlas-grid[data-atlas-size="small"] {
  --site-atlas-scale: 0.667;
}
.site-page .site-atlas-grid[data-atlas-size="large"] {
  --site-atlas-scale: 1.5;
}
/* The view tabs and the size tabs: two of the section tabs' strip (site-nav.css), on
   the bar's line, so each is as tall here as under the bar. One row centred over the
   tiles, the key to a tile's marks on a line of its own under it; on a narrow block the
   size tabs wrap under the view tabs. Each is hidden until the script has tiles to
   arrange. */
.site-atlas-grid .site-atlas-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: center;
  margin-block-end: var(--site-atlas-toggle-space);
}
.site-atlas-grid .site-atlas-views,
.site-atlas-grid .site-atlas-sizes {
  line-height: var(--site-nav-line);
  margin: 0;
}
.site-atlas-grid .site-atlas-views[hidden],
.site-atlas-grid .site-atlas-sizes[hidden],
.site-atlas-grid .site-atlas-legend[hidden] {
  display: none;
}
/* The key: each mark beside its words, in the support colour at the note size, as the
   tables of results key their star (`.site-rung-legend`), centred on a line of its own
   under the tabs. */
.kpress .site-atlas-grid .site-atlas-legend {
  color: var(--site-support-color);
  column-gap: 1.2rem;
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  justify-content: center;
  margin: 0;
  row-gap: 0.3rem;
}
.site-atlas-legend-item {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
}
/* The two custom properties are the triangle's (below); they are declared here, in the
   rule both views share, because every line of every drawing inherits them, and a
   declaration for the triangle alone would have the browser restyle all of those, some
   three thousand elements, at each change of view. A tile is its line's share of the
   block, no wider than the most a tile may be, both scaled by the size: Small draws it
   two thirds as wide, never under the least tile, and Large lets it grow to half as wide
   again, the script having set fewer to a line. At Medium it is the share alone, no
   wider than `--site-atlas-tile-max`. The grid's least cell is scaled the same way. */
.site-atlas-cells {
  --site-atlas-fit: calc(100cqi / var(--site-atlas-per-line, 1));
  --site-atlas-share: calc(var(--site-atlas-fit) * min(1, var(--site-atlas-scale)));
  --site-atlas-most: calc(var(--site-atlas-tile-max) * var(--site-atlas-scale));
  --site-atlas-tile: clamp(
    var(--site-atlas-tile-min),
    var(--site-atlas-share),
    var(--site-atlas-most)
  );
  --site-atlas-cell: calc(var(--site-atlas-cell-min) * var(--site-atlas-scale));
  --site-atlas-row-space: 0.12;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--site-atlas-cell), 1fr));
}
@media (max-width: 40rem) {
  .site-page .site-atlas-grid {
    --site-atlas-cell-min: 4.6rem;
  }
  .site-atlas-cells {
    gap: 0.35rem;
  }
}
/* A tile in a move between the views is scaled about its own corner, which is where the
   script measures from (overview/atlas-view.js). It has no transform at rest, so the
   origin changes nothing then. */
.kpress .site-atlas-cell {
  color: var(--kpress-doc-text);
  display: block;
  padding: 0.3rem;
  text-align: center;
  text-decoration: none;
  transform-origin: 0 0;
  transition: var(--site-hover-transition);
}
.kpress .site-atlas-cell:is(:hover, :focus-visible) {
  background: var(--site-wash);
  text-decoration: none;
}
/* The drawing is stroked in `currentColor`, and it names that colour itself. Read from
   the link, it went to the lighter accent KPress gives a hovered link's text (`.kpress
   a:hover`, which outranks the cell's own colour), and the outlines all but vanished
   against the squares. */
.site-atlas-cell svg {
  aspect-ratio: 1;
  color: var(--kpress-doc-text);
  display: block;
  height: auto;
  width: 100%;
}
/* The number's box is shrunk to the number and centred, so the marks it carries can
   hang outside it (below) and the number stand where it would without them. */
.site-atlas-n {
  color: var(--kpress-doc-muted);
  display: block;
  font-family: var(--kpress-font-sans);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--site-font-weight-sans-light);
  inline-size: fit-content;
  margin-block-start: 0.2rem;
  margin-inline: auto;
  position: relative;
}
/* Nothing in the atlas transitions its place: the move between the views is the
   script's (overview/atlas-view.js), and the layout a view sets must be the whole of it
   the moment it is set, since the script reads every box right then. KPress's
   reduced-motion rule (`components.css`, `.kpress [class]`) gives every classed element
   a 0.01ms transition of every property, under which the triangle was laid out for one
   frame with the grid's gaps, 1344 pixels wide at 1280, before it settled. A tile keeps
   its own transition, which is the wash alone. */
.site-atlas-cells,
.site-atlas-cell svg,
.site-atlas-n {
  transition: none;
}
/* The triangle: the same tiles, set by the grid bound. Row k holds the 2k - 1 cases a
   square of side k is known to hold and ends at k squared on the right edge, so the
   perfect squares, whose packing is the grid itself, run down it. A row too long for
   the block wraps in reading order: every line but its last is full, from the left,
   and the last holds what is left over, set from the right so it still ends at the
   square. overview/atlas-view.js says how many tiles a line holds
   (`--site-atlas-per-line`) and writes each tile's line and column; every size here
   follows from that one number and the block's width. A tile is its line's share of
   the block, no wider than `--site-atlas-tile-max`, and its inset, its number and the
   space over a new row are fractions of it, so the triangle keeps its proportions from
   a phone to a wide screen. A triangle narrower than the block is centred. The tile's
   width, `--site-atlas-tile`, is declared with the grid's rule above, for the reason
   given there. */
.site-atlas-grid[data-atlas-view="triangle"] .site-atlas-cells {
  gap: 0;
  grid-template-columns: repeat(var(--site-atlas-per-line, 1), var(--site-atlas-tile));
  justify-content: center;
}
/* The space over a new row, `--site-atlas-row-space`, is a share of a tile: 0.12 where
   every row is one line, and where a row wraps 0.4, larger than anything between two
   lines of one row, so the lines of a row read as one group. */
.site-atlas-cells[data-atlas-wrapped] {
  --site-atlas-row-space: 0.4;
}
.kpress .site-atlas-grid[data-atlas-view="triangle"] .site-atlas-cell {
  grid-area: var(--site-atlas-line, auto) / var(--site-atlas-column, auto);
  margin-block-start: calc(
    var(--site-atlas-opens, 0) *
    var(--site-atlas-tile) *
    var(--site-atlas-row-space)
  );
  padding: calc(var(--site-atlas-tile) * 0.07);
}
.site-atlas-grid[data-atlas-view="triangle"] .site-atlas-n {
  font-size: clamp(0.5rem, calc(var(--site-atlas-tile) * 0.25), 0.8rem);
  line-height: 1.15;
  margin-block-start: calc(var(--site-atlas-tile) * 0.04);
}
/* The perfect squares, down the right edge, are numbered in the text's own colour and
   the medium weight: the row ends there. */
.site-atlas-grid[data-atlas-view="triangle"] [data-atlas-square] .site-atlas-n {
  color: var(--kpress-doc-text);
  font-weight: var(--site-font-weight-sans-medium);
}
/* The grid shows n = 1 to 100 until its button, centred under it, places the rest. The
   rest sit in one box the grid lays out as its own cells, so hiding them again is the
   box's `hidden`. */
.site-atlas-rest {
  display: contents;
}
.site-atlas-rest[hidden] {
  display: none;
}
/* The expander's row is the action row, set the grid's own space under the tiles. */
.site-atlas-grid .site-atlas-toggle-row {
  --site-action-space: var(--site-atlas-toggle-space);
}
.site-atlas-grid .site-atlas-toggle-row[hidden] {
  display: none;
}
/* The regularized drawing's badge (overview_sections.atlas_layer_mark): a dot in the
   accent, sized in its text. The atlas's key carries it before its words; a regularized
   tile hangs it before its number, out of the flow, so the number stays centred as on
   every other tile. It hung past the number until the new-result star took that side
   on 2026-10-04 (think-wwtt), and the Regularized tab was its key until then. */
.site-atlas-layer-mark {
  background: var(--kpress-doc-accent);
  block-size: 0.5em;
  border-radius: 50%;
  display: inline-block;
  inline-size: 0.5em;
  vertical-align: 0.08em;
}
.site-atlas-n > .site-atlas-layer-mark {
  inset-block-start: 50%;
  inset-inline-end: calc(100% + 0.3em);
  position: absolute;
  translate: 0 -50%;
}
/* A new result's star (overview_sections.atlas_star), the site's one star in its warm
   ink (`.site-star`), hung past the number's end, out of the flow, a little smaller
   than the number so it stays inside the smallest tile. */
.site-atlas-n > .site-star {
  font-size: 0.8em;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + 0.12em);
  line-height: 1;
  position: absolute;
  translate: 0 -50%;
}

/* The film's panel for a case, which opens every case record as its visual summary
   (`.site-case-summary`, below) and a result's overview as its case (site-result.css):
   the gap bar, the bound as one statement, the badges, where each bound comes from and
   what is open. It was the atlas popover's until 2026-10-03, when the case popover took
   that popover's place, and keeps its classes. The two bounds keep the film's colours,
   scarlet for the proved lower bound and green for the best known side, turned lighter
   in dark mode. */
:root {
  --site-bound-lower: #a3123f;
  --site-bound-upper: #17794a;
}
:root:where([data-kpress-resolved-theme="dark"]) {
  --site-bound-lower: oklch(72% 0.15 12);
  --site-bound-upper: oklch(76% 0.13 155);
}
.kpress .site-atlas-pop .site-atlas-pop-head {
  color: var(--kpress-doc-muted);
  font-size: var(--kpress-caps-label-size, 0.8rem);
  font-weight: var(--site-font-weight-sans-medium);
  letter-spacing: var(--kpress-caps-spacing);
  margin-block: 1rem 0.35rem;
  text-transform: var(--kpress-caps-transform);
}
.site-atlas-pop .site-atlas-pop-record {
  font-variant-numeric: tabular-nums;
  font-weight: var(--kpress-font-weight-sans-regular);
  letter-spacing: normal;
  margin-inline-start: 0.4rem;
  text-transform: none;
}
.site-atlas-pop .site-atlas-pop-bound {
  font-size: 1.35em;
  margin-block: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.site-atlas-pop-star {
  color: var(--site-bound-lower);
  display: inline-block;
  font-size: 0.8em;
  inline-size: 1.1em;
}
.site-atlas-pop :is(.is-lower, .is-lower .katex) {
  color: var(--site-bound-lower);
}
.site-atlas-pop :is(.is-upper, .is-upper .katex) {
  color: var(--site-bound-upper);
}
.site-atlas-pop .site-atlas-pop-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.kpress-prose .site-atlas-pop-item {
  align-items: center;
  display: inline-flex;
  font-weight: var(--site-font-weight-sans-medium);
  gap: 0.4rem;
  margin: 0;
  padding-inline-start: 0;
}
.kpress-prose .site-atlas-pop-item::before {
  content: none;
}
.site-atlas-pop-item.is-new-result {
  color: var(--site-bound-lower);
}
.site-atlas-badge {
  align-items: center;
  border: 1.5px solid var(--kpress-doc-muted);
  block-size: 1.25rem;
  color: var(--kpress-doc-muted);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: var(--site-font-weight-sans-bold);
  inline-size: 1.25rem;
  justify-content: center;
  line-height: 1;
}
/* A case's badges where a case is one line, a table's row or a record's head: the
   glyphs alone, in a row after the case's status chip, each named for a screen reader
   and on hover (`result_overview.case_badges`). In a table they are a step smaller, to
   sit on the row's line. */
.site-case-badges {
  display: inline-flex;
  gap: 0.25rem;
  margin-inline-start: 0.4rem;
  vertical-align: middle;
}
/* In a table cell the row is its own block under the chip, as tall as its glyphs and no
   taller, so a row of whole numbers keeps the two lines its drawing is high. Its small
   margin is under it, matching the chip's line's leading above, so the cell's content
   is centred on the row. */
:is(.site-table, .site-result-cases) .site-case-badges {
  display: flex;
  margin: 0 0 0.1rem;
}
:is(.site-table, .site-result-cases) .site-case-badges .site-atlas-badge {
  block-size: 1rem;
  font-size: 0.7rem;
  inline-size: 1rem;
}
.site-atlas-badge[data-style="solid"] {
  background: var(--kpress-doc-muted);
  color: var(--kpress-doc-bg);
}
.site-atlas-badge[data-style="star"] {
  border-color: transparent;
  color: var(--site-bound-lower);
  font-size: 1.05rem;
}
.site-atlas-badge[data-style="query"] {
  border-color: var(--kpress-doc-border);
}
.site-atlas-pop [data-atlas-open] .site-atlas-pop-item {
  color: var(--kpress-doc-muted);
  font-weight: var(--kpress-font-weight-sans-regular);
}
/* A citation is a row of two cells: which bound, then its source, wrapping between
   words beside the label. The rows are table rows, so the browser sets the two in one
   table and the label column is as wide as the wider label, "lower" or "upper", in
   whatever face and size it is drawn; nothing gives it a width. */
.site-atlas-pop .site-atlas-pop-cite {
  color: var(--site-support-color);
  display: table-row;
  line-height: 1.4;
}
.site-atlas-pop-which {
  display: table-cell;
  font-weight: var(--site-font-weight-sans-medium);
  padding-block-start: 0.15rem;
  padding-inline-end: 0.75rem;
  white-space: nowrap;
}
.site-atlas-pop-note {
  color: var(--kpress-doc-muted);
  font-weight: var(--site-font-weight-sans-medium);
}
/* The gap bar, as the film draws it: a number line from one below the grid bound to two
   above it, the integers and the values of the two formulas marked in the quiet gray,
   the two bounds as bold rules with their values above in their colours, and the span
   between them shaded. Its labels are placed when the page is rendered
   (`result_overview.gap_bar`), each centred on its mark, and two values too close to
   sit side by side are set either side of their marks (`data-anchor`). */
.site-atlas-gap {
  font-variant-numeric: tabular-nums;
  margin-block: 0 0.4rem;
}
.site-atlas-gap-values,
.site-atlas-gap-row {
  block-size: 1.45em;
  position: relative;
}
.site-atlas-gap-values span,
.site-atlas-gap-row > span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.site-atlas-gap-values span[style*="px"],
.site-atlas-gap-row > span[style*="px"] {
  transform: none;
}
.site-atlas-gap-values span {
  font-weight: var(--site-font-weight-sans-bold);
}
.site-atlas-gap-values .is-lower {
  color: var(--site-bound-lower);
}
.site-atlas-gap-values .is-upper {
  color: var(--site-bound-upper);
}
.site-atlas-gap-row {
  color: var(--kpress-doc-muted);
}
.site-atlas-gap-formulas {
  block-size: 1.8em;
}
.site-atlas-gap-rail {
  block-size: 0.85rem;
  margin-block: 0.3rem;
  position: relative;
}
.site-atlas-gap-rail > span {
  position: absolute;
}
.site-atlas-gap-track {
  background: var(--kpress-doc-border);
  inset: 0;
}
.site-atlas-gap-open {
  background: var(--kpress-doc-muted);
  inset-block: 0;
  opacity: 0.6;
}
.site-atlas-gap-tick,
.site-atlas-gap-rule {
  transform: translateX(-50%);
}
.site-atlas-gap-tick {
  background: var(--kpress-doc-muted);
  block-size: calc(100% + 0.6rem);
  inline-size: 1.5px;
  inset-block-start: -0.3rem;
  opacity: 0.7;
}
.site-atlas-gap-tick.is-root {
  block-size: calc(100% + 0.3rem + 1.45em + 0.3rem);
}
.site-atlas-gap-rule {
  background: var(--kpress-doc-text);
  block-size: calc(100% + 0.8rem);
  inline-size: 3px;
  inset-block-start: -0.4rem;
}
/* ---------- Case records ----------
   One record per case, in its own file at `cases/11.html`, shown by the record page
   (`cases/`, overview/case-page.js) and by the one case popover every page that links
   cases carries (overview/case-popover.js). A record opens with its visual summary,
   the drawing first and large, then the number line of its bounds and the film's facts
   under it, and the rest of the record follows. */
.site-case-reader {
  margin-block-start: 1rem;
}
.site-case-reader[hidden] {
  display: none;
}
/* While a record is shown, the page is that record: the title, the account and the
   index above it step aside until the reader goes back to every case. */
:root:is([data-case-loading], :has(.site-case-reader:not([hidden]))) .site-case-front {
  display: none;
}
/* The case popover: as large as a result's overview, one scrolling panel, the record
   in it as its own page shows it. Its action, to the record's own address, stays in
   reach at the foot of a record taller than the window. */
.site-popover.site-case-pop {
  inline-size: min(62rem, 100vw - 2rem);
  max-inline-size: none;
}
.site-popover.site-case-pop:popover-open {
  block-size: auto;
  display: block;
  max-block-size: var(--site-popover-max-block);
  overflow: hidden auto;
}
/* The panel scrolls as a whole, so its close cross is held at its corner as the record
   scrolls under it, rather than leaving with the record's head: a record runs to many
   screens, and a phone leaves almost no room outside the panel to press. */
.site-popover.site-case-pop .site-popover-close {
  background: var(--kpress-doc-bg);
  float: inline-end;
  inset-block-start: var(--site-popover-close-inset);
  /* Held at the top alone: the card's `inset-inline-end`, read by a sticky box as a
     second limit, set it a padding's width in from the corner, over the steps. */
  inset-inline-end: auto;
  margin-block-start: calc(var(--site-popover-close-inset) - var(--site-popover-pad));
  margin-inline-end: calc(var(--site-popover-close-inset) - var(--site-popover-pad));
  position: sticky;
  z-index: 2;
}
.site-popover.site-case-pop .site-popover-close:is(:hover, :focus-visible) {
  background: var(--site-wash);
}

.site-case-pop .site-popover-actions {
  background: var(--kpress-doc-bg);
  border-block-start: 1px solid var(--kpress-doc-border);
  inset-block-end: calc(-1 * var(--site-popover-pad));
  margin-block-end: calc(-1 * var(--site-popover-pad));
  padding-block: 0.6rem var(--site-popover-pad);
  position: sticky;
}
@media (max-width: 40rem) {
  .site-popover.site-case-pop {
    inline-size: calc(100vw - 1rem);
    padding-inline: 0.75rem;
  }
  /* Its cross keeps to that narrower padding, as its steps do (below). */
  .site-popover.site-case-pop .site-popover-close {
    margin-inline-end: calc(var(--site-popover-close-inset) - 0.75rem);
  }
  .site-popover.site-case-pop:popover-open {
    max-block-size: calc(100dvh - 1rem);
  }
}
.site-case-head {
  font-family: var(--kpress-font-sans);
  font-weight: var(--site-font-weight-sans-light);
  text-align: center;
}
.site-case-steps {
  display: flex;
  font-size: var(--site-font-size-note);
  gap: 1rem;
  justify-content: space-between;
  margin-block-end: 1rem;
}
/* The record's steps are the first line the cross stands beside once it is held at the
   corner, so they keep clear of it as the label above them does: the next case's link
   ended under the cross (`think-0dxa`). */
.site-case-pop .site-case-steps {
  padding-inline-end: calc(
    var(--site-popover-close) +
    var(--site-popover-close-inset) -
    var(--site-popover-pad)
  );
}
@media (max-width: 40rem) {
  .site-case-pop .site-case-steps {
    padding-inline-end: calc(var(--site-popover-close) + var(--site-popover-close-inset) - 0.75rem);
  }
}
.kpress .site-case-title {
  font-size: calc(var(--site-font-size-sans-base) * 1.6);
  line-height: var(--paper-heading-leading);
  margin-block: 0.5rem 0.6rem;
}
.site-case-title b {
  font-weight: var(--site-font-weight-sans-medium);
  margin-inline-end: 0.4rem;
}
.site-case-title :is(.site-chip, .site-corrects) {
  vertical-align: middle;
}
.kpress .site-case-interval {
  font-size: calc(var(--site-font-size-sans-base) * 1.25);
  margin-block: 0 1.5rem;
}
/* The visual summary: the drawing centred and large, as wide as the reading measure
   allows up to 28rem, then the number line and the facts under it on the measure. */
.site-case-summary {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  margin-block: 0 1.5rem;
}
.site-case-figure {
  inline-size: min(28rem, 100%);
  margin: 0;
}
/* In the popover the drawing fills the panel's width and grows and shrinks with it,
   square at every width (the owner, 2026-10-04, `think-u214`), and is never taller than
   the panel shows at once: the panel's height less 8rem, room for the caption (2rem) and
   the actions held at its foot (5rem), so the whole square can be seen without the
   actions covering its foot. At 1280 by 800 that is 608px of the panel's 934; a tablet
   or a phone, taller than it is wide, keeps the full width. */
.site-case-pop .site-case-figure {
  inline-size: min(100%, var(--site-popover-max-block) - 8rem);
}
.site-case-summary-facts {
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  inline-size: min(40rem, 100%);
  min-inline-size: 0;
}
.site-case-summary .site-atlas-gap-values span[data-anchor="end"] {
  transform: translateX(calc(-100% - 0.3rem));
}
.site-case-summary .site-atlas-gap-values span[data-anchor="start"] {
  transform: translateX(0.3rem);
}
/* The drawing is the figure's own `svg`. A caption's typeset math draws a radical as an
   `svg` of its own, which KaTeX sizes; sized as the drawing, it collapsed to nothing,
   and a side such as 3 + ½√2 read as 3 + ½ 2. */
.site-case-figure > svg {
  block-size: auto;
  color: var(--kpress-doc-text);
  display: block;
  inline-size: 100%;
}
/* The drawing's lines are as heavy as the drawing draws them up to 12rem across, and no
   heavier however large it is shown (`think-pkz0`). The drawing strokes its frame 1.2
   and each square's outline 0.6 of the 102 units its box is wide
   (`render_frontier_page.packing_svg`), so those lines scale with it: the popover's
   drawing, 58rem across on a laptop, drew them 11 and 5.5 pixels heavy, and even at
   24rem a zoomed drawing read as heavy-lined (the owner, 2026-10-05). Here they are
   drawn in the page's own units instead (`non-scaling-stroke`), at the same share of the
   drawing's width (`100cqi`, the figure's) up to 12rem, 2.3 and 1.1 pixels from there
   up, so a smaller drawing keeps its lines as they were. */
.site-case-figure {
  --site-case-figure-lines: min(100cqi, 12rem);
  container-type: inline-size;
}
.site-case-figure > svg :is(rect, path) {
  vector-effect: non-scaling-stroke;
}
.site-case-figure > svg > rect {
  stroke-width: calc(var(--site-case-figure-lines) * 1.2 / 102);
}
.site-case-figure > svg path {
  stroke-width: calc(var(--site-case-figure-lines) * 0.6 / 102);
}
.site-case-figure figcaption {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  margin-block-start: 0.5rem;
  text-align: center;
}
/* One panel a bound, as many abreast as fit. A panel is never narrower than its text
   needs: 17rem holds a line of the note face and the longest of the usual evidence
   names whole (25 characters of the mono face in its chip), so nothing in a panel is
   squeezed into breaking. */
.site-case-bounds {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.site-case-bound,
.site-case-note {
  border: 1px solid var(--kpress-doc-border);
  font-family: var(--kpress-font-sans);
  font-weight: var(--site-font-weight-sans-light);
  min-inline-size: 0;
  padding: 0.7rem 0.9rem;
}
.site-case-note {
  margin-block-start: 1rem;
}
.kpress .site-case-value {
  font-size: 1.2em;
  margin-block: 0.2rem 0;
}
.site-case-decimal,
.site-case-same {
  color: var(--site-support-color);
  display: block;
  font-size: var(--site-font-size-note);
  font-variant-numeric: tabular-nums;
}
/* The recorded decimal in full, as many as 67 digits with no space among them: the one
   run on a record that has to break wherever its panel's line ends. */
.site-case-decimal {
  overflow-wrap: anywhere;
}
.kpress .site-case-same {
  margin-block: 0.2rem 0;
}
.site-case .site-detail {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  line-height: 1.45;
  margin-block: 0.5rem 0;
}
.site-case .site-detail dt {
  color: var(--kpress-doc-text);
  font-weight: var(--site-font-weight-sans-medium);
}
.site-case .site-detail dd {
  margin: 0 0 0.35rem;
}
.site-case-polynomial {
  font-size: var(--site-font-size-note);
}
.site-case-data {
  border-block-start: 1px solid var(--kpress-doc-border);
  font-family: var(--kpress-font-sans);
  font-weight: var(--site-font-weight-sans-light);
}
/* A long formula in a case file's prose scrolls in the prose, not the case popover's
   panel or the page, so the drawing, the head and the foot never pan sideways on a
   phone. */
.site-case-prose {
  border-block-start: 1px solid var(--kpress-doc-border);
  margin-block-start: 2rem;
  overflow-x: auto;
}
.kpress .site-case-heading {
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-sans-base);
  font-weight: var(--site-font-weight-sans-medium);
  margin-block: 1.5rem 0.5rem;
  text-align: start;
}
.site-case-results,
.site-case-list {
  font-size: var(--site-font-size-note);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-case-list li {
  margin-block: 0.25rem;
}
.kpress-prose :is(.site-case-results, .site-case-list) > li {
  padding-inline-start: 0;
}
.kpress-prose :is(.site-case-results, .site-case-list) > li::before {
  content: none;
}
.site-case-result {
  border-block-start: 1px solid var(--kpress-doc-border);
  padding-block: 0.6rem;
}
.kpress .site-case-result p {
  margin-block: 0 0.3rem;
}
.site-case-result-head .site-chip {
  margin-inline-start: 0.2rem;
}
.site-case .site-credit,
.site-case-empty {
  color: var(--site-support-color);
}
.site-case-links {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--site-font-size-note);
  gap: 0.4rem 1.5rem;
  margin-block: 1.2rem 0;
}
.kpress .site-case details {
  border: 0;
  margin: 0.3rem 0 0;
}
.kpress .site-case details > summary {
  display: inline-flex;
  font-size: var(--site-font-size-note);
  font-variant-caps: normal;
  letter-spacing: normal;
  padding: 0;
  text-transform: none;
}
.kpress .site-case details[open] summary {
  border-bottom: 0;
}
.kpress .site-case details > :not(summary) {
  padding: 0;
}
/* The index: every case as a small link, a proved case in the accent. */
.site-case-index {
  display: grid;
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  gap: 0.25rem;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  margin-block: 1.5rem;
}
.site-case-index[hidden] {
  display: none;
}
.kpress .site-case-index a {
  border: 1px solid var(--kpress-doc-border);
  color: var(--kpress-doc-muted);
  padding-block: 0.2rem;
  text-align: center;
  transition: var(--site-hover-transition);
}
.kpress .site-case-index a[data-status="proved"] {
  color: var(--kpress-doc-accent);
}
.kpress .site-case-index a:is(:hover, :focus-visible) {
  background: var(--site-wash);
  text-decoration: none;
}

/* A document page with a contents rail keeps the rail at the left edge but centres its
   reading column on the page once the pane is wide enough, so the text sits under the
   centred navigation rather than drifting left of it. The two outer tracks share the
   spare width: the rail's never drops below its own 15rem, so on a pane too narrow to
   centre, the column simply sits as close to centre as the rail allows. */
@container kpress-doc (min-width: 75rem) {
  .kpress .kpress-content-with-toc:has(.kpress-toc) {
    grid-template-columns:
      minmax(15rem, 1fr)
      min(calc(var(--kpress-measure) + 2 * var(--kpress-column-inset)), calc(100cqw - 20rem))
      minmax(0, 1fr);
    justify-content: stretch;
  }
  .kpress .kpress-content-with-toc:has(.kpress-toc) > .kpress-toc {
    grid-column: 1;
    inline-size: 15rem;
    justify-self: start;
  }
}

/* The contents rail is plain text: no frame, only the underlined Contents label, and
   entries that change colour on hover or when current rather than gaining a fill or
   a bar. */
.kpress .kpress-toc {
  border: 0;
  padding-inline: 0;
}
.kpress .kpress-toc a {
  border-left: 0;
  transition: var(--site-hover-transition);
}
.kpress .kpress-toc a:hover {
  background: none;
  color: var(--kpress-doc-text);
}
.kpress .kpress-toc a:is([data-active="true"], .active) {
  background: none;
  color: var(--kpress-doc-link);
}

/* ---------- The film (Visualize) ----------
   The Visualize page's film at full size: as wide as the window allows less the page
   gutters, but never so tall that it will not fit the window whole, at the video's own
   16:9, which the poster shares, so starting playback moves nothing. */
.site-page .site-film-frame {
  --site-film-width: min(100cqw - 2 * var(--site-wide-gutter), (100svh - 5rem) * 16 / 9, 120rem);
  inline-size: var(--site-film-width);
  margin-block: 1.5rem;
  margin-inline: calc((var(--site-film-width) - 100%) / -2);
}
/* The film opens its page, whose title is for a screen reader alone, so on screen it is
   the page's first block and brings no margin above, as a title brings none. */
@media screen {
  .site-page .site-visually-hidden:first-child + .site-film-frame {
    margin-block-start: 0;
  }
}
.site-page .site-film-frame .site-film {
  aspect-ratio: 16 / 9;
  background: var(--kpress-doc-bg);
  display: block;
  height: auto;
  width: 100%;
}
.site-page .site-film-frame figcaption,
.site-page .site-film-note {
  color: var(--site-support-color);
  font-family: var(--kpress-font-sans);
  font-size: var(--site-font-size-note);
  font-weight: var(--site-font-weight-sans-light);
  margin-inline: auto;
  max-inline-size: calc(var(--kpress-measure) + 2 * var(--kpress-column-inset));
  text-align: center;
}
.site-page .site-film-frame figcaption {
  margin-block-start: 0.6rem;
}