/* 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(--space-10) 0 var(--space-6);
  font-size: clamp(32px, 8vw, 38px);
  line-height: 1.05;
}
main h2 {
  margin: 20px 0 var(--space-6);
  font-size: var(--text-28);
  line-height: 1.1;
}
main h2 small {
  font-family: var(--body);
  font-size: var(--text-16);
  color: var(--muted);
}
main h3 {
  margin: 20px 0 var(--space-6);
  font-size: var(--text-24);
  line-height: 1.15;
}
main h4 {
  margin: 18px 0 var(--space-4);
  font-size: var(--text-16);
  font-weight: 600;
}
main p,
main ul,
main ol,
main dl {
  max-width: 68ch;
}
main p {
  margin: 0 0 var(--space-10);
}
main li {
  margin-bottom: var(--space-4);
}
main .lede {
  max-width: 62ch;
  color: var(--muted);
}
main .fine {
  margin: var(--space-6) 0 var(--space-10);
  color: var(--muted);
  font-size: var(--text-14);
}
main .none {
  padding: var(--space-10) var(--space-12);
  border: 2px solid var(--ink);
  background: var(--panel);
  color: var(--muted);
}
main code {
  overflow-wrap: anywhere;
}
main pre {
  max-width: 68ch;
  margin: 0 0 var(--space-10);
  padding: var(--space-10) var(--space-12);
  overflow-x: auto;
  border: 2px solid var(--ink);
  background: var(--panel);
  font-size: var(--text-13);
  line-height: 1.5;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.back {
  margin: 0;
}
.back a,
a.more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* Links to the pages under a section: a full-width row of boxes, as the tab row above it is. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-4) 0 var(--space-14);
}
.subnav a {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-12);
  border: 2px solid var(--ink);
  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: 480px) {
  .subnav {
    gap: var(--space-4);
  }
  .subnav a {
    padding: 0 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(--space-10);
}
.seg {
  display: flex;
}
.seg a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-14);
  border: 2px solid var(--ink);
  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);
}
.pick {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 0 auto;
}
.pick select {
  min-height: 44px;
  margin-left: var(--space-6);
  padding: 0 var(--space-8);
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

/* A portrait: the drawing on its order's colour, standing where the island's portraits stand it. */
.mug {
  position: relative;
  display: block;
  aspect-ratio: 22 / 16;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.mug img {
  position: absolute;
  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. */
.orders {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.orders li + li {
  border-top: 1px solid var(--soft);
}
.orders li {
  position: relative;
  margin: 0;
  padding: var(--space-8) var(--space-10);
  line-height: 1.3;
}
.orders .ord {
  display: block;
  font-family: var(--display);
  font-size: var(--text-26);
  line-height: 1.2;
  text-decoration: none;
}
.orders .ord::after {
  content: "";
  position: absolute;
  inset: 0;
}
.orders .gloss {
  display: block;
  color: var(--muted);
}
.orders .what {
  display: block;
}
.orders .hint {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: var(--z-2);
}
.tip .cen {
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-13);
}

/* The title line: the heading, with a count on its right that wraps under it on a narrow screen. */
.titleline {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-16);
}
/* A div, not a paragraph: a hint is a details element, which would end a paragraph early. */
.titleline .count {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0 0 var(--space-10);
  color: var(--muted);
}
.titleline .count .hint {
  margin-left: 0;
}
.titleline .hint {
  position: static;
}
@media (min-width: 600px) {
  .titleline .count {
    margin-left: auto;
  }
  .titleline .hint {
    position: relative;
  }
}
@media (max-width: 599px) {
  .titleline .tip {
    top: auto;
    left: 0;
    right: auto;
    max-width: 100%;
  }
}

/* A hint: a small round "i" that shows a short panel on hover, focus and tap, without moving anything. */
.hint {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-4);
  font-family: var(--body);
  font-size: var(--text-14);
  font-weight: 400;
  line-height: 1.35;
}
main .hint summary,
.mast .hint summary {
  min-height: 0;
  text-decoration: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--display);
  font-size: var(--text-13);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}
