/* The server-rendered pages: Species, Rules, Census, About and the pages under them.
   Loaded after app.css, which holds the fonts, the colours, the masthead, the tab row and the page frame. Nothing here
   names a species: a portrait's colour and position come from the sprite sheet, as inline styles. */

main a {
  color: var(--ink);
  text-underline-offset: 2px;
}
main a:focus-visible,
main summary:focus-visible {
  outline: 3px solid var(--alert);
  outline-offset: 2px;
}

main h1 {
  margin: var(--title-gap) 0 var(--space-6);
  font-size: var(--text-title);
  line-height: 1.05;
}
main h2 {
  margin: var(--gap-section) 0 var(--gap-heading);
  font-size: var(--text-heading);
  line-height: 1.1;
}
main h2 small {
  font-family: var(--body);
  font-size: var(--text-body);
  color: var(--muted);
}
main h3 {
  margin: var(--gap-subsection) 0 var(--gap-label);
  font-size: var(--text-subheading);
  line-height: 1.15;
}
main p {
  max-width: var(--measure);
  margin: 0 0 var(--gap-block);
}
main .lede {
  color: var(--muted);
}
main input,
main select {
  min-height: var(--tap);
  padding: 0 var(--space-8);
  border: var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
main .none {
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
  color: var(--muted);
  max-width: none;
}
main code {
  overflow-wrap: anywhere;
}
main pre {
  max-width: var(--measure);
  margin: 0 0 var(--gap-block);
  padding: var(--card-pad);
  overflow-x: auto;
  border: var(--line);
  background: var(--panel);
  font-size: var(--text-data);
  line-height: 1.5;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.back {
  margin: 0;
}
/* Links to the pages under a section: a full-width row of boxes, as the tab row above it is. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-4) 0 var(--gap-under-tabs);
}
.subnav a {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: var(--line);
  background: var(--panel);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.subnav a[aria-current] {
  background: var(--ink);
  color: var(--paper);
}
@media (max-width: 767px) {
  .subnav {
    gap: var(--space-4);
  }
}

/* The census controls: a joined period switch and the order filter. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10) var(--space-16);
  margin: 0 0 var(--gap-block);
}
.seg {
  display: flex;
  flex: 1 1 auto;
  max-width: 380px;
}
.seg a {
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-10);
  border: var(--line);
  background: var(--paper);
  font-weight: 500;
  text-decoration: none;
}
.seg a + a {
  margin-left: -2px;
}
.seg a[aria-current] {
  background: var(--ink);
  color: var(--paper);
}
.filters .orderpick {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: var(--space-8);
  max-width: 400px;
  margin: 0 0 0 auto;
}
.filters .orderpick label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  font-weight: 600;
}
.filters .orderpick select {
  flex: 1 1 auto;
  font-weight: 400;
  min-width: 0;
  margin-left: var(--space-6);
}

/* A portrait: the drawing on its order's colour, standing where the island's portraits stand it. */
.mug {
  box-sizing: content-box;
  position: relative;
  display: block;
  aspect-ratio: 22 / 16;
  overflow: hidden;
  border: var(--line);
  background: var(--panel);
}
.mug img {
  position: absolute;
  /* Where the drawing stands in the frame, in percent of it (--x, --y and --w come with the picture). */
  left: calc(var(--x) * 1%);
  bottom: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
/* A portrait that carries its second frame rests on the first. While the pointer is over it (or its card, row or case) or
   its link has keyboard focus, the two swap, second first: 0.8s a round is 2.5 swaps a second, half a round to a frame,
   which is the island's idle fidget pace (about 2.2). Nothing is sized by the animation, so no layout moves. */
.mug .alt {
  opacity: 0;
}
@keyframes mug-first {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes mug-second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pen:has(a:focus-visible) .mug.flip img:not(.alt),
  .ranks li:has(a:focus-visible) .mug.flip img:not(.alt),
  ol.cases li:has(a:focus-visible) .mug.flip img:not(.alt) {
    animation: mug-first var(--dur-800) steps(1, end) infinite;
  }
  .pen:has(a:focus-visible) .mug.flip .alt,
  .ranks li:has(a:focus-visible) .mug.flip .alt,
  ol.cases li:has(a:focus-visible) .mug.flip .alt {
    animation: mug-second var(--dur-800) steps(1, end) infinite;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pen:hover .mug.flip img:not(.alt),
  .ranks li:hover .mug.flip img:not(.alt),
  ol.cases li:hover .mug.flip img:not(.alt),
  header > .mug.flip:hover img:not(.alt) {
    animation: mug-first var(--dur-800) steps(1, end) infinite;
  }
  .pen:hover .mug.flip .alt,
  .ranks li:hover .mug.flip .alt,
  ol.cases li:hover .mug.flip .alt,
  header > .mug.flip:hover .alt {
    animation: mug-second var(--dur-800) steps(1, end) infinite;
  }
}

/* Species index. The jump row: one box a order, three across on a phone and a tablet, six across on a desktop. */
nav.orders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
}
nav.orders a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 var(--space-6);
  padding: var(--space-8) var(--space-10);
  border: var(--line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
nav.orders .ord {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: clamp(var(--text-18), 4.8vw, var(--text-22));
  line-height: 1.1;
  overflow-wrap: anywhere;
}
nav.orders .gloss {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.3;
}
nav.orders .ct {
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-label);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  nav.orders {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* Reading a card: a dashed sample card with numbered parts, beside the list that names them. */
.reading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-12) var(--space-16);
  margin: var(--gap-lead) 0 0;
  padding: var(--space-14) 0 var(--space-16);
  border-top: var(--line-soft);
  border-bottom: var(--line-soft);
}
.reading > div {
  flex: 1 1 190px;
  min-width: 0;
}
.reading h2 {
  margin: 0 0 var(--gap-label);
}
.reading ol {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  font-size: var(--text-compact);
  list-style: none;
}
.reading li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-10);
}
.reading .fine {
  margin: var(--space-10) 0 0;
}
.reading .pen.sample {
  flex: 0 0 150px;
  border-style: dashed;
}
.pen.sample .mug {
  border-bottom-style: dashed;
}
.pin {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--data);
  font-size: var(--text-11);
  font-weight: 600;
  line-height: 1;
}
/* The numbers stand outside the sample card, at its left, each level with the middle of the part it names. */
.reading .pen.sample {
  margin-left: 30px;
}
.pen.sample [data-part] {
  position: relative;
}
.pen.sample [data-part] .pin {
  position: absolute;
  top: 50%;
  left: -28px;
  transform: translateY(-50%);
  font-style: normal;
}
/* In the sample each text part runs the full width of the card, its space inside it, so its marking box does too. */
.pen.sample h3 {
  margin: 0;
  padding: var(--space-8) var(--space-10) var(--space-2);
}
.pen.sample p {
  margin: 0;
  padding: var(--space-2) var(--space-10) var(--space-8);
}
/* Pointing at a part of the card marks its line in the list, and pointing at a line marks its part of the card. */
.reading:has(li[data-part="1"]:hover) .sample [data-part="1"]::after,
.reading:has(li[data-part="2"]:hover) .sample [data-part="2"]::after,
.reading:has(li[data-part="3"]:hover) .sample [data-part="3"]::after,
.reading:has(li[data-part="4"]:hover) .sample [data-part="4"]::after,
.reading .sample [data-part]:hover::after {
  /* A frame laid over the part, on its own edge: above the picture, which would cover an outline drawn inside. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-2);
  border: 2px solid var(--alert);
  pointer-events: none;
}
.reading:has(.sample [data-part="1"]:hover) li[data-part="1"],
.reading:has(.sample [data-part="2"]:hover) li[data-part="2"],
.reading:has(.sample [data-part="3"]:hover) li[data-part="3"],
.reading:has(.sample [data-part="4"]:hover) li[data-part="4"],
.reading li[data-part]:hover {
  background: var(--panel);
  outline: 2px solid var(--alert);
  outline-offset: 2px;
}
.reading:has([data-part="1"]:hover) [data-part="1"] .pin,
.reading:has([data-part="2"]:hover) [data-part="2"] .pin,
.reading:has([data-part="3"]:hover) [data-part="3"] .pin,
.reading:has([data-part="4"]:hover) [data-part="4"] .pin {
  background: var(--alert);
}
/* An order: its name and gloss on a heavy rule, what it holds under it, then its cards. */
.order .headrow {
  padding-bottom: var(--space-6);
  border-bottom: var(--line);
}
.pens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--card-gap);
}
.pen {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  border: var(--line);
  background: var(--panel);
}
.pen .shot {
  position: relative;
}
/* The card stretches and so does the colour behind the drawing. The drawing stands in a frame of whole pixels centred on
   it, 6 to a frame pixel at the narrowest card (132 by 96) and more as the card grows. */
