/* 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;
}
.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);
  /* May shrink below its picker's own width. Left to its content it held 400px, stood out past a 390px screen,
     and made the page wider than the phone. */
  min-width: 0;
  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 {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.3;
}
nav.orders small {
  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 folded into one closed line: the list opens under it, with the room a heading would have given. */
.notes:has(> details) {
  padding-top: 0;
}
.notes details :is(ol, ul) {
  margin-top: var(--space-4);
}
.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;
}
/* A day the log is not whole for: a dashed line down its column, over the bar. The plot is stretched to its box, so
   the width and the dashes are in the plot's own units: a bar is 1 wide and the plot is 100 tall. */
.chart .log-gap {
  stroke: var(--muted);
  stroke-width: 0.14;
  stroke-dasharray: 4 4;
}
.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);
  min-width: 0;
}
.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;
  /* A tag is one line everywhere else. A chip here can be a whole phrase, an order and what it does, and on one
     line it was wider than a phone's card and made the page wider than the phone. It wraps inside its box. */
  white-space: normal;
}
.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);
}
.bar .k.wait {
  background: var(--soft);
}
@media (min-width: 768px) {
  .panels {
    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);
}
/* Who sent them, on the Census. A part of its bars is a kind of site and no verdict, so a site named is ink and not
   the green of a rule kept. Its key has two swatches more than a chart's: another site, and likely spam. */
.bar .k.ink {
  background: var(--ink);
}
.key.soft {
  background: var(--soft);
}
.key.alert {
  background: var(--alert);
}
/* The house chart (html.ts): a stepped line, a band of what is usual, a dashed rule and strips of states. The plot is
   one SVG stretched to its box, so its marks keep their thickness by non-scaling-stroke, and every word and texture is
   HTML beside the plot or over it, placed by percentage. Ink is the line. A state is told by its texture and its name;
   the colour that goes with some of them is a second signal and never the only one. */
:root {
  /* What is usual is shaded in the island's water: lightened on the paper by day, lifted off it by night. A state's
     tint is the green of a rule kept or the red of one broken, thinned into the paper. */
  --chart-usual: var(--if-light, color-mix(in srgb, var(--water) 45%, var(--paper)))
    var(--if-dark, color-mix(in srgb, var(--water) 70%, var(--muted)));
  --chart-ok: color-mix(in srgb, var(--ok) 24%, var(--paper));
  --chart-bad: color-mix(in srgb, var(--alert) 24%, var(--paper));
  /* The inside height of a strip of states. Its names are held to it, and one that does not fit is not shown. */
  --chart-strip: 16px;
}
/* Room at the left of the plot for the figures of its scale. A chart with no scale starts at the edge of its column.
   A chart is a figure on the page and never inside a bordered card: the ledgers and the panels hold rows, and a
   chart that belongs to a row stands under its ledger, with the row pointing to it. */
.ch-box {
  margin-left: var(--space-40);
}
.ch-box.ch-bare {
  margin-left: 0;
}
.ch-plot {
  position: relative;
  height: 132px;
}
.ch-plot.ch-two {
  height: 240px;
}
.ch-plot.ch-low {
  height: 88px;
}
.ch-plot.ch-mini {
  height: 92px;
}
.ch-plot > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-bottom: 0;
  shape-rendering: crispEdges;
}
/* Nothing over the plot takes a pointer from it: the read-out follows the pointer across the whole of it. */
.ch-plot > :not(svg) {
  pointer-events: none;
}
.ch-line,
.ch-sofar,
.ch-base,
.ch-grid,
.ch-rule,
.ch-now,
.ch-usual-edge {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.ch-line {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: miter;
}
.ch-sofar {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
.ch-base {
  stroke: var(--ink);
  stroke-width: 2;
}
.ch-grid {
  stroke: var(--soft);
  stroke-width: 1;
}
.ch-rule {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}
.ch-slope {
  shape-rendering: geometricPrecision;
}
.ch-now {
  stroke: var(--ink);
  stroke-width: 1;
}
.ch-usual {
  fill: var(--chart-usual);
}
.ch-usual-edge {
  stroke: var(--muted);
  stroke-width: 1;
}
.ch-tick {
  position: absolute;
  right: 100%;
  margin-right: var(--space-6);
  transform: translateY(-50%);
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-caps);
  line-height: 1;
  white-space: nowrap;
}
.ch-at {
  position: absolute;
  padding: var(--space-2) var(--space-4);
  font-family: var(--data);
  font-size: var(--text-caps);
  line-height: 1.2;
  white-space: nowrap;
}
.ch-at.ch-mid {
  transform: translateX(-50%);
}
/* A long word, held inside the plot: moved back by the share of its own width that its point is across the plot. */
.ch-at.ch-in {
  transform: translateX(var(--at));
}
.ch-at.ch-quiet {
  color: var(--muted);
}
.ch-strong {
  font-weight: 700;
}
/* A textured box over the plot. It is a pixel wider and taller than its place, so two that touch share one line. */
.ch-col {
  position: absolute;
  width: calc(var(--w) + 1px);
  height: calc(var(--h) + 1px);
  border: var(--line-thin);
  background-color: var(--paper);
}
.ch-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-12);
  max-width: none;
  margin: var(--space-4) 0;
  font-family: var(--data);
  font-size: var(--text-label);
  line-height: 1.45;
}
.ch-cap strong {
  font-weight: 700;
}
.ch-cap .ch-quiet {
  color: var(--muted);
}
/* The dates along a plot's foot: one is named only from 768px, or only below it. A word of a chart has one wording. */
.ch-narrow {
  display: none;
}
@media (max-width: 767px) {
  .ch-wide {
    display: none;
  }
  .ch-narrow {
    display: inline;
  }
}
.ch-axis {
  position: relative;
  height: calc(1.45 * var(--text-label));
  margin-top: var(--space-4);
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-label);
  line-height: 1.45;
}
.ch-lab {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ch-lab.ch-first {
  left: 0;
  transform: none;
}
.ch-lab.ch-last {
  right: 0;
  transform: none;
}
.ch-note {
  max-width: none;
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-10);
  text-align: center;
}
/* A strip of states, as wide as the plot over it. A part's name is a second flex line when it does not fit, and the
   strip is one line tall, so a name is shown whole or not at all. */