main .hint summary::-webkit-details-marker,
.mast .hint summary::-webkit-details-marker {
  display: none;
}
main .hint summary:focus-visible,
.mast .hint summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* The stats hint is the clipboard alone: no circle, border or background, in a 24px hit area. */
main .hint summary:has(.stats-icon) {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
main .hint summary:has(.stats-icon):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.hint .stats-icon {
  display: block;
}
/* Every other hint wears the pixel circled i in place of the lettered circle: the icon alone, no CSS ring. */
main .hint summary:has(.info-icon),
.mast .hint summary:has(.info-icon) {
  border: 0;
  border-radius: 0;
  background: none;
}
.hint .info-icon {
  display: block;
}
.hint::details-content {
  content-visibility: visible;
  display: contents;
}
.hint .tip {
  display: none;
  position: absolute;
  z-index: var(--z-5);
  top: 100%;
  left: 0;
  width: max-content;
  max-width: min(34ch, calc(100vw - 32px));
  padding-top: var(--space-6);
}
.hint-right .tip {
  left: auto;
  right: 0;
}
.hint[open] .tip,
.hint:hover .tip,
.hint:focus-within .tip {
  display: block;
}
/* With the site script running (it sets data-hints on the root) a panel is fixed under its icon, centred, and kept
   12px inside the viewport; the script writes --hx, --hy and --hn (the notch's x). Without it the rules above hold. */
:root[data-hints] details.hint.hint .tip {
  position: fixed;
  z-index: var(--z-50);
  top: var(--hy, 0);
  right: auto;
  bottom: auto;
  left: var(--hx, 0);
  max-width: min(34ch, calc(100vw - 24px));
  padding-top: 9px;
}
:root[data-hints] .mast .sub .hint .tip {
  max-width: min(40em, calc(100vw - 24px));
}
:root[data-hints] .titlebar .hint .tip {
  max-width: min(44em, calc(100vw - 24px));
}
:root[data-hints] .tip-body {
  position: relative;
}
:root[data-hints] .tip-body::before {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(var(--hn, 50%) - 5px);
  width: 8px;
  height: 8px;
  border: solid var(--ink);
  border-width: 1.5px 0 0 1.5px;
  background: var(--paper);
  transform: rotate(45deg);
}
/* An open panel is painted above its neighbours: its icon's box and the masthead (which holds its own stacking
   context for the view transition and sits before the sticky tab row) rise while it is open. */
.hint:is(:hover, :focus-within, [open]) {
  z-index: var(--z-50);
}
.mast:has(.hint:is(:hover, :focus-within, [open])) {
  position: relative;
  z-index: var(--z-50);
}
.tip-body {
  padding: var(--space-8) var(--space-10);
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 400;
  text-align: left;
}
.tip-body p {
  max-width: none;
  margin: 0 0 var(--space-6);
}
.tip-body p:last-child {
  margin-bottom: 0;
}
h2 .hint,
h1 .hint {
  vertical-align: middle;
}
@media (min-width: 920px) {
  .orders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  /* Three across, so six orders make two even rows. Each box rules off from its left and upper neighbours. */
  .orders li:nth-child(3n + 1) .hint-right .tip {
    left: 0;
    right: auto;
  }
  .orders li + li {
    border-top: 0;
  }
  .orders li:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--soft);
  }
  .orders li:nth-child(n + 4) {
    border-top: 1px solid var(--soft);
  }
}
.order h3 {
  margin: var(--space-24) 0 var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--ink);
  font-size: var(--text-32);
  line-height: 1.1;
}
.order h3 small {
  font-family: var(--body);
  font-size: var(--text-16);
  color: var(--muted);
}
.pens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-12);
}
.pen {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.pen .shot {
  position: relative;
}
.pen .hint {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: var(--z-2);
  margin: 0;
}
.pen .hint .tip {
  left: auto;
  right: 0;
  max-width: 130px;
}
.pen .tip-body p {
  margin: 0 0 var(--space-6);
  font-size: 13.5px;
}
.pen .tip-body p:last-child {
  margin-bottom: 0;
}
.pen .mug {
  border-width: 0 0 2px;
}
.pen h4 {
  margin: var(--space-8) var(--space-10) 0;
  font-size: var(--text-16);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.pen .more {
  gap: 0.3em;
  margin: auto var(--space-10) var(--space-4);
}
.pen p {
  margin: 0 var(--space-10) var(--space-10);
  font-size: 14.5px;
  line-height: 1.35;
}
main .latin {
  font-family: var(--display);
  font-style: italic;
}
.pen .latin {
  margin-bottom: var(--space-6);
  font-size: var(--text-20);
  line-height: 1.15;
}

/* One species: the field-guide plate. */
.plate {
  max-width: 940px;
}
.plate header {
  display: grid;
  grid-template-columns: minmax(96px, 170px) minmax(0, 1fr);
  gap: var(--space-14);
  align-items: start;
  margin: var(--space-4) 0;
}
.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: var(--text-34);
  line-height: 1.05;
}
.plate .meta {
  margin: 0 0 var(--space-4);
  color: var(--muted);
}
.plate h2 {
  margin: 26px 0 var(--space-6);
}
.plate pre.ua {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Stamps are solid filled tags, one fill per kind, tuned per theme. */
:root {
  --stamp-kept-bg: var(--ok);
  --stamp-kept-fg: var(--paper);
  --stamp-lapsed-bg: var(--alert);
  --stamp-lapsed-fg: var(--paper);
  --stamp-wild-bg: var(--if-light, #7f1230) var(--if-dark, #b8324f);
  --stamp-wild-fg: #ffffff;
  --stamp-untested-bg: var(--verdict-none-bg);
  --stamp-untested-fg: var(--verdict-none-fg);
  --stamp-errand-bg: var(--if-light, #2563eb) var(--if-dark, #4f8cff);
  --stamp-errand-fg: var(--paper);
  --verdict-lawful-good-bg: var(--if-light, #3f8f1f) var(--if-dark, #4a9e28);
  --verdict-lawful-good-fg: #050a02;
  --verdict-neutral-good-bg: var(--if-light, #86c440) var(--if-dark, #8fd04a);
  --verdict-neutral-good-fg: #10200a;
  --verdict-chaotic-good-bg: var(--if-light, #cfe58a) var(--if-dark, #d3ec95);
  --verdict-chaotic-good-fg: #16230a;
  --verdict-lawful-neutral-bg: var(--if-light, #6f675b) var(--if-dark, #7c7467);
  --verdict-lawful-neutral-fg: #ffffff;
  --verdict-neutral-neutral-bg: var(--if-light, #a39a8c) var(--if-dark, #a8a092);
  --verdict-neutral-neutral-fg: var(--if-light, #1c1812) var(--if-dark, #14110d);
  --verdict-chaotic-neutral-bg: var(--if-light, #d6cfc2) var(--if-dark, #d9d3c7);
  --verdict-chaotic-neutral-fg: var(--if-light, #1c1812) var(--if-dark, #14110d);
  --verdict-lawful-evil-bg: var(--if-light, #4a1f8a) var(--if-dark, #6a3fc0);
  --verdict-lawful-evil-fg: #ffffff;
  --verdict-neutral-evil-bg: var(--if-light, #7c4dcc) var(--if-dark, #9a76e6);
  --verdict-neutral-evil-fg: var(--if-light, #ffffff) var(--if-dark, #0b0618);
  --verdict-chaotic-evil-bg: var(--if-light, #c2a8ee) var(--if-dark, #cdb6f5);
  --verdict-chaotic-evil-fg: #1a0f33;
  --verdict-none-bg: var(--if-light, #d5dbe4) var(--if-dark, #2c3445);
  --verdict-none-fg: var(--if-light, #333c49) var(--if-dark, #c4cbd8);
}
.tag.stamp {
  border-color: var(--stamp-bg);
  background: var(--stamp-bg);
  color: var(--stamp-fg);
}
.stamp-kept {
  --stamp-bg: var(--stamp-kept-bg);
  --stamp-fg: var(--stamp-kept-fg);
}
.stamp-lapsed {
  --stamp-bg: var(--stamp-lapsed-bg);
  --stamp-fg: var(--stamp-lapsed-fg);
}
.stamp-wild {
  --stamp-bg: var(--stamp-wild-bg);
  --stamp-fg: var(--stamp-wild-fg);
}
.stamp-untested {
  --stamp-bg: var(--stamp-untested-bg);
  --stamp-fg: var(--stamp-untested-fg);
}
.stamp-errand {
  --stamp-bg: var(--stamp-errand-bg);
  --stamp-fg: var(--stamp-errand-fg);
}
/* The alignment chip is the tag filled with its own label's colour: Good in green, Neutral in stone, Evil in violet,
   deep for Lawful and pale for Chaotic. The words stay, so colour is never the only signal. */
.tag.verdict {
  border-color: var(--verdict-bg);
  background: var(--verdict-bg);
  color: var(--verdict-fg);
  text-transform: uppercase;
}
.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(--space-24);
}
@media (min-width: 760px) {
  .cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.cap {
  margin: 0 0 var(--space-4);
  font-weight: 600;
}
.plate .drawing {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
  color: var(--muted);
  font-style: italic;
}
.plate .stamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-4) 0 var(--space-6);
}
.plate .stamps .tag {
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-18);
  line-height: 1.2;
}
.plate h3 {
  margin: 22px 0 var(--space-6);
  font-size: var(--text-22);
}
.plate .did > h2,
.plate .who > h2,
.plate > section > h2 {
  margin-top: 34px;
}
.plate .did .cols > section,
.plate .did .cols > div {
  min-width: 0;
}

/* The summary strip: big figures, the Rules ledger's number over a small caption. */
.sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-12);
  max-width: none;
  margin: 18px 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.sum li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-12) var(--space-14);
  border: 2px solid var(--ink);
  background: var(--panel);
}
.sum .n {
  font-family: var(--data);
  font-size: var(--text-32);
  font-weight: 600;
  line-height: 1;
}
.sum .n.word {
  padding-right: var(--space-24);
  font-size: var(--text-22);
  line-height: 1.15;
}
.sum .lab {
  font-family: var(--data);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sum .cap {
  margin: 0;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-12);
  font-weight: 400;
}
.sum .hint {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.plate .faq {
  margin: 0 0 var(--space-14);
}
.plate .faq-body {
  padding-left: var(--space-14);
}
.plate .faq-body pre {
  margin-top: 0;
}
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--space-16);
  margin: 0 0 var(--space-10);
}
.facts dt {
  color: var(--muted);
  font-size: var(--text-14);
}
.facts dd {
  margin: 0 0 var(--space-8);
}
@media (min-width: 640px) {
  .facts {
    grid-template-columns: 14em minmax(0, 1fr);
  }
  .facts dt {
    padding-top: var(--space-2);
  }
}

/* Bar charts, each with its figures as a table beside it. */
.chart {
  max-width: 760px;
  margin: 0 0 var(--space-12);
}
.cols .chart {
  max-width: none;
}
.bars {
  display: block;
  width: 100%;
  height: 96px;
  border-bottom: 2px solid var(--ink);
}
.bar-now {
  fill: var(--alert);
}
.bar-now-b {
  fill: var(--alert);
  fill-opacity: 0.55;
}
.bar-a {
  fill: var(--ink);
}
.bar-b {
  fill: var(--muted);
}
.chart .axis {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-12);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
  margin: var(--space-6) 0 0;
  font-size: var(--text-14);
}
.legend .key {
  display: inline-block;
  width: 12px;
  height: 12px;
  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: 44px;
  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;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-left: var(--space-2);
  border-right: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  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(--space-10);
  overflow-x: auto;
  border: 2px solid var(--ink);
  background: var(--panel);
  container-type: inline-size;
}
.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-15);
  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;
  box-sizing: border-box;
  max-width: 100cqw;
  padding: var(--space-8) var(--space-10);
  caption-side: top;
  color: var(--muted);
  font-size: var(--text-14);
  text-align: left;
}
.data th,
.data td {
  padding: var(--space-6) var(--space-10);
  border-top: 1px solid var(--soft);
  text-align: left;
  vertical-align: top;
}
.data thead th {
  border-top: 0;
  color: var(--muted);
  font-size: var(--text-14);
  font-weight: 500;
  vertical-align: bottom;
}
.data tbody th {
  font-weight: 400;
}
.data .fig {
  font-family: var(--data);
  font-size: var(--text-14);
  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;
}
.data time {
  white-space: nowrap;
}
/* A table of sentences scrolls on a narrow screen. Folded to fit, it runs to a word a line. */
.data.prose {
  min-width: 640px;
}
.data .sub {
  display: block;
  padding-left: var(--space-16);
  color: var(--muted);
}
.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: 52px;
}
@media (min-width: 560px) {
  .ranks,
  .ranks-head {
    --thumb: 64px;
  }
}
.ranks {
  max-width: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.ranks li {
  display: grid;
  grid-template-columns: 26px 34px var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas: "rk mv pic nm ct" "rk mv pic nm st";
  gap: 0 var(--space-8);
  align-items: center;
  margin: 0;
  padding: var(--space-6) var(--space-10);
}
.ranks li + li {
  border-top: 1px solid var(--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-12);
}
.ranks .mv .up {
  color: var(--ok);
}
.ranks .mv .down {
  color: var(--alert);
}
.ranks .pic {
  grid-area: pic;
}
.ranks .pic .mug {
  width: var(--thumb);
}
.ranks .nm {
  grid-area: nm;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ranks .nm a {
  text-decoration: none;
}
.ranks .nm a:hover {
  text-decoration: underline;
}
.ranks .nm i {
  display: block;
  font-weight: 400;
  font-size: var(--text-18);
  line-height: 1.1;
}
.ranks .split {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 400;
}
.ranks .split .l {
  display: block;
}
.ranks .ct {
  grid-area: ct;
  justify-self: end;
  font-family: var(--data);
  font-weight: 600;
}
.ranks .st {
  grid-area: st;
  justify-self: end;
}
.ranks.no-mv li {
  grid-template-columns: 26px var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas: "rk pic nm ct" "rk pic nm st";
}
.ranks.no-rk.no-mv li {
  grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas: "pic nm ct" "pic nm st";
}
.ranks.catches .ct,
.ranks.catches .ct time {
  color: var(--muted);
  font-weight: 400;
  text-align: right;
}
@media (min-width: 640px) {
  .ranks li {
    grid-template-columns: 30px 40px var(--thumb) minmax(0, 1fr) 90px 100px;
    grid-template-areas: "rk mv pic nm ct st";
  }
  .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 {
  max-width: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.rows li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  margin: 0;
  padding: var(--space-6) var(--space-10);
}
.rows li + li {
  border-top: 1px solid var(--soft);
}
.imps .claim {
  display: block;
  font-size: var(--text-16);
}
.imps .claim strong {
  font-weight: 600;
}
.imps .claim > span {
  display: block;
  color: var(--muted);
  font-size: var(--text-15);
}
.imps .fate {
  max-width: 46%;
  font-size: var(--text-14);
  text-align: right;
}
.imps .fate time {
  display: block;
  color: var(--muted);
}

/* The stamps and what each means. */
.stamps {
  display: grid;
  gap: var(--space-6);
  max-width: none;
  margin: 0 0 var(--space-10);
}
.stamps div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: baseline;
}
.stamps dd {
  margin: 0;
}
main .tally {
  max-width: 760px;
  margin-bottom: var(--space-10);
}
@media (min-width: 640px) {
  main .tally {
    grid-template-columns: repeat(4, 1fr);
  }
  main .tally div:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* robots.txt, grouped, with the experiments in the same panel style. */
.rules {
  max-width: none;
  margin: 0 0 var(--space-10);
  padding: var(--space-4) 0;
  list-style: none;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.rules > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-12);
  margin: 0;
  padding: 7px var(--space-10);
  border-top: 1px solid var(--soft);
}
.rules > li:first-child {
  border-top: 0;
}
.rules code {
  grid-column: 1 / -1;
  font-size: var(--text-14);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.rules .where {
  color: var(--muted);
  font-size: var(--text-14);
}
.rules .tal {
  align-self: center;
  font-family: var(--data);
  font-size: var(--text-13);
  text-align: right;
}
.rules .means {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 14.5px;
}
.rules > li.plain {
  padding: 3px var(--space-10);
  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.agents {
  margin-top: var(--space-6);
  padding-top: 7px;
  border-top: 1px solid var(--soft);
}
.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;
  max-width: none;
  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 {
  margin: 0;
  color: var(--ink);
  font-family: var(--data);
  font-size: var(--text-13);
}
.guests a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.guests .mug {
  flex: none;
  width: 33px;
}

.lkey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-14);
  max-width: none;
  margin: 0 0 var(--space-8);
  color: var(--muted);
  font-size: var(--text-13);
}
.lkey .lg {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.lkey .sw {
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
}
.sw.k {
  background: var(--ok);
}
.sw.b {
  background: var(--alert);
}
.bar {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.bar .k {
  flex: 0 1 auto;
  background: var(--ok);
}
.bar .k.plain {
  background: var(--muted);
}
.bar .b {
  flex: 0 0 auto;
  min-width: 2px;
  background: var(--alert);
}

/* A counted row and an experiment: the line on the left, one block on the right, the fold underneath. */
.rules > li.led {
  grid-template-columns: minmax(0, 1fr) 16rem;
  align-items: start;
}
.rules .rulecol {
  min-width: 0;
}
.rules .rulecol code {
  display: block;
}
.rules .big {
  display: grid;
  justify-items: end;
  gap: 3px;
  align-self: center;
  width: 16rem;
  max-width: 100%;
  justify-self: end;
}
.rules .big .n {
  font-family: var(--data);
  font-size: var(--text-28);
  font-weight: 600;
  line-height: 1;
}
.rules .big .cap {
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-12);
  text-align: right;
}
.rules .big.plain .n {
  color: var(--muted);
}
.rules .big .bar {
  width: 100%;
}
.rules .sent {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
}
.rules .sent span + span {
  margin-left: var(--space-14);
}
.rules table.groups {
  font-size: var(--text-13);
}
@media (max-width: 639px) {
  .rules > li.led {
    grid-template-columns: minmax(0, 1fr);
  }
  .rules .big {
    justify-self: stretch;
    justify-items: start;
    width: auto;
    margin-top: var(--space-4);
  }
  .rules .big .cap {
    text-align: left;
  }
}

/* The notices. */
.shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-14);
  margin-top: var(--space-14);
}
@media (min-width: 760px) {
  .shelf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.notice {
  padding: var(--space-10) var(--space-12);
  border: 2px solid var(--ink);
  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 0 var(--space-6);
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-13);
}
.notice p {
  margin: 0 0 var(--space-6);
}
.notice .none {
  background: var(--paper);
}
.notice pre {
  max-width: none;
  margin: 0;
  background: var(--paper);
}
.readers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  max-width: none;
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.readers li {
  width: 64px;
  margin: 0;
  text-align: center;
}
.readers a {
  display: block;
  text-decoration: none;
}
.readers .mug {
  width: 44px;
  margin: 0 auto;
}
.readers .n,
.readers .mark {
  display: block;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-11);
}
.readers .mark {
  font-size: var(--text-10);
}

/* The alignment chart: nine squares, each scored species standing in its own where its scores put it. */
.plot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 1;
  width: 100%;
  margin: 0 0 var(--space-10);
  border: 2px solid var(--ink);
  background: var(--panel);
}
.plot .cell {
  position: relative;
  padding: 5px 7px;
  border: 1px solid var(--soft);
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.15;
}
/* The whole chart names its squares with headers on its edges, so the chip a square carries is kept for the zoomed
   view's heading and stays out of sight here. */
.plot .cell .tag {
  display: none;
}
/* Every portrait on the chart is the same size. --dh is half its side; the script-free position is clamped so the whole
   portrait stays inside its square. */
.dot {
  --dh: 22px;
  position: absolute;
  display: block;
  width: calc(var(--dh) * 2);
  margin: calc(var(--dh) * -1) 0 0 calc(var(--dh) * -1);
  text-decoration: none;
}
.dot .mug {
  width: 100%;
}
/* Whichever portrait of a pile is hovered or focused comes to the top so its picture can be seen. */
.plot > .dot:hover,
.plot > .dot:focus-visible {
  z-index: var(--z-100) !important;
}
/* The number of bots in a crowded square, plain in its top right corner. */
.stack-count {
  position: absolute;
  top: 5px;
  right: 7px;
  z-index: var(--z-200);
  color: var(--ink);
  font-family: var(--data);
  font-size: var(--text-13);
  line-height: 1;
}
/* Once the script has made the squares buttons they highlight and zoom. */
.plot button.cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  font: inherit;
  font-size: var(--text-13);
  line-height: 1.15;
  text-align: left;
  vertical-align: top;
  cursor: pointer;
  border-radius: 0;
  appearance: none;
}
.plot button.cell:hover,
.plot button.cell:focus-visible {
  background: var(--paper);
  color: var(--ink);
}
.plot button.cell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
.plot.zoomed > .cell,
.plot.zoomed > .dot {
  display: none;
}
.zoom {
  --z: 76px;
  --half: 38px;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) 26px;
  background: var(--panel);
}
.zoom-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-12);
  align-items: center;
  padding: var(--space-8) var(--space-12);
}
.zoom-title {
  justify-self: start;
  margin: 0;
  font-size: var(--text-22);
}
.zoom-title .tag {
  display: inline-block;
  padding: var(--space-2) var(--space-10);
  font-size: var(--text-17);
  line-height: 1.4;
}
.zoom-title:focus {
  outline: none;
}
.zoom-title:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.zoom-range {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-13);
}
.zoom-back {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 7px var(--space-12);
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-14);
  cursor: pointer;
}
.zoom-back:hover,
.zoom-back:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.zoom-cap {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 var(--space-12);
  color: var(--muted);
  font-size: var(--text-11);
  text-align: right;
}
.zoom-cap-y {
  grid-column: 1 / -1;
  text-align: left;
}
.zoom-area {
  position: relative;
  grid-column: 2;
  grid-row: 3;
  margin-right: var(--space-12);
  border-top: 1px solid var(--soft);
  border-left: 1px solid var(--soft);
  background: var(--paper);
}
.zoom-data {
  position: absolute;
  inset: 0;
}
.zoom-ticks {
  position: relative;
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-11);
}
.zoom-ticks-in {
  position: absolute;
}
.zoom-y {
  grid-column: 1;
  grid-row: 3;
}
.zoom-y .zoom-ticks-in {
  inset: var(--half) 4px var(--half) 0;
}
.zoom-y .zoom-tick {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}
.zoom-x {
  grid-column: 2;
  grid-row: 4;
  margin-right: var(--space-12);
}
.zoom-x .zoom-ticks-in {
  inset: 4px var(--half) 0;
}
.zoom-x .zoom-tick {
  position: absolute;
  transform: translateX(-50%);
}
.zoom .dot {
  width: var(--z);
  margin: 0;
  transform: translate(-50%, -50%);
}
.zoom .dot .mug {
  width: 100%;
}
.zoom-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--muted);
}
@media (max-width: 599px) {
  .zoom {
    --z: 54px;
    --half: 27px;
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .zoom-head {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-8);
  }
  .zoom-back {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
  }
  .zoom-title {
    font-size: var(--text-19);
  }
  .zoom-area,
  .zoom-x {
    margin-right: var(--space-8);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .zoom {
    animation: zoom-in var(--dur-180) ease-out;
  }
  @keyframes zoom-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
  }
}
.readouts {
  max-width: 560px;
  min-height: 2.8em;
  margin: var(--space-10) 0 var(--space-6);
}
.align-notes .readouts {
  max-width: none;
}
.align-notes .fine {
  margin-top: 0;
}
@media (min-width: 600px) {
  .plot.wide {
    aspect-ratio: 3 / 2;
  }
}
/* Wide screens: the chart runs the full content width as nine wide cells, and the notes sit in two columns under it. */
@media (min-width: 820px) {
  .plot.wide .dot {
    --dh: 26px;
  }
}
@media (min-width: 920px) {
  .plot.wide {
    aspect-ratio: 2 / 1;
  }
  .plot.wide .cell {
    padding: var(--space-8) var(--space-10);
    font-size: var(--text-14);
  }
  /* The tight portrait size the census rows use, once a cell is tall enough to hold it at the bottom of its range. */
  @media (min-width: 1100px) {
    .plot.wide .dot {
      --dh: 30px;
    }
  }
  .align-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    align-items: start;
  }
  .align-notes .readouts {
    margin-top: 0;
  }
}
.readout {
  margin: 0;
  scroll-margin-top: 140px;
}
.readout:not(.idle) {
  display: none;
}
.readout:target,
.readout.picked {
  display: block;
}
.readouts:has(.readout.picked) .readout:target:not(.picked) {
  display: none;
}
.readouts:has(.readout:target) .idle,
.readouts:has(.readout.picked) .idle {
  display: none;
}
.scorelist {
  color: var(--muted);
}
.orderlist {
  max-width: 68ch;
  margin: 0 0 var(--space-10);
}
.orderlist div {
  margin-bottom: var(--space-8);
}
.orderlist dt {
  font-weight: 600;
}
.orderlist dd {
  margin: 0;
  color: var(--muted);
}
.inputs {
  max-width: 900px;
  border-top: 1px solid var(--soft);
}