.pen .mug {
  --u: 6px;
  border-width: 0 0 2px;
}
.pen .mug img {
  left: calc(50% + (var(--x) * 0.22 - 11) * var(--u));
  bottom: calc(50% + (var(--y) * 0.16 - 8) * var(--u));
  width: calc(var(--w) * 0.22 * var(--u));
}
@container (min-width: 176px) {
  .pen .mug {
    --u: 8px;
  }
}
@container (min-width: 220px) {
  .pen .mug {
    --u: 10px;
  }
}
@container (min-width: 264px) {
  .pen .mug {
    --u: 12px;
  }
}
.pen h3 {
  margin: var(--space-8) var(--space-10) 0;
  font-family: var(--body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.pen .more {
  margin: auto var(--space-10) var(--space-4);
}
.pen p {
  margin: 0 var(--space-10) var(--space-10);
  font-size: var(--text-compact);
}
main .latin {
  font-family: var(--display);
  font-style: italic;
}
.pen.support {
  border-style: dashed;
}
.pen.support .mug {
  border-bottom-style: dashed;
}
.pen .latin {
  margin-bottom: var(--space-6);
  font-size: var(--text-20);
  line-height: 1.15;
}

/* One species: the field-guide plate. */
.plate header {
  display: flow-root;
  margin: var(--space-4) 0 var(--gap-lead);
}
.plate header > .mug {
  float: left;
  width: var(--mug-l);
  margin: 0 var(--space-14) var(--space-8) 0;
}
@media (min-width: 768px) {
  .plate header > .mug {
    width: var(--mug-xxl);
  }
}
.plate h1 {
  margin: 0;
  font-family: var(--body);
  font-size: var(--text-26);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.plate .latin {
  margin: var(--space-2) 0 var(--space-6);
  font-size: clamp(var(--text-26), 7vw, var(--text-34));
  line-height: 1.05;
}
.plate pre.ua {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Stamps are solid filled tags, one fill per kind, tuned per theme. */
:root {
  --stamp-kept-bg: var(--ok);
  --stamp-kept-fg: var(--paper);
  --stamp-lapsed-bg: var(--alert);
  --stamp-lapsed-fg: var(--paper);
  --stamp-wild-bg: var(--if-light, #7f1230) var(--if-dark, #b8324f);
  --stamp-wild-fg: #ffffff;
  --stamp-untested-bg: var(--verdict-none-bg);
  --stamp-untested-fg: var(--verdict-none-fg);
  --stamp-errand-bg: var(--if-light, #2563eb) var(--if-dark, #4f8cff);
  --stamp-errand-fg: var(--paper);
  --verdict-lawful-good-bg: var(--if-light, #3f8f1f) var(--if-dark, #4a9e28);
  --verdict-lawful-good-fg: #050a02;
  --verdict-neutral-good-bg: var(--if-light, #86c440) var(--if-dark, #8fd04a);
  --verdict-neutral-good-fg: #10200a;
  --verdict-chaotic-good-bg: var(--if-light, #cfe58a) var(--if-dark, #d3ec95);
  --verdict-chaotic-good-fg: #16230a;
  --verdict-lawful-neutral-bg: var(--if-light, #6f675b) var(--if-dark, #7c7467);
  --verdict-lawful-neutral-fg: #ffffff;
  --verdict-neutral-neutral-bg: var(--if-light, #a39a8c) var(--if-dark, #a8a092);
  --verdict-neutral-neutral-fg: var(--if-light, #1c1812) var(--if-dark, #14110d);
  --verdict-chaotic-neutral-bg: var(--if-light, #d6cfc2) var(--if-dark, #d9d3c7);
  --verdict-chaotic-neutral-fg: var(--if-light, #1c1812) var(--if-dark, #14110d);
  --verdict-lawful-evil-bg: var(--if-light, #4a1f8a) var(--if-dark, #6a3fc0);
  --verdict-lawful-evil-fg: #ffffff;
  --verdict-neutral-evil-bg: var(--if-light, #7c4dcc) var(--if-dark, #9a76e6);
  --verdict-neutral-evil-fg: var(--if-light, #ffffff) var(--if-dark, #0b0618);
  --verdict-chaotic-evil-bg: var(--if-light, #c2a8ee) var(--if-dark, #cdb6f5);
  --verdict-chaotic-evil-fg: #1a0f33;
  --verdict-none-bg: var(--if-light, #d5dbe4) var(--if-dark, #2c3445);
  --verdict-none-fg: var(--if-light, #333c49) var(--if-dark, #c4cbd8);
}
.tag.stamp {
  border-color: var(--stamp-bg);
  background: var(--stamp-bg);
  color: var(--stamp-fg);
}
.stamp-kept {
  --stamp-bg: var(--stamp-kept-bg);
  --stamp-fg: var(--stamp-kept-fg);
}
.stamp-lapsed {
  --stamp-bg: var(--stamp-lapsed-bg);
  --stamp-fg: var(--stamp-lapsed-fg);
}
.stamp-wild {
  --stamp-bg: var(--stamp-wild-bg);
  --stamp-fg: var(--stamp-wild-fg);
}
.stamp-untested {
  --stamp-bg: var(--stamp-untested-bg);
  --stamp-fg: var(--stamp-untested-fg);
}
.stamp-errand {
  --stamp-bg: var(--stamp-errand-bg);
  --stamp-fg: var(--stamp-errand-fg);
}
/* The alignment chip is the tag filled with its own label's colour: Good in green, Neutral in stone, Evil in violet,
   deep for Lawful and pale for Chaotic. The words stay, so colour is never the only signal. */
.tag.verdict {
  border-color: var(--verdict-bg);
  background: var(--verdict-bg);
  color: var(--verdict-fg);
}
.verdict-lawful-good {
  --verdict-bg: var(--verdict-lawful-good-bg);
  --verdict-fg: var(--verdict-lawful-good-fg);
}
.verdict-neutral-good {
  --verdict-bg: var(--verdict-neutral-good-bg);
  --verdict-fg: var(--verdict-neutral-good-fg);
}
.verdict-chaotic-good {
  --verdict-bg: var(--verdict-chaotic-good-bg);
  --verdict-fg: var(--verdict-chaotic-good-fg);
}
.verdict-lawful-neutral {
  --verdict-bg: var(--verdict-lawful-neutral-bg);
  --verdict-fg: var(--verdict-lawful-neutral-fg);
}
.verdict-neutral-neutral {
  --verdict-bg: var(--verdict-neutral-neutral-bg);
  --verdict-fg: var(--verdict-neutral-neutral-fg);
}
.verdict-chaotic-neutral {
  --verdict-bg: var(--verdict-chaotic-neutral-bg);
  --verdict-fg: var(--verdict-chaotic-neutral-fg);
}
.verdict-lawful-evil {
  --verdict-bg: var(--verdict-lawful-evil-bg);
  --verdict-fg: var(--verdict-lawful-evil-fg);
}
.verdict-neutral-evil {
  --verdict-bg: var(--verdict-neutral-evil-bg);
  --verdict-fg: var(--verdict-neutral-evil-fg);
}
.verdict-chaotic-evil {
  --verdict-bg: var(--verdict-chaotic-evil-bg);
  --verdict-fg: var(--verdict-chaotic-evil-fg);
}
.verdict-none {
  --verdict-bg: var(--verdict-none-bg);
  --verdict-fg: var(--verdict-none-fg);
}
/* Two columns from 760px: the paired charts, the paired records, the two code blocks. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--gap-pair);
}
@media (min-width: 768px) {
  .cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* On a species page each pair starts at the top of its column. */
.plate .cols {
  align-items: start;
}
/* The bold line over a code block. A figure caption is .cap, in app.css. */
.codecap {
  margin: 0 0 var(--space-4);
  font-weight: 600;
}
.plate .drawing {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}
/* The two things the header says about a species, each a labelled panel: its stamp, and its alignment. */
.lab,
.plot .edge,
.supportpage .cadence,
.rules > li.grp,
.notice .ncap,
.ranks-head,
.almanac strong,
.reading h2,
.notes h2 {
  font: 600 var(--text-caps) / 1.3 var(--data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reading h2,
.notes h2 {
  font-size: var(--text-label);
}
.lab {
  color: var(--muted);
}
.standing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  min-width: min(320px, 100%);
  margin: var(--space-14) 0 0;
  padding-top: var(--space-12);
  border-top: var(--line);
}
.standing > div {
  display: grid;
  flex: 1 1 100%;
  align-content: start;
  gap: var(--gap-label);
  min-width: 0;
}
@media (min-width: 768px) {
  .standing > div {
    flex: 1 1 220px;
  }
  .standing > div:last-child {
    flex: 1.4 1 260px;
  }
}
.standing dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-10);
}
.standing dd {
  margin: 0;
  font-size: var(--text-compact);
}
.standing .tag {
  padding: 1px var(--space-8);
  font-size: var(--text-small);
  line-height: 1.4;
}
/* Each is the first thing in a grid cell, where the margin adds to the 10 under the block above: 20 in effect. */
.plate h3 {
  margin-top: var(--space-10);
}
/* A footnote mark after a heading or a line, and the notes it points to at the foot of the page. */
.noteref {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-4);
  color: var(--muted);
  font-family: var(--data);
  font-size: max(0.75em, 12px);
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  vertical-align: super;
}
.notes {
  margin-top: var(--gap-section);
  padding-top: var(--space-12);
  border-top: var(--line-soft);
}
.notes h2 {
  margin: 0 0 var(--gap-heading);
}
.notes :is(ol, ul) {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.45;
  list-style: none;
}
.notes li > span:last-child {
  max-width: var(--measure);
}
.notes li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: var(--space-6);
  scroll-margin-top: 72px;
}
.notes.plain li {
  grid-template-columns: 1.2em minmax(0, 1fr);
}
.notes .mk {
  color: var(--ink);
  font-family: var(--data);
}
/* The kinds of session a page counts: one panel each, three across from a tablet up. */
.kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 var(--gap-block);
  padding: 0;
  border: var(--line);
  background: var(--soft);
  list-style: none;
}
.kinds li {
  display: grid;
  align-content: start;
  gap: var(--gap-label);
  padding: var(--card-pad);
  background: var(--panel);
  font-size: var(--text-compact);
}
.kind {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
}
.kinds .swatch.ok {
  background: var(--ink);
}
.kinds .swatch.plain {
  background: var(--muted);
}
.kinds .swatch.fail {
  border: 1px dashed var(--muted);
}
@media (min-width: 768px) {
  .kinds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.chart .band {
  fill: var(--muted);
  fill-opacity: 0.4;
}
.chart .band[hidden] {
  display: none;
}
.chart svg.bars[tabindex] {
  cursor: crosshair;
  touch-action: pan-y;
  outline-offset: var(--space-4);
}
.plate .did .cols > section {
  min-width: 0;
}

/* The summary strip: big figures, the Rules ledger's number over a small caption. */
.sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
  margin: 0 0 var(--gap-lead);
  padding: 0;
  list-style: none;
}
.sum li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
}
.sum .n {
  font-family: var(--data);
  font-size: var(--text-figure);
  font-weight: 600;
  line-height: 1;
}
.sum .n.word {
  padding-right: var(--space-24);
  font-size: var(--text-22);
  line-height: 1.15;
}
/* Who it is: one card. Who runs it, how the real one is told, what Passport Control does, what became of the claims. */
.opcard {
  border: var(--line);
  background: var(--panel);
}
.op-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10) var(--space-16);
  padding: var(--card-pad);
}
.op-head .init {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--line);
  background: var(--paper);
  font-family: var(--display);
  font-size: var(--text-30);
  line-height: 1;
}
.who-name {
  flex: 1 1 200px;
  min-width: 0;
}
.who-name p {
  margin: 0;
}
.who-name .name {
  font-size: var(--text-20);
  font-weight: 600;
  line-height: 1.2;
}
.who-name .sub {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-compact);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.chips .tag {
  border-color: var(--ink);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text-small);
  font-weight: 400;
  padding: 1px var(--space-8);
  text-decoration: none;
  text-transform: none;
}
.chips .tag.plain {
  border-color: var(--soft);
  color: var(--muted);
}
.opcard .what {
  max-width: var(--measure);
  margin: 0;
  padding: 0 var(--space-14) var(--space-12);
  font-size: var(--text-body);
  line-height: 1.45;
  text-wrap: pretty;
}
.panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border-top: var(--line);
  background: var(--soft);
}
.panel {
  display: grid;
  align-content: start;
  gap: var(--gap-label);
  padding: var(--card-pad);
  background: var(--panel);
  font-size: var(--text-compact);
  line-height: 1.45;
}
.panel p {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--text-body);
}
.panel div > * + * {
  margin-top: var(--space-8);
}
.checks {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: var(--line-thin);
  background: var(--soft);
  list-style: none;
}
.checks li {
  padding: var(--row-pad);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--text-small);
}
.checks strong {
  margin-right: var(--space-10);
  color: var(--ink);
}
.claims {
  display: grid;
  gap: var(--gap-label);
  padding: var(--card-pad);
  border-top: var(--line);
}
.claims .headrow {
  margin: 0;
}
.claims .lab {
  margin: 0;
}
.claims .bar {
  height: 12px;
}
.bar .k.wait {
  background: var(--soft);
}
.claims ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.claims li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-compact);
}
.claims .n {
  font-family: var(--data);
  font-size: var(--text-small);
}
.claims .swatch.ok {
  background: var(--ok);
}
.claims .swatch.plain {
  background: var(--muted);
}
.claims .swatch.wait {
  background: var(--soft);
}
.claims .swatch.fail {
  background: var(--alert);
}
@media (min-width: 768px) {
  .panels,
  .claims ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panels > .panel:only-child {
    grid-column: 1 / -1;
  }
}
.faq-row:not(:has(.faq-icon)) .faq-body {
  padding-left: var(--space-14);
}
.faq-body pre {
  max-width: none;
}
.notice .faq {
  margin: 0;
  border-width: 2px 0 0;
}
.notice .faq-body pre {
  background: var(--paper);
}
/* Bar charts, each with its figures as a table beside it. (.chart, .bars and the axis live in app.css) */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
  margin: var(--space-6) 0 0;
  font-size: var(--text-small);
}
.legend .key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-6);
  vertical-align: -1px;
}
.key.bar-a {
  background: var(--ink);
}
.key.bar-b {
  background: var(--muted);
}
/* The inline fold: every details that is not a row fold (.faq-row) or the i hint (.hint). A chevron leads the title. */
main details:not(.hint, .faq-row) > summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--tap);
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  text-underline-offset: 2px;
}
main details:not(.hint, .faq-row) > summary::-webkit-details-marker {
  display: none;
}
main details:not(.hint, .faq-row) > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: var(--space-2);
  border-right: var(--line);
  border-top: var(--line);
  transform: rotate(45deg);
  transition: transform var(--dur-150);
}
main details[open]:not(.hint, .faq-row) > summary::before {
  transform: rotate(135deg);
}
main details:not(.hint, .faq-row) > summary:hover,
main details:not(.hint, .faq-row) > summary:focus-visible {
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  main details:not(.hint, .faq-row) > summary::before {
    transition: none;
  }
}

