/* 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);
  /* Pulled up under the tabs so the two rows are as far apart as two tabs are: one block, not two menus. */
  margin: calc(-1 * var(--gap-under-tabs)) 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 soft tints in the island's colours with ink text and an ink hairline, the same in both themes as the
   portrait tiles are. The text is the light theme's ink on both papers, so contrast holds on the tint; the hairline is
   the theme's own ink, so it shows against the paper in either theme. */
:root {
  --stamp-ink: #111827;
  --stamp-followed-bg: #cfe8bc;
  --stamp-defied-bg: #d8a0a6;
  --stamp-skipped-bg: #ebddb4;
  --stamp-untested-bg: #e6e6e8;
  --stamp-sent-bg: #bfd4f2;
  --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: var(--line-thin);
  background: var(--stamp-bg);
  color: var(--stamp-ink);
}
.stamp-followed {
  --stamp-bg: var(--stamp-followed-bg);
}
.stamp-defied {
  --stamp-bg: var(--stamp-defied-bg);
}
.stamp-skipped {
  --stamp-bg: var(--stamp-skipped-bg);
}
.stamp-untested {
  --stamp-bg: var(--stamp-untested-bg);
}
.stamp-sent {
  --stamp-bg: var(--stamp-sent-bg);
}
/* 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);
}
/* On a wide screen two or more notes run in two columns, read down the first and then the second, so each keeps the
   reading width and the right half of the page is used. A note is never split across the columns. */
@media (min-width: 1024px) {
  .notes :is(ol, ul):has(li + li) {
    display: block;
    columns: 2;
    column-gap: var(--gap-columns);
  }
  .notes :is(ol, ul):has(li + li) > li {
    break-inside: avoid;
    margin-bottom: var(--space-8);
  }
}
/* 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;
}

/* 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);
}
/* A file shown inside a fold is on paper, so it is not grey on the fold's grey. */
.faq-body pre {
  max-width: none;
  background: var(--paper);
}
.notice .faq {
  margin: 0;
  border-width: 2px 0 0;
}
/* 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 .split .tag {
  padding-block: 0;
  line-height: 1;
}
.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 (the open square's name, its count and the Back button) is only there while a square is
   open. The owner chose no empty room above the whole chart over a page that never moves here. */
.zoomhead {
  margin-top: 0;
}
.zoomhead:not(.open) {
  display: none;
}
/* 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: one species card and an index of the tiers that picks which it shows, then where the money goes as a
   ruled line, then the Notes. The tiers run monthly first, then by price, and the lottery ticket comes last behind a
   dashed edge. */
.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 .give {
  justify-content: center;
  gap: var(--space-6);
}
.supportpage .give.soon {
  border-style: dashed;
  border-color: var(--muted);
  background: none;
  color: var(--muted);
}
/* Where the money goes, in order: four numbered items on a ruled line, side by side where they fit. */
.supportpage .spend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin: 0 0 var(--gap-block);
  padding: var(--space-12) 0;
  border-block: var(--line);
  list-style: none;
  counter-reset: step;
}
.supportpage .spend li {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-weight: 600;
  counter-increment: step;
}
@media (min-width: 768px) {
  .supportpage .spend {
    flex-wrap: nowrap;
    gap: 0;
  }
  .supportpage .spend li {
    flex: 1 1 0;
    padding: 0 var(--space-16);
  }
  .supportpage .spend li + li {
    border-left: var(--line-thin);
  }
}

/* The cost line and the foot of a card. The button is the last thing in the foot and the foot is pinned to the end of
   its card, so the button stays where it is from tier to tier. */
.supportpage .cost {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-6);
}
.supportpage .cost .price {
  font-size: var(--text-body);
}
.supportpage .foot {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
  margin: auto var(--space-14) var(--space-14);
}
.supportpage .foot p {
  max-width: none;
  margin: 0;
}
.supportpage .foot .manage {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.3;
}
.supportpage .foot .give {
  margin: 0;
  padding: 0 var(--space-8);
}

/* The tier as a species card: .pen gives it the border, the name and the picture's whole number of pixels to a frame
   pixel. The picture is exactly the 22 by 16 frame high, so the drawing's rows land on whole pixels. */