/* The edition note signs off the species list at the bottom right. */
main .edition-note {
  max-width: none;
  margin-top: var(--space-24);
  text-align: right;
}

/* The census ledger: a header row over the rows, a stats hint beside each count, and a fold for the stamps. */
.ranks-head {
  display: grid;
  grid-template-columns: 26px 34px var(--thumb) minmax(0, 1fr) auto;
  grid-template-areas: "rk mv pic nm ct";
  align-items: center;
  gap: 0 var(--space-8);
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-12);
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 500;
}
.ranks-head .h-st {
  display: none;
}
.ranks-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  white-space: nowrap;
}
.ranks-head .h-rk {
  grid-area: rk;
  grid-column: 1 / 3;
}
.ranks-head .h-nm {
  grid-area: nm;
}
.ranks-head .h-ct {
  grid-area: ct;
  justify-self: end;
}
.ranks-head .h-st {
  grid-area: st;
  justify-self: end;
}
.ranks-head .hint {
  margin-left: var(--space-4);
}
.ranks .ct {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
.ranks .ct .hint {
  margin: -3px 0 -3px var(--space-6);
}
.ranks .ct .gap {
  flex: none;
  width: 24px;
  height: 18px;
  margin-left: var(--space-6);
}
.ranks-head .tip,
.ranks .ct .tip {
  white-space: normal;
}
@media (min-width: 640px) {
  .ranks-head {
    grid-template-columns: 30px 40px var(--thumb) minmax(0, 1fr) 90px 100px;
    grid-template-areas: "rk mv pic nm ct st";
  }
  .ranks-head .h-st {
    display: inline-flex;
  }
}
.fold {
  max-width: 900px;
  margin: 0 0 var(--space-16);
}
.fold[open] summary {
  margin-bottom: var(--space-6);
}

/* 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);
}
.faq-all {
  min-height: 44px;
  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 {
  max-width: none;
  margin: 0 0 var(--space-14);
  border: 2px solid var(--ink);
  background: var(--panel);
}
.faq-row {
  border-top: 2px solid var(--ink);
  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(--space-10) var(--space-14);
  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 h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-22);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.faq-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.faq-icon svg {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}
.faq-chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin: 0 var(--space-4) var(--space-4) 0;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  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(--space-16) 0 var(--space-6);
  font-size: var(--text-20);
}
@media (max-width: 559px) {
  .faq-row > summary {
    gap: var(--space-10);
    padding: var(--space-8) var(--space-10);
  }
  .faq-row > summary h2 {
    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);
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-chev {
    transition: none;
  }
}

/* The intro hint after the masthead tagline: upright, centred on the text's x-height, panel under the tagline. */
.mast .sub .hint {
  position: static;
  margin-left: var(--space-8);
  font-style: normal;
  vertical-align: 0.05em;
}
.mast .sub .hint summary {
  font-style: normal;
}
.mast .sub .hint .tip {
  z-index: var(--z-10);
  max-width: min(40em, 100%);
  padding-top: var(--space-8);
}
.mast .sub .hint .tip-body {
  font-family: var(--body);
  font-size: var(--text-14);
  line-height: 1.4;
}

/* The Support page: tiers use the Rules ledger rows; the action sits under the price. */
.rules .big .give {
  font-family: var(--data);
  font-size: var(--text-13);
  font-weight: 600;
}
.rules .big .give.soon {
  color: var(--muted);
  font-weight: 400;
}

/* The view from inside the Climb. The script unhides the stage; the canvas is drawn at whole-pixel scale. */
.climb-stage {
  margin: 0 0 1.5rem;
}
.climb-stage canvas {
  display: block;
  max-width: 100%;
  border: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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: a plain form above the result box. */
form.office {
  max-width: 62ch;
  margin: 0 0 var(--space-10);
}
form.office label {
  display: block;
  margin-bottom: var(--space-4);
  font-weight: 600;
}
form.office input,
form.office select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-8);
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

/* Send your bot: the one button, the numbered steps, the code, and a line when a request is turned away. */
.getcode {
  padding: var(--space-8) var(--space-16);
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--data);
  font-size: var(--text-14);
  font-weight: 600;
  cursor: pointer;
}
.getcode:hover,
.getcode:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.steps {
  padding-left: 1.4em;
}
.code code {
  font-family: var(--data);
  font-size: var(--text-28);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.notice {
  border: 2px solid var(--alert);
  padding: var(--space-8) var(--space-12);
}

/* Case files: one boxed record for each session that failed the check. Full width, a gap between boxes, no rules inside them. */
main .cases-total {
  max-width: none;
}
ol.cases {
  max-width: none;
  margin: 0 0 var(--space-14);
  padding: 0;
  list-style: none;
}
ol.cases > li.case {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 var(--space-14);
  align-items: start;
  margin: 0 0 var(--space-10);
  padding: var(--space-10) var(--space-12);
  border: 2px solid var(--ink);
  background: var(--panel);
  scroll-margin-top: 16px;
}
ol.cases > li.case:target {
  background: var(--paper);
}
ol.cases .pic .mug {
  width: 56px;
}
ol.cases .body p {
  max-width: none;
  margin: 0 0 var(--space-6);
}
ol.cases .case-head {
  color: var(--muted);
  font-family: var(--data);
  font-size: var(--text-14);
}
ol.cases .case-head a {
  font-weight: 600;
}
ol.cases .case-name {
  font-weight: 600;
}
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-28);
  line-height: 1;
}
ol.cases .members {
  max-width: none;
  margin: var(--space-6) 0 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: var(--text-14);
}
ol.cases .did {
  max-width: none;
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: var(--text-14);
}
ol.cases .did li {
  margin: 0 0 var(--space-2);
}
@media (min-width: 920px) {
  ol.cases .did {
    columns: 2;
    column-gap: 40px;
  }
  ol.cases .did li {
    break-inside: avoid;
  }
}
.pager {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  margin: 0 0 var(--space-14);
}
.pager a {
  font-weight: 600;
}
/* How a page opens: the figure strip (.sum, shared with the species page), one sentence, one fold. */
main .intro-caveat {
  max-width: none;
  margin: 0 0 var(--space-12);
  font-weight: 600;
}
.intro .lede {
  max-width: none;
}
.intro-fold {
  max-width: none;
  margin: 0 0 var(--space-14);
  border: 2px solid var(--ink);
  background: var(--panel);
}
.intro-fold > summary h2 {
  font-size: var(--text-18);
}
.intro-fold .faq-body {
  padding: var(--space-2) var(--space-14) var(--space-10);
}
.intro-fold .faq-body p {
  max-width: none;
  margin: 0 0 var(--space-6);
}
.intro-fold .faq-body p:last-child {
  margin-bottom: 0;
}
/* A cell with a portrait: the portrait stands left, centred against the number over its caption. */
.sum li.has-pic {
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  align-content: start;
  gap: var(--space-4) var(--space-12);
}
.sum li.has-pic .lab {
  grid-column: 1 / -1;
}
.sum li.has-pic .mug {
  grid-column: 1;
  grid-row: span 2;
  width: 48px;
}
.sum li.has-pic .n,
.sum li.has-pic .cap {
  grid-column: 2;
}