/* Tables. Wide ones scroll inside their own box, so the page never does. */
.scroll {
  max-width: 100%;
  margin: 0 0 var(--gap-block);
  overflow-x: auto;
  border: var(--line);
  background: var(--panel);
  container-type: inline-size;
}
.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-compact);
  line-height: 1.35;
}
/* A caption stays the width of the box and in view while a wide table scrolls under it. */
.data caption {
  position: sticky;
  left: 0;
  max-width: 100cqw;
  padding: var(--space-8) var(--space-10);
  caption-side: top;
  color: var(--muted);
  font-size: var(--text-small);
  text-align: left;
}
.data th,
.data td {
  padding: var(--cell-pad);
  border-top: var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.data thead th {
  border-top: 0;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
  vertical-align: bottom;
}
.data tbody th {
  font-weight: 400;
}
.data .fig {
  font-family: var(--data);
  font-size: var(--text-small);
  text-align: right;
  white-space: nowrap;
}
/* A table of three columns or fewer folds its figure headings to fit a narrow screen, so both
   figures stay in view. A wider one keeps them on one line and scrolls. */
.data:not(:has(thead th:nth-child(4))) .fig {
  white-space: normal;
}
/* A table of sentences scrolls on a narrow screen. Folded to fit, it runs to a word a line. */
.data .sub {
  display: block;
  padding-left: var(--space-16);
  color: var(--muted);
}
/* D2: this also hits section.who on the species page, making the whole section weight 600. Left as it is. */
.who {
  font-weight: 600;
}
.who i {
  font-weight: 400;
  white-space: nowrap;
}

/* Ranked lists: place, places moved, portrait, name over Latin name, a figure and a stamp. */
.ranks,
.ranks-head {
  --thumb: calc(var(--mug-s) + 4px);
}
@media (min-width: 768px) {
  .ranks,
  .ranks-head {
    --thumb: calc(var(--mug-m) + 4px);
  }
}
.ranks {
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  border: var(--line);
  background: var(--panel);
}
.ranks li {
  display: grid;
  grid-template-columns: 40px var(--thumb) minmax(0, 1fr) 96px 100px;
  grid-template-areas: "rk pic nm ct st" "mv pic nm ct st";
  gap: 0 var(--space-8);
  align-items: center;
  padding: var(--row-pad);
}
.ranks li + li {
  border-top: var(--line-soft);
}
.ranks .rk {
  grid-area: rk;
  font-family: var(--data);
  font-weight: 600;
  text-align: right;
}
.ranks .mv {
  grid-area: mv;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-label);
}
.ranks .mv .up {
  color: var(--ok);
}
.ranks .mv .down {
  color: var(--alert);
}
.ranks .pic {
  grid-area: pic;
}
.ranks .pic .mug {
  width: calc(var(--thumb) - 4px);
}
.ranks .nm {
  grid-area: nm;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-8);
}
.ranks .nm a {
  text-decoration: none;
}
.ranks .nm a:hover {
  text-decoration: underline;
}
.ranks .nm i {
  display: inline;
  font-weight: 400;
  font-size: var(--text-20);
  line-height: 1.1;
}
.ranks .split {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 400;
  flex: 1 0 100%;
}
.ranks .split .l {
  display: block;
}
.ranks .ct {
  grid-area: ct;
  justify-self: end;
  font-family: var(--data);
  font-weight: 600;
}
.ranks .st {
  grid-area: st;
  justify-self: end;
}
.ranks.no-mv li {
  grid-template-columns: 26px var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas: "rk pic nm ct" "rk pic nm st";
}
.ranks.no-rk.no-mv li {
  grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas: "pic nm ct" "pic nm st";
}
.ranks.catches .ct,
.ranks.catches .ct time {
  color: var(--muted);
  font-weight: 400;
  text-align: right;
}
@media (min-width: 768px) {
  .ranks.no-mv li {
    grid-template-columns: 30px var(--thumb) minmax(0, 1fr) 90px 100px;
    grid-template-areas: "rk pic nm ct st";
  }
  .ranks.no-rk.no-mv li {
    grid-template-columns: var(--thumb) minmax(0, 1fr) auto auto;
    grid-template-areas: "pic nm ct st";
  }
}