.supportpage .spec .mug {
  aspect-ratio: auto;
  height: calc(16 * var(--u));
}
.supportpage .spec.odd {
  border-style: dashed;
}
.supportpage .spec.odd .mug {
  border-bottom-style: dashed;
}
.supportpage .spec :is(h3, .latin, .full, .buys) {
  margin-inline: var(--space-14);
}
.supportpage .spec h3 {
  margin-top: var(--space-12);
  font-size: var(--text-26);
  line-height: 1.1;
}
.supportpage .spec .latin {
  margin-top: var(--space-2);
  margin-bottom: var(--space-10);
  font-size: var(--text-24);
  line-height: 1.1;
}
.supportpage .spec .full {
  margin-bottom: var(--space-4);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
}
.supportpage .spec h3 + .full {
  margin-top: var(--space-6);
}
.supportpage .spec .buys {
  color: var(--muted);
}

/* The picker is a radio group. For each tier the markup runs radio, index row (.opt), card (.swap), so no rule names a
   tier: the card after the checked radio's row shows, and while the pointer is on a row its card shows in place of the
   checked one. All the cards share one grid area, so the box is as tall as the tallest and nothing moves; a hidden card
   is visibility:hidden, so its links cannot be reached. The pointer rules are inside (hover: hover): a phone leaves
   :hover on the last thing tapped, and must go by the checked radio alone. Without :has the radios and rows are hidden
   and the cards are a plain list, each with its own button. */
.supportpage .picker {
  min-width: 0;
  margin: 0 0 var(--gap-block);
  padding: 0;
  border: 0;
}
.supportpage .deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--card-gap);
}
.supportpage .deck > input,
.supportpage .deck > .opt {
  display: none;
}

@supports selector(:has(*)) {
  .supportpage .deck > input {
    display: block;
  }
  .supportpage .deck > .opt {
    cursor: pointer;
  }
  .supportpage .deck > .swap {
    visibility: hidden;
  }
  .supportpage .deck > input:checked + .opt + .swap {
    visibility: visible;
  }
  /* Raised, so the ring is drawn over the neighbours it overlaps and over the pictures, which are positioned. */
  .supportpage .deck > input:focus-visible + .opt {
    position: relative;
    z-index: var(--z-2);
    outline: 3px solid var(--alert);
    outline-offset: 2px;
  }

  /* Phone: the index is two columns of boxes over the card, whose drawing stands 8 screen pixels to a frame pixel. */
  .supportpage .deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-8);
  }
  .supportpage .deck > .row {
    display: grid;
    align-content: center;
    gap: var(--space-2) var(--space-12);
    min-width: 0;
    min-height: var(--tap);
    margin-bottom: var(--space-8);
    padding: var(--space-8) var(--space-10);
    border: var(--line);
    background: var(--panel);
  }
  .supportpage .deck > .row.odd {
    border-style: dashed;
  }
  .supportpage .row .nm {
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .supportpage .row .full {
    display: none;
    color: var(--muted);
    font-size: var(--text-compact);
    line-height: 1.3;
  }
  .supportpage .row .cost .price {
    font-size: var(--text-small);
  }
  /* Row 99: after however many rows the index takes. The rows between are empty and take no height. */
  .supportpage .deck > .spec {
    grid-column: 1 / -1;
    grid-row: 99;
    margin-top: var(--space-8);
  }
  .supportpage .spec .mug {
    --u: 8px;
  }
  .supportpage .deck > input:checked + .row {
    background: var(--ink);
    color: var(--paper);
  }
  .supportpage .deck > input:checked + .row :is(.full, .cadence) {
    color: inherit;
  }

  @media (hover: hover) {
    .supportpage .deck:has(> .opt:hover) > input:checked + .opt:not(:hover) + .swap {
      visibility: hidden;
    }
    /* Raised as well as shown: the cards are opaque and fill one area, so the one pointed at covers the checked one
       even in a browser that is slow to apply the rule above. */
    .supportpage .deck > .opt:hover + .swap {
      position: relative;
      z-index: var(--z-2);
      visibility: visible;
    }
    /* One mark, the ink fill, and it follows the pointer: the row pointed at is filled, the chosen row gives its fill
       up while another is pointed at, and takes it back when the pointer leaves the list. */
    .supportpage .deck > .row:hover {
      background: var(--ink);
      color: var(--paper);
    }
    .supportpage .deck > .row:hover :is(.full, .cadence) {
      color: inherit;
    }
    .supportpage .deck:has(> .row:hover) > input:checked + .row:not(:hover) {
      background: var(--panel);
      color: inherit;
    }
    .supportpage .deck:has(> .row:hover) > input:checked + .row:not(:hover) :is(.full, .cadence:not(.monthly)) {
      color: var(--muted);
    }
    .supportpage .deck:has(> .row:hover) > input:checked + .row:not(:hover) .cadence.monthly {
      color: var(--ink);
    }
  }
  /* The picture plays its second frame, as a species card's does, while the pointer is on any index row or a radio has
     keyboard focus. */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .supportpage .deck:has(> .row:hover) .mug.flip img:not(.alt) {
      animation: mug-first var(--dur-800) steps(1, end) infinite;
    }
    .supportpage .deck:has(> .row:hover) .mug.flip .alt {
      animation: mug-second var(--dur-800) steps(1, end) infinite;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .supportpage .deck:has(> input:focus-visible) .spec .mug.flip img:not(.alt) {
      animation: mug-first var(--dur-800) steps(1, end) infinite;
    }
    .supportpage .deck:has(> input:focus-visible) .spec .mug.flip .alt {
      animation: mug-second var(--dur-800) steps(1, end) infinite;
    }
  }

  /* From 768 the card stands at the left, 12 to a frame pixel (16 from 1024), and the index is one ruled list beside
     it. One row a tier (--n of them, from the markup), and the card spans them all. The rows are auto, not 1fr: the
     card's height is shared out among them, and a row whose words wrap is only that much taller. */
  @media (min-width: 768px) {
    .supportpage .deck {
      grid-template-columns: 312px minmax(0, 1fr);
      grid-template-rows: repeat(var(--n), auto);
      gap: 0 var(--gap-pair);
    }
    .supportpage .deck > .spec {
      grid-column: 1;
      grid-row: 1 / -1;
      margin-top: 0;
    }
    .supportpage .spec .mug {
      --u: 12px;
    }
    /* The index is one box: the heavy line round it, a thin rule between rows, and the odd one out dashed on all four sides, the same
       dashes as its box on a phone. */
    .supportpage .deck > .row {
      grid-column: 2;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "nm cost" "full cost";
      margin-bottom: 0;
      padding: var(--space-8) var(--space-14);
      border-top: var(--line-thin);
      border-bottom-width: 0;
    }
    .supportpage .deck > .row.odd {
      border: var(--line-dashed);
    }
    .supportpage .deck > .row:first-of-type {
      border-top: var(--line);
    }
    .supportpage .deck > .row:last-of-type {
      border-bottom-width: 2px;
    }
    .supportpage .row .nm {
      grid-area: nm;
      font-size: var(--text-20);
    }
    .supportpage .row .full {
      display: block;
      grid-area: full;
    }
    .supportpage .row .cost {
      grid-area: cost;
      flex-direction: column;
      align-items: flex-end;
      align-self: center;
    }
    .supportpage .row .cost .price {
      font-size: var(--text-20);
    }
  }
  @media (min-width: 1024px) {
    .supportpage .deck {
      grid-template-columns: 396px minmax(0, 1fr);
    }
    .supportpage .spec .mug {
      --u: 16px;
    }
  }
}