/* Wide screens. One shared rule: boxes, tables and charts take the full content width; running prose keeps its
   reading measure and is given a companion beside it (a pair of sections, or two balanced columns). */
.sides > section,
.sides > div {
  min-width: 0;
}
@media (min-width: 920px) {
  .sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
  }
  .sides h2:first-child {
    margin-top: 20px;
  }
  .plate {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
  }
  .plate > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .plate > section.half {
    grid-column: auto;
  }
  .plate pre {
    max-width: none;
  }
  main .tally {
    max-width: none;
  }
  .faq-body.long {
    columns: 2;
    column-gap: 40px;
  }
  .faq-body.long > * {
    break-inside: avoid;
    max-width: none;
  }
  .faq-body.long h3 {
    break-after: avoid;
  }
  form.office {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0 var(--space-16);
    align-items: end;
    max-width: none;
  }
  form.office p {
    max-width: none;
  }
  main .none {
    max-width: none;
  }
}

/* Fine print: terms of doing something, in plain small type at the bottom of a page under the action. The guest list on the
   Private Beach page spans its row of the robots.txt panel. */
main .fineprint {
  margin-top: var(--space-24);
}
main .fineprint h2 {
  font-size: var(--text-16);
}
main .fineprint ul {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
main .fineprint li,
main .fineprint p {
  max-width: 68ch;
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: 13.5px;
}
@media (min-width: 920px) {
  main .fineprint ul {
    columns: 2;
    column-gap: 40px;
  }
  main .fineprint li {
    break-inside: avoid;
  }
}
.rules > li.agents > .guests {
  grid-column: 1 / -1;
}

/* Notes inside a "How to read this page" fold: definitions in a grid, rule cells side by side, plain lines. */
.notes-defs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) 18px;
  max-width: none;
  margin: 0 0 var(--space-8);
}
.notes-defs dt {
  margin: var(--space-8) 0 0;
  color: var(--ink);
  font-weight: 700;
}
.notes-defs dd {
  margin: 0;
}
@media (min-width: 600px) {
  .notes-defs {
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
    gap: var(--space-6) 18px;
  }
  .notes-defs dt {
    margin: 0;
  }
}
.intro-fold .notes-rules {
  margin: var(--space-4) 0 var(--space-8);
}
.intro-fold .faq-body .notes-tags {
  margin: 0 0 var(--space-6);
}
.intro-fold .notes-cells {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
}
.intro-fold .notes-cells li {
  padding: var(--space-8) var(--space-12);
}
.intro-fold .notes-cells .n {
  font-size: var(--text-22);
}
.intro-fold .notes-cells .cap {
  font-size: var(--text-13);
}
.intro-fold .faq-body > * + p {
  margin-top: var(--space-8);
}