/* A list of claims: who it said it was, and what became of it. */
.rows {
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  border: var(--line);
  background: var(--panel);
}
.rows li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--row-pad);
}
.rows li + li {
  border-top: var(--line-soft);
}
.imps .claim {
  display: block;
  font-size: var(--text-body);
}
.imps .claim > span {
  display: block;
  color: var(--muted);
  font-size: var(--text-compact);
}
.imps .fate {
  max-width: 46%;
  font-size: var(--text-small);
  text-align: right;
}
.imps .fate time {
  display: block;
  color: var(--muted);
}

/* The stamps and what each means. */

/* robots.txt, grouped, with the experiments in the same panel style. */
.rules code {
  grid-column: 1 / -1;
  font-size: var(--text-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.rules .tal {
  align-self: center;
  font-family: var(--data);
  font-size: var(--text-data);
  text-align: right;
}
.rules .means {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-compact);
}
.rules > li.plain {
  padding: var(--space-4) var(--space-14);
  border-top: 0;
  color: var(--muted);
}
.rules > li.plain code {
  grid-column: 1;
  font-weight: 400;
}
.rules > li.plain > .tal {
  justify-self: end;
}
.rules > li > details {
  grid-column: 1 / -1;
}
.rules > li.served {
  display: block;
}
.rules .served pre {
  margin: var(--space-8) 0 var(--space-4);
}
.guests {
  display: grid;
  margin: var(--space-8) 0 var(--space-2);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-4) var(--space-16);
}
.guests li {
  color: var(--ink);
  font-family: var(--data);
  font-size: var(--text-data);
}
.guests a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.guests .mug {
  flex: none;
  width: var(--mug-s);
}