.ch-strip {
  position: relative;
  height: calc(var(--chart-strip) + 2px);
  margin-top: var(--space-6);
  overflow: hidden;
  border: var(--line-thin);
  background: var(--paper);
}
.ch-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: var(--w);
  overflow: hidden;
  border: 0 solid var(--ink);
  background-color: var(--paper);
}
.ch-seg::before {
  content: "";
  width: 0;
  height: var(--chart-strip);
}
.ch-seg.ch-l {
  border-left-width: 1px;
}
.ch-seg.ch-r {
  border-right-width: 1px;
}
.ch-seg.ch-lead {
  justify-content: flex-start;
}
.ch-tag {
  flex: none;
  align-self: center;
  margin: 0 var(--space-6);
  padding: 0 var(--space-4);
  border: var(--line-thin);
  background: var(--paper);
  font-family: var(--data);
  font-size: var(--text-10);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* The textures, then the tints that may go with them. */
.tx-slash {
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--ink) 3px 4.2px);
}
.tx-cross {
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--ink) 3px 4.2px),
    repeating-linear-gradient(45deg, transparent 0 3px, var(--ink) 3px 4.2px);
}
.tx-dots {
  background-image: radial-gradient(circle, var(--ink) 0 1px, transparent 1.3px);
  background-size: 6px 6px;
}
.tx-solid {
  background-color: var(--ink);
}
.tx-wait {
  outline: 1px dashed var(--ink);
  outline-offset: -3px;
}
.ch-col.tx-wait {
  border-style: dashed;
  outline: 0;
}
.tone-ok {
  background-color: var(--chart-ok);
}
.tone-bad {
  background-color: var(--chart-bad);
}
/* The key under a chart: a swatch of each texture, and the marks that are not textures. It is set as the chart's
   other words are, in the data face at their size, so the chart reads as one thing and its key is not the loudest
   part of it. */
.legend.ch-key {
  align-items: center;
  max-width: none;
  font-family: var(--data);
  font-size: var(--text-label);
}
.legend .ch-sw {
  width: 22px;
  height: 12px;
  border: var(--line-thin);
  vertical-align: -2px;
}
.legend .ch-sign {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}
.legend .ch-sign-gap {
  width: 0;
  border-left: 2px dashed var(--muted);
}
.legend .ch-sign-rule {
  width: 22px;
  height: 0;
  border-top: 1px dashed var(--ink);
  vertical-align: 3px;
}
.ch-sign-cross {
  background-image: linear-gradient(45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%),
    linear-gradient(135deg, transparent 43%, var(--ink) 43% 57%, transparent 57%);
}
.ch-sign-ring {
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
/* Marks under a strip, each at its own time: a cross or a ring, with how many it stands for under it when more than one. */
.ch-marks {
  position: relative;
  height: 26px;
  margin-top: var(--space-4);
}
.ch-mark {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
}
.ch-mark strong {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--data);
  font-size: var(--text-10);
  font-weight: 400;
  line-height: 1.2;
}
/* A strip for each name, under one plot: on a phone the name and its total stand over the strip. From 768px the names
   are a column at the left of the plot and the totals a column at its right, so every strip lines up with the plot. */