/* The "Additional info" fold at the foot of a page: an inline fold whose sections each carry a short label. */
.info-fold {
  margin-top: var(--space-24);
}
.info-body {
  padding: 0 0 var(--space-6);
}
.info-sec + .info-sec {
  margin-top: 18px;
}
.info-body p,
.info-body ul {
  max-width: none;
}
.info-body .info-sec > p {
  margin: 0 0 var(--space-6);
}
.info-label {
  margin: 0 0 var(--space-6);
  font-size: var(--text-16);
  font-weight: 700;
}
.info-fold .notes-rules {
  margin: var(--space-4) 0 var(--space-8);
}
.info-fold .notes-tags {
  margin: 0 0 var(--space-6);
}
.info-fold .notes-cells {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
}
.info-fold .notes-cells li {
  padding: var(--space-8) var(--space-12);
}
.info-fold .notes-cells .n {
  font-size: var(--text-22);
}
.info-fold .notes-cells .cap {
  font-size: var(--text-13);
}
.info-fold .info-sec > .stamps {
  margin-bottom: var(--space-10);
}

/* The alignment chart's axis captions: Lawful along the top, Good down the side, outside the plot so the zoomed view keeps them. */
.plot-frame {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: var(--space-4);
}
.axis-cap {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4) var(--space-16);
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.3;
}
.axis-cap strong {
  color: var(--ink);
}
.axis-cap-x {
  grid-column: 3;
  grid-row: 1;
  margin-bottom: var(--space-2);
}
/* The Good meaning runs down the far-left edge in the same direction as the row headers beside it. 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: 3;
  writing-mode: vertical-rl;
  contain: size;
  width: 1.2em;
  justify-content: center;
  flex-wrap: wrap;
  margin-right: var(--space-2);
  font-size: var(--text-12);
  line-height: 1.2;
}
/* Column headers across the top and row headers down the left, each centred over its column or beside its row. The
   2px of padding is the plot's border, so every header lines up with the squares inside it. */