.lkey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-16);
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
}
.lkey .lg {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.lkey .sw {
  flex: none;
  width: 10px;
  height: 10px;
  border: var(--line);
}
.sw.k {
  background: var(--ok);
}
.sw.b {
  background: var(--alert);
}

/* A counted row and an experiment: the line on the left, one block on the right, the fold underneath. */
.rules .sent {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
}
.rules .sent span + span {
  margin-left: var(--space-14);
}
/* The notices. */
.notice {
  display: flex;
  flex-direction: column;
  border: var(--line);
  background: var(--panel);
}
.notice h2 {
  margin: 0;
  font-family: var(--data);
  font-size: var(--text-18);
  font-weight: 600;
}
.notice h2 code {
  font: inherit;
}
.notice .path {
  margin: 0;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-data);
}
.notice p {
  margin: 0 0 var(--space-6);
}
.notice .none {
  background: var(--paper);
}
.readers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.readers li {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  border: var(--line-thin);
  background: var(--paper);
}
.readers li.unverified {
  border-style: dashed;
}
.readers a {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  text-decoration: none;
}
.readers .mug {
  flex: none;
  width: var(--mug-s);
  margin: 0;
}
.readers .n {
  color: var(--ink);
  font-family: var(--data);
  font-size: var(--text-data);
  font-weight: 600;
}
/* The alignment chart: a box of nine squares tinted with their verdict colours, and one small round dot per species
   standing where its scores put it. Dots that land close overlap as drawn; the one pointed at or chosen comes on top. */
.plot-frame {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  grid-template-rows: auto auto;
  gap: var(--space-6) var(--space-8);
  margin-bottom: var(--gap-lead);
}
.axis-cap {
  max-width: none;
  margin: 0;
  font-size: var(--text-small);
  text-align: center;
}
.axis-cap span {
  color: var(--muted);
}
.axis-cap-x {
  grid-column: 2;
}
/* The Good meaning runs up the left edge. It is sized by the chart's height, not its own length, so a long line wraps
   into a second column instead of stretching the chart. */
.axis-cap-y {
  grid-column: 1;
  grid-row: 2;
  contain: size;
  width: 1.3em;
  justify-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(var(--text-12), 3.3vw, var(--text-14));
}
.plot {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: clamp(350px, min(62vw, 100dvh - 190px), 600px);
  border: var(--line);
  background: var(--panel);
}
.plot .cell {
  border-right: var(--line-soft);
  border-bottom: var(--line-soft);
  background: color-mix(in srgb, var(--verdict-bg) 8%, var(--panel));
}
.plot .cell:nth-child(3n) {
  border-right: 0;
}
.plot .cell:nth-child(n + 7) {
  border-bottom: 0;
}
.plot .edge {
  position: absolute;
  color: var(--muted);
  pointer-events: none;
}
.plot .edge-col {
  top: var(--space-6);
  transform: translateX(-50%);
}
.plot .edge-row {
  left: var(--space-6);
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
}
.plot .dots {
  position: absolute;
  inset: 26px;
  pointer-events: none;
}
/* Opening a square (script only): the square's background is the click target, so the dots layer lets clicks through
   and the dots themselves take them back. An empty square is not given the pointer or the ring. */
.plot .cell[role="button"] {
  cursor: pointer;
}
.plot .cell[role="button"]:focus-visible {
  outline: 3px solid var(--alert);
  outline-offset: -3px;
}
.plot[data-zoom] .cell,
.plot[data-zoom] .edge {
  display: none;
}
.plot[data-zoom] .cell.open {
  display: block;
  position: absolute;
  inset: 0;
  border: 0;
  cursor: default;
}
.dot[hidden] {
  display: none;
}
/* The row above the chart is there from the start and never changes size: the Back button and the hint only swap
   visibility, so they keep their room. */