/* 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 row (with the figures at its right end), then one sentence. */
.intro {
  margin-bottom: var(--gap-lead);
}
.intro .lede {
  max-width: var(--measure);
}

/* 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 page's figures: one quiet mono line (.aside) at the right end of the title row, or at the top of a fold's body.
   Under 768px it wraps to its own line under the title; from 768px it shares the row, on the title's baseline,
   and wraps inside the room that is left. */
.figs {
  max-width: none;
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.figs b {
  color: var(--ink);
  font-weight: 600;
}
.titlebar .figs,
.plate .namerow .figs {
  flex: 1 1 100%;
}
@media (min-width: 768px) {
  .titlebar .figs,
  .plate .namerow .figs {
    flex: 1 1 0;
    min-width: 16rem;
    align-self: baseline;
    margin-left: auto;
    text-align: right;
  }
}
.faq-body > .figs {
  margin-bottom: var(--space-12);
}
/* 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 {
  position: relative;
  grid-area: 1 / 4;
  justify-self: end;
}
/* The note mark hangs outside the heading, so "Landings" ends above the last digit of the figures under it. */
.ranks-head > .h-ct .noteref {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0;
  padding-right: 0;
}
.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);
}
/* The headings of the charts on a species page carry their 30-day total at the right, in the heading's row. */
.plate .did .charthead {
  margin: 0;
}
/* The third row of charts pairs from 1024, not 768: a bar chart and a ledger need the width. */
.plate .cols.wide {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .plate .cols.wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}