.axis-heads {
  display: grid;
  gap: 0;
  color: var(--ink);
  font-family: var(--data);
  font-size: var(--text-12);
  line-height: 1.2;
}
.axis-heads-col {
  grid-column: 3;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 var(--space-2);
  margin-bottom: var(--space-4);
}
.axis-heads-row {
  grid-column: 2;
  grid-row: 3;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: var(--space-2) 0;
}
.axis-head {
  display: grid;
  place-items: center;
  text-align: center;
}
.axis-heads-row .axis-head {
  writing-mode: vertical-rl;
}
.axis-head.on {
  font-weight: 700;
}
/* A zoomed square has its own axes, so the whole chart's headers stand aside and keep their room. */
.plot-frame:has(.plot.zoomed) .axis-heads {
  visibility: hidden;
}
/* The title line of an intro: the heading, then the "i" holding the sentence and the clipboard holding the totals.
   The panels hang from the whole line, so on a phone they open under the title at the content width. */
.titlebar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-8);
}
.titlebar h1 {
  margin-right: var(--space-4);
}
.titlebar .hint {
  position: static;
  margin: 0;
}
.titlebar .hint .tip {
  top: 100%;
  left: 0;
  max-width: min(44em, 100%);
  padding-top: 0;
}
.tip-figs {
  display: grid;
  gap: var(--space-8);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tip-figs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--space-12);
}
.tip-figs li.has-pic {
  grid-template-columns: 36px auto minmax(0, 1fr);
}
.tip-figs .lab {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--text-12);
}
.tip-figs .mug {
  grid-row: span 2;
  width: 36px;
}
.tip-figs .n {
  font-family: var(--data);
  font-size: var(--text-18);
  font-weight: 600;
}
.tip-figs .cap {
  color: var(--muted);
  font-size: var(--text-13);
}
/* A species header: the name with its totals clipboard and the stamp and verdict tags at the right, then the Latin
   name and the joke. Under 600px the tags drop to the line under the Latin name, left-aligned. */