.zoomhead {
  margin-top: 0;
}
.zoomhead button {
  visibility: hidden;
}
.zoomhead.open button {
  visibility: visible;
}
.zoomhead.open .zoomhint {
  visibility: hidden;
}
.zoomhead .zoomhint {
  margin-left: var(--space-12);
}
/* The portrait grows with the width, 30px to 44px, in a ring of ink. The one chosen takes the alert ring. */
.dot {
  position: absolute;
  z-index: var(--z-2);
  display: block;
  width: calc(var(--mug-xs) + 4px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: var(--line);
  background: var(--paper);
  text-decoration: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .dot {
    width: calc(var(--mug-s) + 4px);
  }
}
.dot .mug {
  width: 100%;
  border: 0;
}
.dot:hover,
.dot:focus-visible,
.dot.on {
  z-index: var(--z-5);
}
.dot.on {
  border-color: var(--alert);
  box-shadow: 3px 3px 0 var(--ink);
}
/* The census ledger: a header row over the rows, a stats hint beside each count, and a fold for the stamps. */
.ranks-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  white-space: nowrap;
}
.ranks .ct {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
/* About: each section is a collapsible row in one panel, as the Rules box is. The id is on the details element. */
.faq-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--space-6);
  min-height: var(--tap);
}
.faq-all {
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.faq-all[hidden] {
  display: none;
}
.faq-all:focus-visible {
  outline: 3px solid var(--alert);
  outline-offset: 2px;
}
.faq {
  margin: 0 0 var(--gap-block);
  border: var(--line);
  background: var(--panel);
}
.faq-row {
  border-top: var(--line);
  scroll-margin-top: 12px;
}
.faq-row:first-child {
  border-top: 0;
}
.faq-row > summary {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  min-height: 0;
  padding: var(--row-pad);
  font-weight: 400;
  text-decoration: none;
  list-style: none;
}
.faq-row > summary::-webkit-details-marker {
  display: none;
}
.faq-row > summary:focus-visible {
  outline: 3px solid var(--alert);
  outline-offset: -3px;
}
.faq-row > summary :is(h2, h3) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-card-title);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.faq-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--line);
  background: var(--panel);
}
.faq-icon svg {
  width: 100%;
  height: 100%;
  padding: 0;
}
.faq-chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin: 0 var(--space-4) var(--space-4) 0;
  border-right: var(--line);
  border-bottom: var(--line);
  transform: rotate(45deg);
  transition: transform var(--dur-150);
}
.faq-row[open] > summary .faq-chev {
  margin-bottom: 0;
  margin-top: var(--space-6);
  transform: rotate(225deg);
}
.faq-body {
  padding: var(--space-2) var(--space-14) var(--space-12) 68px;
}
.faq-body > :first-child {
  margin-top: 0;
}
.faq-body > :last-child {
  margin-bottom: 0;
}
.faq-body h3 {
  margin: var(--gap-subsection) 0 var(--gap-label);
  font-size: var(--text-20);
}
@media (max-width: 767px) {
  .faq-row > summary {
    gap: var(--space-10);
    padding: var(--space-8) var(--space-10);
  }
  .faq-row > summary :is(h2, h3) {
    font-size: var(--text-19);
  }
  .faq-icon {
    width: 32px;
    height: 32px;
  }
  .faq-icon svg {
    padding: var(--space-2);
  }
  .faq-body {
    padding: var(--space-2) var(--space-10) var(--space-12);
  }
  .faq-row:not(:has(.faq-icon)) .faq-body {
    padding-left: var(--space-10);
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-chev {
    transition: none;
  }
}
/* About, inside the rows: cards in a grid, numbered steps, status rows, labelled rows, and the almanac panel. One
   column on a phone (under 768px); two across a tablet (768 to 1023px); three across a desktop (1024px and up). */
main .almanac {
  max-width: none;
  margin: 0 0 var(--gap-block);
  padding: var(--row-pad);
  /* The box stays full width and its sentences stop at the measure. */
  padding-right: max(var(--space-14), calc(100% - var(--measure) - var(--space-14)));
  border: var(--line-dashed);
  background: var(--panel);
}
.almanac strong {
  margin-right: var(--space-6);
}
main .about-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
}
.about-card {
  min-width: 0;
  margin: 0;
  padding: var(--card-pad);
  border: var(--line);
  background: var(--paper);
}
.about-card p {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.45;
}
.about-card p + p,
.about-card blockquote {
  margin-top: var(--space-8);
}
.about-card blockquote {
  margin-right: 0;
  margin-left: 0;
  padding: var(--card-pad);
  border: var(--line-dashed);
  font-family: var(--data);
  font-size: var(--text-data);
  line-height: 1.5;
}
.about-card blockquote p {
  font-size: inherit;
}
.about-card p.about-name {
  font-size: var(--text-card-title);
  line-height: 1.1;
}
.about-name a {
  text-decoration: none;
}
.about-name .gloss {
  color: var(--muted);
  font-size: var(--text-body);
}
.about-card p.about-name + p {
  margin-top: var(--space-6);
}
.faq-body .about-note {
  color: var(--muted);
}
.about-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  max-width: var(--measure);
  margin: 0 0 var(--gap-block);
}
.about-lead p {
  margin: 0;
}
.about-lead > .mug {
  width: var(--mug-l);
}
main .about-steps {
  display: grid;
  gap: var(--space-10);
  margin: 0 0 var(--gap-block);
  padding: 0;
  counter-reset: step;
  list-style: none;
  max-width: var(--measure);
}
.about-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--space-12);
  counter-increment: step;
}
.about-steps li::before,
.supportpage .spend li::before,
.sendpage .steps li::before {
  content: counter(step);
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--data);
  font-size: var(--text-data);
  font-weight: 600;
}
.about-steps p {
  margin: 0;
}
main .about-status,
main .about-rows {
  display: grid;
  gap: 0;
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  border: var(--line);
  background: var(--paper);
}
.about-status li,
.about-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-16);
  align-items: start;
  padding: var(--row-pad);
  font-size: var(--text-compact);
  line-height: 1.45;
}
.about-status li + li,
.about-rows li + li {
  border-top: var(--line-soft);
}
.about-status .tag {
  justify-self: start;
}
.about-status .tag.dim {
  color: var(--muted);
}
.about-lab {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}
.about-flag {
  display: block;
  margin-bottom: var(--space-6);
}
.about-card p.about-title {
  font-weight: 600;
}
.about-card p.about-title + p {
  margin-top: var(--space-6);
}
.about-card .chips {
  margin-top: var(--space-8);
}
.about-card .chips .tag.plain {
  border-color: var(--ink);
}
.about-frames {
  display: flex;
  gap: var(--space-8);
}
.about-frames figure {
  margin: 0;
}
.about-frames .mug {
  width: var(--mug-xl);
}
.about-frames figcaption {
  margin-top: var(--space-4);
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-label);
}
.about-lead:has(.about-frames) {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-14) var(--space-20);
  align-items: start;
}
@media (min-width: 768px) {
  .about-cards.pair,
  .about-cards.experiments,
  .about-cards.ordercards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-card.wide {
    grid-column: 1 / -1;
  }
  .about-status li,
  .about-rows li {
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  }
}
@media (min-width: 768px) {
  .about-lead:has(.mug) {
    grid-template-columns: calc(var(--mug-xxl) + 4px) minmax(0, 1fr);
    gap: var(--space-14) var(--space-20);
    align-items: start;
  }
  .about-lead > .mug {
    width: var(--mug-xxl);
  }
  .about-lead:has(.about-frames) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  .about-cards.experiments,
  .about-cards.ordercards,
  .about-cards.trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The Support page: the figure strip, a grid of tier cards (one column on a phone, two on a tablet, three on a desktop),
   then where the money goes with the no-influence line boxed, and the fine print. */
.supportpage .tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .supportpage .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .supportpage .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.supportpage .tier {
  display: flex;
  flex-direction: column;
  gap: var(--gap-label);
  min-width: 0;
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
}
.supportpage #support-lottery {
  border-style: dashed;
}
.supportpage .tier-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-10);
}
.supportpage .price {
  font-family: var(--data);
  font-size: var(--text-figure-row);
  font-weight: 600;
  line-height: 1;
}
.supportpage .cadence {
  color: var(--muted);
}
.supportpage .cadence.monthly {
  color: var(--ink);
}
.supportpage .tier h3 {
  margin: 0;
  font-size: var(--text-card-title);
  line-height: 1.15;
}
.supportpage .tier p {
  max-width: var(--measure);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.45;
}
.supportpage .give {
  justify-content: center;
  gap: var(--space-6);
  margin-top: auto;
}
.supportpage .give.soon {
  border-style: dashed;
  border-color: var(--muted);
  background: none;
  color: var(--muted);
}
/* Where the money goes, in order: four numbered cells in one box, side by side where they fit. */
.supportpage .spend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--gap-block);
  padding: 0;
  border: var(--line);
  background: var(--soft);
  list-style: none;
  counter-reset: step;
}
.supportpage .spend li {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--card-pad);
  background: var(--panel);
  font-weight: 600;
  counter-increment: step;
}
.sum li:last-child:nth-child(odd),
.supportpage .spend li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .sum,
  .supportpage .spend {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .sum li:last-child:nth-child(odd),
  .supportpage .spend li:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.supportpage .callout {
  max-width: var(--measure);
  margin: 0;
  padding: var(--card-pad);
  border: var(--line-dashed);
  background: var(--paper);
  line-height: 1.5;
}

/* The view from inside the Climb. The server writes it only when a climb is on file, and it holds its final height
   (the canvas at 2x, the readout, the controls and the other-climber line) before the script draws into it. The
   canvas is drawn at whole-pixel scale. */
.climb-stage {
  max-width: 420px;
  min-height: 36rem;
  margin: 0 0 1.5rem;
}
.climb-stage canvas {
  display: block;
  max-width: 100%;
  border: var(--line);
  background: var(--panel);
  image-rendering: pixelated;
}
.climb-readout {
  margin: 0.6rem 0 0.4rem;
}
.climb-readout .climb-line {
  display: block;
}
.climb-readout .climb-line:empty {
  display: none;
}
.climb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.climb-controls .climb-group {
  display: flex;
  gap: 0.25rem;
}
.climb-controls button {
  font: inherit;
  padding: 0.25rem 0.7rem;
  border: var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.climb-controls button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.climb-controls [hidden] {
  display: none;
}
.climb-also {
  margin: 0.4rem 0 0;
}

/* The passport office: the lookup form in a panel (stacked on a phone; address, bot and button in one row from a tablet,
   with the note under them), and the result in a panel of its own, the verdict chip beside its words from a tablet. */
.officepage form.office {
  margin: 0 0 var(--gap-block);
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
}
.officepage form.office p {
  max-width: var(--measure);
  margin: 0 0 var(--space-12);
}
.officepage form.office p.fine {
  margin: 0;
}
.officepage form.office label {
  display: block;
  margin-bottom: var(--space-6);
  font-weight: 600;
}
.officepage form.office input,
.officepage form.office select {
  width: 100%;
}
.officepage form.office input {
  font-family: var(--data);
  font-size: var(--text-16);
}
@media (min-width: 768px) {
  .officepage form.office {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0 var(--space-16);
    align-items: end;
  }
  .officepage form.office p.fine {
    grid-column: 1 / -1;
  }
}
.officepage .result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-8) var(--space-16);
  margin: 0 0 var(--gap-block);
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
}
@media (min-width: 768px) {
  .officepage .result {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
}
.officepage .result .said {
  min-width: 0;
}
.officepage .result p {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}
.officepage .result .means {
  color: var(--muted);
  font-size: var(--text-compact);
}
.officepage .result .means a {
  color: var(--ink);
}

/* Send your bot: the steps as a strip of numbered cards (one column on a phone, two on a tablet, one row on a desktop),
   the one button with its note beside it, the code in a panel on the waiting card, and a line when a request is turned
   away. */
.sendpage .steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 768px) {
  .sendpage .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .sendpage .steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.sendpage .steps li {
  display: grid;
  align-content: start;
  gap: var(--gap-label);
  min-width: 0;
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
  counter-increment: step;
  overflow-wrap: anywhere;
}
.sendpage .getrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10) var(--space-16);
  margin: var(--space-20) 0 0;
}
.sendpage .getrow form,
.sendpage .getrow .fine {
  margin: 0;
}
.sendpage .code {
  max-width: none;
  margin: 0 0 var(--gap-lead);
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
}
.sendpage .code code {
  font-family: var(--data);
  font-size: var(--text-figure-row);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.refusal {
  padding: var(--space-8) var(--space-12);
  border: 2px solid var(--alert);
  background: var(--panel);
}

/* Case files: one boxed record for each session that failed the check. Full width, a gap between boxes, no rules inside them. */
ol.cases {
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--card-gap);
}
ol.cases > li.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12) var(--space-16);
  align-items: start;
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
  scroll-margin-top: 16px;
}
ol.cases > li.case:target {
  background: var(--paper);
}
ol.cases .pic .mug {
  width: var(--mug-m);
}
@media (min-width: 768px) {
  ol.cases > li.case {
    grid-template-columns: calc(var(--mug-l) + 4px) minmax(0, 1fr);
  }
  ol.cases .pic .mug {
    width: var(--mug-l);
  }
}
ol.cases .body p {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}
ol.cases .case-head {
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-small);
}
ol.cases .case-head a {
  font-weight: 600;
}
ol.cases .case-name {
  margin: 0 0 var(--space-6);
  font-family: var(--display);
  font-size: var(--text-card-title);
  line-height: 1.15;
}
ol.cases > li.case:has(.anchor:target) {
  background: var(--paper);
}
ol.cases .anchor {
  display: block;
  height: 0;
}
ol.cases .case-count {
  margin: 0 0 var(--space-6);
  font-weight: 600;
}
ol.cases .case-count .n {
  font-family: var(--data);
  font-size: var(--text-figure-row);
  line-height: 1;
}
ol.cases .members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4) var(--space-16);
  margin: var(--space-8) 0 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-data);
  list-style: none;
}
ol.cases details[open] > summary {
  margin-bottom: var(--space-6);
}
ol.cases .did {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
ol.cases .did li {
  padding: var(--space-2) var(--space-8);
  border: var(--line-thin);
  background: var(--paper);
  font-size: var(--text-small);
}
.pager {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--gap-block);
  font-family: var(--data);
  font-size: var(--text-data);
  color: var(--muted);
}
.pager a {
  font-family: var(--body);
  font-size: var(--text-body);
}
.pager .gap {
  min-width: 80px;
}
/* How a page opens: the title, one sentence, then the figure strip (.sum, shared with the species page). */
.intro {
  margin-bottom: var(--gap-lead);
}
.sum.inset {
  margin: 0 0 var(--gap-block);
}
.sum.inset li {
  background: var(--paper);
}
.sum.inset .n {
  font-size: var(--text-24);
}
.intro .lede {
  max-width: var(--measure);
}
/* A cell with a portrait: the portrait stands left, centred against the number over its caption. */
.sum li.has-pic {
  grid-template-columns: calc(var(--mug-s) + 4px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  align-content: start;
  gap: var(--space-4) var(--space-12);
}
.sum li.has-pic .lab {
  grid-column: 1 / -1;
}
.sum li.has-pic .mug {
  grid-column: 1;
  grid-row: span 2;
  width: var(--mug-s);
}
.sum li.has-pic .n,
.sum li.has-pic .cap {
  grid-column: 2;
}

/* The title line of an intro. */
.titlebar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--title-icon-gap);
}
.titlebar h1 {
  margin-right: var(--space-4);
}
/* A species header, to the right of the portrait: the name, the Latin name and the joke
   stacked, then the ruled pair of panels (.standing) underneath. */