.ch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-8);
  margin-top: var(--space-6);
  font-family: var(--data);
  font-size: var(--text-label);
}
.ch-row .ch-name {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-row .ch-n {
  grid-area: 1 / 2;
  font-weight: 700;
}
.ch-row .ch-strip {
  grid-area: 2 / 1 / 3 / 3;
  margin-top: var(--space-2);
}
@media (min-width: 768px) {
  .ch-named {
    display: grid;
    grid-template-columns: minmax(var(--space-40), max-content) minmax(0, 1fr) minmax(var(--space-24), max-content);
    column-gap: var(--space-8);
    margin-left: 0;
  }
  .ch-named > * {
    grid-column: 2;
  }
  .ch-named > .ch-row {
    display: contents;
  }
  .ch-named .ch-name {
    grid-area: auto / 1;
    align-self: center;
    margin-top: var(--space-6);
    text-align: right;
  }
  .ch-named .ch-row .ch-strip {
    grid-area: auto / 2;
    margin-top: var(--space-6);
  }
  .ch-named .ch-n {
    grid-area: auto / 3;
    align-self: center;
    margin-top: var(--space-6);
  }
}
/* The read-out of a house chart is one line at every width: the slot's name, whole, and what is said of it, which
   gives way with an ellipsis where a phone has no room for the last of it. The box is that tall whatever it says. */
.ch .readout .at {
  flex: none;
}
.ch .readout .what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A chart with nothing to show keeps the room a drawn one takes. */
.ch-empty {
  min-height: 132px;
}
.ch-empty.ch-two {
  min-height: 300px;
}
/* The caption of the second of two panels stands inside the plot, in the room between them: two lines at most. Its
   note mark is a link, so it takes the pointer though nothing else over the plot does. */
.ch-cap.ch-over {
  position: absolute;
  right: 0;
  left: 0;
  max-height: calc(2 * 1.45 * var(--text-label));
  margin: 0;
  overflow: hidden;
}
.ch-cap.ch-over a {
  pointer-events: auto;
}
/* A strip with its name in the margin, level with it. */
.ch-line-of {
  position: relative;
}
.ch-line-of .ch-tick {
  top: calc(var(--space-6) + (var(--chart-strip) + 2px) / 2);
}
/* 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);
  background-image: repeating-linear-gradient(135deg, transparent 0 2px, var(--paper) 2px 4px);
}

/* 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. There is no empty room above the whole chart, in place of 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 {
  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 code in a panel on the waiting card, and a line when a request is turned away. The steps and the
   button row are in app.css, which the island's courier strip shares. */
.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, 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 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);
}
/* A row's block stands at the top of its row. Its figure, the line that says what it counts and anything under them
   are set to the right edge of the row at every width, as app.css sets them (.rules .big): a column of figures is
   read down its right edge. */
.rules .big {
  align-self: start;
}
.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(--paper);
  box-shadow: inset 0 0 0 2px var(--muted);
}
/* On the Rules page a bar's parts are told by their fill as well as their colour, since the green of a rule kept and
   the grey of a plain count are close to an eye that cannot tell red from green: kept is solid, broke is hatched, and
   a count that is not a rule is hollow. The key over the panel is filled the same way. */
.bar .b.hatch {
  background-image: repeating-linear-gradient(135deg, transparent 0 2px, var(--paper) 2px 4px);
}
.bar .k.plain.hollow {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px 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);
}

/* Send a courier: the services as one bar, the icon slot above the name in each cell. Under 768 it is two columns, with an
   odd last cell spanning both so no rule is left hanging; from 768 it is one row of seven. The slot keeps its 24px box
   with no icon in it, so adding the icons moves nothing. */
.sendpage .services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--gap-block);
  padding: 0;
  border: var(--line);
  background: var(--panel);
  list-style: none;
}
.sendpage .services > li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-12) var(--space-8);
  border-top: var(--line-thin);
  text-align: center;
}
.sendpage .services > li:nth-child(-n + 2) {
  border-top: 0;
}
.sendpage .services > li:nth-child(even) {
  border-left: var(--line-thin);
}
.sendpage .services > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.sendpage .services .icon {
  display: block;
  width: 24px;
  height: 24px;
}
.sendpage .services .icon svg {
  display: block;
}
.sendpage .services .label {
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .sendpage .services {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sendpage .services > li,
  .sendpage .services > li:nth-child(-n + 2),
  .sendpage .services > li:nth-child(even),
  .sendpage .services > li:last-child:nth-child(odd) {
    grid-column: auto;
    border-top: 0;
    border-left: var(--line-thin);
  }
  .sendpage .services > li:first-child {
    border-left: 0;
  }
}