.plate .ident {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name tags"
    "latin latin"
    "joke joke";
  align-items: center;
  column-gap: var(--space-12);
}
.plate .namerow {
  grid-area: name;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}
.plate .namerow .hint {
  position: static;
  margin: 0;
}
.plate .ident .stamps {
  grid-area: tags;
  justify-self: end;
  margin: 0;
}
.plate .ident .latin {
  grid-area: latin;
}
.plate .ident .drawing {
  grid-area: joke;
}
@media (max-width: 599px) {
  .plate .ident {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "latin"
      "tags"
      "joke";
  }
  .plate .ident .stamps {
    justify-self: start;
    margin: var(--space-2) 0 var(--space-8);
  }
}
.who-grid {
  margin-bottom: var(--space-16);
}
.who-grid dd p {
  margin: 0 0 var(--space-6);
}
.who-grid dd ul {
  margin: 0 0 var(--space-6);
}
/* A confidence rating: three small pips in the ink colour, filled up to the level, always beside the words. */
.conf {
  white-space: normal;
}
.pips {
  display: inline-flex;
  gap: var(--space-2);
  margin-right: var(--space-6);
  vertical-align: 0;
}
.pips i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--ink);
  box-sizing: border-box;
}
.pips i.on {
  background: var(--ink);
}
.plot-frame > .plot {
  grid-column: 3;
  grid-row: 3;
}
@media (max-width: 599px) {
  .axis-cap-x {
    flex-wrap: wrap;
  }
}