.plate .ident {
  /* Its own formatting context, so it sits beside the floated portrait and its rule starts at its own left edge. */
  display: flow-root;
  min-width: 0;
}
.plate .namerow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--title-icon-gap);
}
/* A confidence rating: a three-step level meter in the ink colour, filled up to the level, beside the words. */
.conf {
  display: block;
  margin-top: var(--space-4);
}
.conf strong {
  color: var(--ink);
}
.meter {
  display: inline-block;
  width: 30px;
  height: 10px;
  margin-right: var(--space-6);
  border: var(--line);
  background: var(--paper);
  vertical-align: -1px;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--ink);
}
.meter-1 i {
  width: 33.3%;
}
.meter-2 i {
  width: 66.7%;
}
.meter-3 i {
  width: 100%;
}

/* The pages under Rules, laid out to the new design: the ledger rows, the cards that fold, the notices, the notes. */
.rules > li.grp {
  display: block;
  padding: var(--space-10) var(--space-14) var(--space-6);
  border-top: var(--line-soft);
  background: var(--paper);
  color: var(--muted);
}
.rules > li.grp:first-child {
  border-top: 0;
}
.rules > li.led {
  gap: var(--space-12) var(--gap-pair);
}
.rules > li.led > :not(.rulecol, .big, .rnote) {
  grid-column: 1 / -1;
}
.rules .rulecol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.rules .rulecol .where {
  order: 1;
  color: var(--ink);
  font-size: var(--text-17);
  font-weight: 600;
  line-height: 1.3;
}
.rules .rulecol code {
  order: 2;
  max-width: 100%;
  padding: var(--space-2) var(--space-8);
  background: var(--paper);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.5;
}
.rules .rulecol .means {
  order: 3;
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.45;
}
.rules .rtally {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--data);
  font-size: var(--text-data);
}
.rules .big {
  align-self: start;
  justify-items: start;
}
.rules .big .cap {
  text-align: left;
}
.rules .rsplit {
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-label);
}
.rules .rnote {
  width: 16rem;
  max-width: min(100%, var(--measure));
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
}
.rules .guests {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-6);
  margin: var(--space-4) 0 0;
}
.rules .guests li {
  border: var(--line-thin);
  background: var(--paper);
  font-family: var(--body);
  font-size: var(--text-small);
}
.rules .guests a {
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  text-decoration: none;
}
.rules .guests a span:not(.mug) {
  overflow-wrap: anywhere;
}
.sw.g {
  background: var(--muted);
}
/* A fold that is a box of its own: the title in the display serif, a muted note, the chevron at the right. */
/* The notices: a card for each file, the species that opened it as chips, the file behind a fold along its foot. */
.shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--card-gap);
}
@media (min-width: 1024px) {
  .shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.notice .nbody {
  flex: 1 1 auto;
  padding: var(--card-pad);
}
.notice .nhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-12);
}
.notice .what {
  max-width: var(--measure);
  margin: var(--space-6) 0 var(--space-12);
  font-size: var(--text-compact);
  line-height: 1.45;
}
.notice .ncap {
  margin: 0 0 var(--space-8);
  color: var(--muted);
}
/* The Pitfall: the way up to the Climb is a card that is one link. */
.ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-16);
  padding: var(--card-pad);
  border: var(--line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
.ladder .head {
  display: block;
  font-family: var(--display);
  font-size: var(--text-card-title);
  line-height: 1.15;
}
.ladder .sub {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-compact);
}
.ladder .go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The Census pages laid out to the new design. The leaderboard: the stamp key above the rows, a header row inside the box. */
.stamp-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin: 0 0 var(--gap-block);
  padding: var(--space-10) 0;
  border-top: var(--line-soft);
  border-bottom: var(--line-soft);
}
.stamp-key div {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
}
.stamp-key dt {
  flex: none;
}
.stamp-key dd {
  margin: 0;
  font-size: var(--text-small);
}
.ranks-head {
  display: grid;
  color: var(--muted);
  grid-template-columns: 40px var(--thumb) minmax(0, 1fr) 96px 100px;
  grid-template-areas: none;
  align-items: end;
  gap: 0 var(--space-8);
  margin: 0;
  padding: var(--space-8) var(--space-14);
  border: var(--line);
  border-bottom: 0;
  background: var(--paper);
}
.ranks-head > .h-rk {
  grid-area: 1 / 1 / auto / 3;
}
.ranks-head > .h-nm {
  grid-area: 1 / 3;
}
.ranks-head > .h-ct {
  grid-area: 1 / 4;
  justify-self: end;
}
.ranks-head > .h-st {
  grid-area: 1 / 5;
  justify-self: end;
}
.ranks-head + .ranks {
  border-top: var(--line-soft);
}
.ranks-head + .ranks .rk,
.ranks-head + .ranks .mv {
  line-height: 1.2;
  text-align: center;
}
.ranks-head + .ranks .mv {
  font-weight: 600;
}
/* Phone: the portrait and the stamp column give way, and the stamp stands under the count. */
@media (max-width: 767px) {
  .ranks-head,
  .ranks-head + .ranks li {
    grid-template-columns: 40px minmax(0, 1fr) 96px;
  }
  .ranks-head + .ranks li {
    grid-template-areas: "rk nm ct" "mv nm st";
  }
  .ranks-head + .ranks .pic,
  .ranks-head > .h-st {
    display: none;
  }
  .ranks-head > .h-rk {
    grid-area: 1 / 1;
  }
  .ranks-head > .h-nm {
    grid-area: 1 / 2;
  }
  .ranks-head > .h-ct {
    grid-area: 1 / 3;
  }
}

/* Alignment: the read-out is a boxed panel under the chart, and the one-axis table follows it. The species picked has
   its portrait at the left edge and the link to its page at the right, with its name, scores and confidence between. */
.picks {
  display: grid;
  margin: 0 0 var(--gap-block);
  padding: var(--row-pad);
  border: var(--line);
  background: var(--panel);
}
/* Every read-out sits in the one grid cell, so the box is as tall as the tallest and never changes size. */
.pick {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  scroll-margin-top: 140px;
}
.pick.idle,
.pick:target,
.pick.picked {
  visibility: visible;
}
.picks:has(.pick.picked) .pick:target:not(.picked),
.picks:has(.pick:target) .idle,
.picks:has(.pick.picked) .idle {
  visibility: hidden;
}
.pick:not(.idle) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
}
.pick.idle {
  align-self: center;
  color: var(--muted);
}
.pick > .mug {
  flex: none;
  width: var(--mug-s);
  border: var(--line);
}
.pick .body {
  flex: 1 1 260px;
  min-width: 0;
}
.pick .who-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-10);
  margin: 0;
}
.pick .who-line i {
  font-family: var(--display);
  font-size: var(--text-20);
}
.pick .fine {
  margin: var(--space-4) 0 0;
}
.withpic {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
}
.withpic .mug {
  flex: none;
  width: var(--mug-s);
}