/* style.css: the styles of the persona-steering page (index.html), linked from its <head> after the Google Fonts
   stylesheet. Layout, colours and the page's parts come first; the TYPOGRAPHY block at the end holds every type rule
   (families, sizes, weights, line heights, figures and the measure) and is described in TYPOGRAPHY.md. */

/* Layout: one centred column. Prose keeps a reading width; the figures and the two explorers run wider.
   A slim bar of section links sticks to the top. Colours of the ways of steering match the thread's figures. */
:root {
  /* the neutrals are willmayner.com's: stone in the light theme, gray in the dark */
  --bg: #fafaf9;
  --surface: #ffffff;
  --well: #f5f5f4;
  --ink: #1c1917;
  --ink-2: #44403c;
  --muted: #57534e;
  --rule: #d6d3d1;
  --rule-2: #e7e5e4;
  --link: #57534e;
  --link-hover: #1c1917;
  --focus: #1f6feb;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 3px 10px rgba(28, 25, 23, 0.04);
  --c-vector: #0072b2;
  --t-vector: #005f95;
  --c-neurons: #d55e00;
  --t-neurons: #a94800;
  --tint-neurons: #fcf0e7;
  --tint-neurons-2: #f2c6a5;
  /* every control has the one dark grey of the thread's figures; where they share a chart, marker and line style tell
     them apart (MARK and DASH in app.js) */
  --c-control: #5e5e5e;
  --c-pcs: var(--c-control);
  --t-pcs: var(--c-control);
  --c-at18: var(--c-control);
  --t-at18: var(--c-control);
  --c-rot: var(--c-control);
  --t-rot: var(--c-control);
  --c-rand: var(--c-control);
  --t-rand: var(--c-control);
  --banner: #3f4650;   /* the banner and edge of the randomly rotated directions' card in the result */
  --plate: var(--surface);   /* the card under the thread's images, the colour they are drawn on in each theme */
  --c-none: #c4cad2;
  --pos: #d55e00;
  --neg: #3d6ca6;
  --s1: #c6cdd6;
  --s2: #8a94a1;
  --s3: #15181c;
  --s-ring: #15181c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111827;
    --surface: #1f2937;
    --well: #2b3647;
    --ink: #f3f4f6;
    --ink-2: #d1d5db;
    --muted: #9ca3af;
    --rule: #374151;
    --rule-2: #2b3647;
    --link: #d1d5db;
    --link-hover: #f3f4f6;
    --focus: #6aa7ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.25);
    --c-vector: #56b4e9;
    --t-vector: #82c6ef;
    --c-neurons: #ff8a3d;
    --t-neurons: #ffa066;
    --tint-neurons: #2a1c12;
    --tint-neurons-2: #6a3a18;
    --c-control: #b0b0b0;
    --banner: #e3e7ec;
    --c-none: #48505a;
    --pos: #ff8a3d;
    --neg: #82a9de;
    --s1: #3b434e;
    --s2: #77828f;
    --s3: #e9ecf0;
    --s-ring: #e9ecf0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --well: #2b3647;
  --ink: #f3f4f6;
  --ink-2: #d1d5db;
  --muted: #9ca3af;
  --rule: #374151;
  --rule-2: #2b3647;
  --link: #d1d5db;
  --link-hover: #f3f4f6;
  --focus: #6aa7ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.25);
  --c-vector: #56b4e9;
  --t-vector: #82c6ef;
  --c-neurons: #ff8a3d;
  --t-neurons: #ffa066;
  --tint-neurons: #2a1c12;
  --tint-neurons-2: #6a3a18;
  --c-control: #b0b0b0;
  --banner: #e3e7ec;
  --c-none: #48505a;
  --pos: #ff8a3d;
  --neg: #82a9de;
  --s1: #3b434e;
  --s2: #77828f;
  --s3: #e9ecf0;
  --s-ring: #e9ecf0;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 56px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 72px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--bg);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
}

.skip:focus {
  left: 16px;
  z-index: 40;
  background: var(--surface);
  padding: 6px 10px;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: 1120px;
  margin-inline: auto;
}

h1,
h2 {
  text-wrap: balance;
  margin: 0;
}

h3 {
  margin: 0;
  text-wrap: balance;
}

.jump {
  white-space: nowrap;
}

/* masthead: the headline, then the thread's opening figure and the standfirst, byline and buttons
   (.mast-body). From 900px wide the headline and text form the left column and the figure stands on the right
   from the top, as tall as the screen allows, so that both are seen at once (Will, 30 October). Narrower, the figure
   comes right after the headline at the column's width (up to 880px), with a quiet line above it that skips to the
   text. A click enlarges the figure in a dialog (.lightbox). The figure is drawn twice, on white and on the dark
   theme's surface, and the page's theme shows one of them. The colour theme toggle sits at the top right, in the top
   padding. */
.masthead {
  position: relative;
  padding-block: 44px 26px;
  display: grid;
  gap: 24px;
}

.mast-text,
.mast-body {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.opener-wrap {
  width: 100%;
  max-width: 880px;
  justify-self: center;
  margin-block: 10px 8px;
}

.opener-skip {
  margin: 0 0 8px;
  color: var(--muted);
}

.opener-skip a {
  white-space: nowrap;
}

#abstract {
  scroll-margin-top: 24px;
}

#abstract:focus-visible {
  outline: none;
}

.opener {
  gap: 6px;
}

.opener a {
  display: block;
  cursor: zoom-in;
  border-radius: 10px;
}

.opener img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

@media (min-width: 900px) {
  /* the headline, standfirst, byline and buttons in the left column; the figure on the right from the top, across both
     rows (the last row takes the height the figure adds) */
  .mast-text {
    grid-template-columns: minmax(0, 1fr) min-content;
    grid-template-rows: auto 1fr;
    column-gap: 48px;
  }

  .mast-text>h1 {
    grid-column: 1;
    grid-row: 1;
  }

  .mast-body {
    grid-column: 1;
    grid-row: 2;
    margin-top: 8px;
  }

  .opener-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .opener-skip {
    display: none;
  }

  /* the figure's height: the screen's, less the masthead's top padding (44px) and, below it, its caption and the
     bottom padding (about 76px), so that all of it shows on the first screen; at least 520px (on a shorter screen it
     scrolls rather than shrink further) and at most 875px (592px wide, which leaves the text about 480px). Its width
     follows from the image's width and height attributes, so nothing moves when it loads. */
  .opener img {
    width: auto;
    height: clamp(520px, calc(100vh - 120px), 875px);
  }
}

/* from 1200px wide there is room for a larger figure: the masthead is 60px wider than the sections below it, and the
   figure is about 10% larger. It still ends on the first screen, though on a shorter screen its caption may not. */
@media (min-width: 1200px) {
  .masthead.wrap {
    max-width: 1180px;
  }

  .opener img {
    height: clamp(572px, calc(100vh - 48px), 962px);
  }
}

/* from 1440px wide, a section with one chart and short text: the chart and its caption beside the heading and text (460px),
   inside the section's usual width, so that its margins match the other sections'. */
@media (min-width: 1440px) {
  #set-size,
  #necessity {
    grid-template-columns: minmax(0, 1fr) 612px;
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    align-items: start;
  }

  #set-size>figure,
  #necessity>figure {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #set-size>:not(figure),
  #necessity>:not(figure) {
    grid-column: 1;
  }
}

/* from 1100px wide, the three captions under the result panel in three columns, with the links below them */
@media (min-width: 1100px) {
  #result {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }

  #result>* {
    grid-column: 1 / -1;
  }

  #result>p.caption {
    grid-column: auto;
    max-width: none;
  }
}

/* parts made for one theme only (the opening figure's two drawings, a colour named in a caption): each is hidden while
   the other theme shows, whether the toggle or the device chose it, and otherwise keeps its own display */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .on-dark {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light {
    display: none;
  }
}

:root[data-theme="light"] .on-dark,
:root[data-theme="dark"] .on-light {
  display: none;
}

/* the colour theme toggle: three 16px icons, muted until hovered or chosen; the chosen one sits on a faint pill in the
   well colour, a step from the page's ground in both themes. Each target is 24px square. It sits in the masthead's top
   padding, above the figure's top right corner. */
.theme {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  gap: 2px;
}

.theme label {
  position: relative;
  display: block;
}

.theme input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.theme span {
  display: block;
  padding: 4px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}

.theme svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme label:hover span {
  color: var(--ink);
}

.theme input:checked+span {
  background: var(--well);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.theme input:focus-visible+span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* the opening figure, enlarged (the script in <head> makes the dialog): as wide as the window allows, up to the
   figure's own 1200px, over the dimmed page, and scrolling when it is taller than the window */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 60px 16px 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lightbox[open] {
  display: flex;
  flex-direction: column;
}

.lightbox::backdrop {
  background: rgba(8, 10, 13, 0.82);
}

/* centred when it is shorter than the window (a phone), from the top when it is taller */
.lightbox img {
  display: block;
  width: min(100%, 1200px);
  height: auto;
  margin: auto;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule);
}

.lightbox-close {
  position: fixed;
  top: 12px;
  right: 28px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.lightbox-close:hover {
  background: var(--well);
}

.lightbox-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* the page behind the dialog does not scroll (keeping the scroll bar's room instead left a strip the backdrop did not
   cover, at the window's right edge) */
html.lightbox-open {
  overflow: hidden;
}

.dek {
  color: var(--ink-2);
  margin: 0;
}

.dek+.dek {
  margin-top: 0;
}

.byline {
  margin: 0;
  color: var(--muted);
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.cta {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 8px;
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
}

.cta:hover {
  background: var(--ink-2);
  color: var(--bg);
}

.cta.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.cta.ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* sticky section bar */
.toc {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.toc-in {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.toc-in::-webkit-scrollbar {
  display: none;
}

.toc a {
  flex: none;
  padding: 10px 8px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.toc a.toc-home {
  position: relative;
  margin-right: 9px;
}

/* the divider that sets the way back to the site apart from the page's sections */
.toc a.toc-home::after {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  right: -6px;
  width: 1px;
  background: var(--rule);
}

.toc a:hover,
.toc a.on {
  color: var(--ink);
  border-bottom-color: var(--c-neurons);
}

/* sections */
main {
  display: grid;
  gap: 0;
}

.block {
  padding-block: 52px 8px;
  display: grid;
  gap: 18px;
  scroll-margin-top: 50px;
  min-width: 0;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.block.wide {
  max-width: 1280px;
}

.block>* {
  min-width: 0;
}

.head {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.block-part {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.caption {
  color: var(--muted);
  margin: 0;
}

figure {
  margin: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}

figcaption {
  color: var(--muted);
}

figcaption b {
  color: var(--ink);
}

.fig-title {
  margin: 0;
}

.chart {
  position: relative;
  min-width: 0;
}

.chart svg {
  display: block;
  overflow: visible;
}

.chart.loading::before {
  content: "Loading…";
  display: block;
  color: var(--muted);
  padding: 18px 0;
}

.numbers summary {
  cursor: pointer;
  color: var(--muted);
}

.numbers summary:hover {
  color: var(--ink);
}

.tablewrap {
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}

table.data {
  border-collapse: collapse;
  width: 100%;
}

table.data th,
table.data td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule-2);
  text-align: right;
  white-space: nowrap;
}

table.data th:first-child,
table.data td:first-child {
  text-align: left;
}

table.data thead th {
  color: var(--ink-2);
  background: var(--well);
  position: sticky;
  top: 0;
}

table.data caption {
  caption-side: top;
  text-align: left;
  padding: 6px 10px;
  color: var(--muted);
}

/* segmented controls and inputs */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}

select,
input[type="search"],
input[type="number"],
input[type="text"] {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 6px 9px;
  max-width: 100%;
}

input[type="number"] {
  width: 6.5em;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.seg button {
  font: inherit;
  border: 0;
  background: none;
  color: var(--ink-2);
  padding: 6px 11px;
  cursor: pointer;
  border-right: 1px solid var(--rule-2);
}

.seg button:last-child {
  border-right: 0;
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.seg button:hover:not([aria-pressed="true"]) {
  background: var(--well);
}

.btn {
  font: inherit;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--ink);
}

.linkbtn {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

/* condition colours */
.k-vector {
  fill: var(--c-vector);
  stroke: var(--c-vector);
}

.tk-vector {
  fill: var(--t-vector);
  color: var(--t-vector);
}

.k-neurons {
  fill: var(--c-neurons);
  stroke: var(--c-neurons);
}

.tk-neurons {
  fill: var(--t-neurons);
  color: var(--t-neurons);
}

.k-pcs {
  fill: var(--c-pcs);
  stroke: var(--c-pcs);
}

.tk-pcs {
  fill: var(--t-pcs);
  color: var(--t-pcs);
}

.k-at18 {
  fill: var(--c-at18);
  stroke: var(--c-at18);
}

.tk-at18 {
  fill: var(--t-at18);
  color: var(--t-at18);
}

.k-rot {
  fill: var(--c-rot);
  stroke: var(--c-rot);
}

.tk-rot {
  fill: var(--t-rot);
  color: var(--t-rot);
}

.k-rand {
  fill: var(--c-rand);
  stroke: var(--c-rand);
}

.tk-rand {
  fill: var(--t-rand);
  color: var(--t-rand);
}

.k-none {
  fill: var(--c-none);
  stroke: var(--c-none);
}

.tk-none {
  fill: var(--muted);
  color: var(--muted);
}

.chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.chip.k-vector {
  background: var(--c-vector);
}

.chip.k-neurons {
  background: var(--c-neurons);
}

.chip.k-pcs {
  background: var(--c-pcs);
}

.chip.k-at18 {
  background: var(--c-at18);
}

.chip.k-rot {
  background: var(--c-rot);
}

.chip.k-rand {
  background: var(--c-rand);
}

.chip.k-none {
  background: var(--c-none);
}

/* the controls' markers in a legend: square for principal components, triangle for random neurons */
.chip.sq {
  border-radius: 2px;
}

.chip.tri {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* svg text */
svg text {
  fill: var(--ink-2);
}

svg .ax {
  fill: var(--muted);
}

svg .axt {
  fill: var(--muted);
}

svg .sub {
  fill: var(--muted);
}

svg .grid {
  stroke: var(--rule-2);
  stroke-width: 1;
}

svg .zero {
  stroke: var(--rule);
  stroke-width: 1;
}

svg .base {
  stroke: var(--rule);
  stroke-width: 1;
}

svg .meanline {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

svg .refline {
  stroke: var(--c-vector);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  fill: none;
}

svg .meanline.halo {
  stroke: var(--band, var(--surface));
  stroke-width: 5.5;
}

svg .ring.halo {
  stroke: var(--band, var(--surface));
  stroke-width: 4.5;
}

svg .faint {
  opacity: 0.42;
}

svg .ring {
  fill: none;
  stroke: var(--s-ring);
  stroke-width: 1.8;
}

svg .hl {
  stroke: var(--ink);
  stroke-width: 1.2;
  fill: none;
}

svg .pos {
  fill: var(--pos);
}

svg .neg {
  fill: var(--neg);
}

svg .grey {
  fill: var(--c-rand);
}

svg .line {
  fill: none;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

svg .thin {
  fill: none;
  stroke-width: 1;
  opacity: 0.35;
}

svg .open {
  fill: var(--surface);
  stroke-width: 1.8;
}

.tip {
  position: fixed;
  z-index: 50;
  max-width: 340px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.tip .m {
  color: var(--muted);
}

/* a tooltip laid out as a grid (tipGrid in app.js): a fixed width, so that every dot's tooltip has the same shape; the
   name in the first column and the numbers right-aligned in tabular figures under column heads written once */
.tip:has(.tgrid) {
  max-width: none;
}

.tgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.2rem 3.7rem;
  column-gap: 12px;
  row-gap: 1px;
  align-items: baseline;
  width: min(21.9rem, calc(100vw - 38px));
}

.tgrid.c2 {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tgrid .tt {
  grid-column: 1 / -1;
  margin-bottom: 3px;
}

.tgrid .th {
  align-self: end;
  padding-bottom: 3px;
  text-align: right;
  color: var(--muted);
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
}

.tgrid .tn {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tip .tsec,
.libbox .tsec {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-2);
  color: var(--muted);
}

.tip .lt,
.libbox .lt {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
}

.tip .rw,
.libbox .rw {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tint-neurons);
  color: var(--t-neurons);
  border: 1px solid var(--c-neurons);
}

/* the library's reply: plain in a tooltip, a small orange chat bubble (one neuron steered) in the neuron pane */
.tip .op {
  color: var(--ink-2);
  margin-top: 2px;
}

.libbox .op {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 12px 12px 12px 4px;
  border: 1px solid color-mix(in srgb, var(--c-neurons) 60%, var(--surface));
  background: color-mix(in srgb, var(--c-neurons) 9%, var(--surface));
  color: var(--ink);
}

.tip .cat,
.libbox .cat {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--well);
  color: var(--muted);
}

.tip .cat.p,
.libbox .cat.p {
  background: var(--tint-neurons);
  color: var(--t-neurons);
}

.libbox {
  background: var(--well);
  border-radius: 9px;
  padding: 8px 12px 10px;
}

.libbox .tsec {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.libbox .m {
  color: var(--muted);
}

tr[data-u] {
  cursor: default;
}

/* The model's words in chat bubbles, as in the opening figure: the question is a dark pill on the right, and each
   reply a rounded bubble tinted and edged in the colour of the way the model was steered (blue for the persona
   vector, orange for neurons, dark grey for the controls, light grey for no steering). The meta line and the judge's chip sit outside the bubble, smaller and muted. */
.ask {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 6px 14px;
}

.say {
  --say: var(--c-none);
  background: color-mix(in srgb, var(--say) 26%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--say) 60%, var(--surface));
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  color: var(--ink);
}

.say.say-vector {
  --say: var(--c-vector);
  background: color-mix(in srgb, var(--say) 9%, var(--surface));
}

.say.say-neurons {
  --say: var(--c-neurons);
  background: color-mix(in srgb, var(--say) 9%, var(--surface));
}

.say.say-rot {
  --say: var(--c-control);
  background: color-mix(in srgb, var(--say) 6%, var(--surface));
}

/* a question pill on its own line, on the right, above the reply it asked for */
.rq {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

/* The result: one panel that reads like the opening figure. Every row has the same columns, so the eye runs down them:
   who replies, the reply as a chat bubble and the count for the role shown; then every role's value as a dot, and the
   mean. The dots share one axis down the panel: .res-plot draws its grid lines, which join from row to row because the
   row has no vertical padding, and the strip inside maps 0 to 100 to the cell's inner width. A row's minimum height
   holds the tallest clipped reply, so changing the role or the question does not move the page. Up to 1023px wide each
   row puts the reply beside its strip, and each strip draws its own grid lines and ticks (drawHeroStrip in app.js uses
   the same width); up to 640px each row is one column. */
#result {
  scroll-margin-top: 12px;
}

.block.wide>.head {
  max-width: none;
}

.res {
  --w-who: 140px;
  --w-count: 120px;
  --w-plot: 300px;
  --w-mean: 112px;
  --res-gap: 20px;
  --res-pad: 22px;
  --plot-pad: 16px;
  --card-in: 8px;
  --band: var(--surface);
  --grid-line: var(--rule);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.res .controls {
  gap: 10px 14px;
  padding: 14px var(--res-pad);
  border-bottom: 1px solid var(--rule-2);
}

/* The role is what a reader changes first, so its box has the ink edge, and Random role is filled as the page's main
   buttons are. The questions are separate chips, and the chosen one is ringed, so that the question pill just below
   stays the one dark bubble. */
.res .combo {
  width: 180px;
  min-width: 0;
}

.res .combo input {
  padding-block: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  transition: box-shadow 0.12s;
}

.res .combo input:hover {
  box-shadow: 0 0 0 1px var(--ink);
}

.res .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  background: var(--ink);
  border-color: var(--ink);
  border-radius: 10px;
  color: var(--bg);
  transition: background-color 0.12s, border-color 0.12s;
}

.res .btn:hover {
  background: var(--t-neurons);
  border-color: var(--t-neurons);
}

.res .btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 0.2s;
}

.res .btn svg circle {
  fill: currentColor;
  stroke: none;
}

.res .btn:hover svg {
  transform: rotate(-14deg);
}

.res-segs {
  display: contents;
}

.res .seg {
  gap: 4px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}

.res .seg button {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  transition: background-color 0.12s, box-shadow 0.12s;
}

.res .seg button:hover:not([aria-pressed="true"]) {
  background: var(--rule);
}

.res .seg button[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

.res .seg button:focus-visible,
.res .btn:focus-visible,
.res-foot .more:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.res-s {
  margin-left: auto;
}

.res-body {
  padding-bottom: 10px;
}

.res-grid {
  display: grid;
  grid-template-columns: var(--w-who) minmax(0, 1fr) var(--w-count) var(--w-plot) var(--w-mean);
  column-gap: var(--res-gap);
  min-width: 0;
  padding-inline: var(--res-pad);
}

.res-head {
  align-items: end;
  padding-block: 12px 8px;
}

.res-note,
.res-chead,
.res-key {
  margin: 0;
  color: var(--muted);
}

.res-note,
.res-head .rq,
.res-role {
  grid-row: 1 / span 2;
}

.res-note {
  text-align: center;
}

.res-role {
  margin-right: -14px;   /* into the column gap, so that a short name stays on one line beside its ring */
  overflow-wrap: anywhere;
}

/* the same ring as the one that marks this role's dot in each strip, so that the count reads as that one dot */
.res-role::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 1.8px solid var(--s-ring);
  border-radius: 50%;
}

.res-all {
  grid-column: 4 / span 2;
  padding: 0 0 2px var(--plot-pad);
}

.res-head .res-ticks {
  grid-column: 4;
}

.res-m {
  margin-left: -8px;
  text-align: right;
}

.res-key {
  display: none;
}

.res-ticks {
  position: relative;
  height: 1.3em;
  margin-inline: var(--plot-pad);
  color: var(--muted);
}

.res-ticks span {
  position: absolute;
  transform: translateX(-50%);
}

.res-row {
  min-height: 144px;
}

.res-row.small {
  min-height: 104px;
}

/* The two rows that carry the argument have a shape of their own: the top 100 neurons a tinted card edged in orange, as
   in the opening figure, and the rotated directions a card in their dark grey, under a banner with the question they
   answer. The card's padding gives back its margin, so the columns stay lined up with the other rows. */
.res-row[data-code="n100"],
.res-row[data-code="rotm"],
.res-div.moment {
  margin-inline: var(--card-in);
  padding-inline: calc(var(--res-pad) - var(--card-in));
}

.res-row[data-code="n100"] {
  --band: var(--tint-neurons);
  --grid-line: color-mix(in srgb, var(--c-neurons) 24%, var(--tint-neurons));
  background: var(--band);
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 0 0 2px var(--t-neurons);
}

/* the neurons' banner and edge use the darker text orange, which white text can be read on */
.res-div.moment.neurons {
  background: var(--t-neurons);
}

.res-row[data-code="rotm"] {
  --band: color-mix(in srgb, var(--banner) 7%, var(--surface));
  --grid-line: color-mix(in srgb, var(--banner) 22%, var(--surface));
  background: var(--band);
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 0 0 2px var(--banner);
}

#hero-rows [data-code="n100"] .say,
#hero-rows [data-code="rotm"] .say {
  background: var(--surface);
}

/* the grid lines stop inside the cards' 2px edge; a child paints over an inset shadow, so they would cross it */
.res-row[data-code="n100"] .res-plot,
.res-row[data-code="rotm"] .res-plot {
  margin-block: 2px;
}

.res-div.moment {
  display: block;
  margin-top: 16px;
  padding-block: 11px;
  border-radius: 14px 14px 0 0;
  background: var(--banner);
  color: var(--surface);
}

/* the question and the sentence after it share a baseline; the icon centres on the first line */
.res-div.moment p {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  color: inherit;
}

.res-div.moment b {
  flex: none;
}

.res-who {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-block: 10px;
  text-align: center;
}

/* the model, in its row's colour, at one size in every row */
.res-row:not(.small) .res-who {
  gap: 3px;
}

.bot {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 2px;
}

.csub {
  margin: 0;
  color: var(--muted);
}

.res-say {
  align-self: center;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-block: 10px;
}

#hero-rows .say {
  padding: 11px 15px;
}

#hero-rows .small .say {
  padding-block: 8px;
}

/* every bubble has the same 1px edge; the neurons' is in their full colour */
#hero-rows .say-neurons {
  border-color: var(--c-neurons);
}

/* the judge's score and the button that opens a clipped reply, on one line under the bubble */
.res-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  min-height: 22px;
}

.res-foot .more {
  color: var(--muted);
  transition: color 0.12s;
}

.res-foot .more:hover {
  color: var(--ink);
}

/* the count is in its row's colour, with one pip per reply below it, in rows of 10, one row per draw: solid if the reply
   fully takes on the persona, tinted if it has the persona's traits, and an empty ring if not */
.res-count {
  align-self: center;
  display: grid;
  gap: 2px;
  margin: 0;
}

.res-count span {
  color: var(--muted);
}

.res-count .res-n,
.res-count .res-pips {
  color: inherit;
}

.res-n span {
  color: var(--muted);
}

.res-pips {
  display: grid;
  grid-template-columns: repeat(10, 7px);
  gap: 2px;
  margin-block: 2px 5px;
}

.res-pips.many {
  grid-template-columns: repeat(10, 5px);
}

.res-pips i {
  display: block;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 50%;
}

.res-pips i.p2 {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 35%, transparent);
}

.res-pips i.p3 {
  border-color: currentColor;
  background: currentColor;
}

.res-count span,
.res-mean {
  align-self: center;
  display: grid;
  justify-items: end;
  gap: 3px;
  margin: 0;
  text-align: right;
}

.res-mean span {
  color: var(--muted);
}

.res-plot {
  --grid: linear-gradient(var(--grid-line), var(--grid-line));
  display: flex;
  align-items: center;
  padding-inline: var(--plot-pad);
  background-image: var(--grid), var(--grid), var(--grid), var(--grid), var(--grid);
  background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: content-box;
}

.res-strip {
  width: 100%;
}

.res-strip .meanline {
  stroke-width: 2;
}

.res-strip .meanline.halo {
  stroke-width: 5;
}

svg .ring.over {
  stroke: var(--focus);
}

.res-div p {
  grid-column: 1 / span 3;
  margin: 0;
}

.res-div.quiet {
  margin-top: 14px;
}

.res-div.quiet p {
  padding-block: 4px;
  color: var(--muted);
}

.res-div .res-plot {
  grid-column: 4;
}

.axes {
  flex: none;
  align-self: flex-start;
  width: 25px;
  height: 25px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.res-axis {
  padding-top: 4px;
}

.res-axis .res-ticks {
  grid-column: 4;
}

@media (prefers-reduced-motion: reduce) {
  .res * {
    transition: none !important;
  }

  .res .btn:hover svg {
    transform: none;
  }
}

@media (max-width: 1180px) {
  .res {
    --w-who: 132px;
    --w-count: 96px;
    --w-plot: 230px;
    --w-mean: 104px;
    --res-gap: 14px;
    --res-pad: 16px;
    --plot-pad: 14px;
    --card-in: 6px;
  }
}

@media (max-width: 1023px) {
  .res {
    --res-pad: 14px;
    --card-in: 4px;
  }

  .res-body {
    padding-bottom: 4px;
  }

  .res-pips,
  .res-pipnote {
    display: none;
  }

  .res-s {
    margin-left: 0;
  }

  .res-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .res-head {
    align-items: center;
    row-gap: 6px;
    padding-block: 8px;
  }

  .res-note,
  .res-head .rq {
    grid-row: auto;
  }

  .res-note {
    text-align: left;
  }

  .res-chead,
  .res-head .res-ticks {
    display: none;
  }

  .res-key {
    display: block;
    grid-column: 1 / -1;
  }

  .res-row,
  .res-row.small {
    grid-template-areas: "who mean" "say plot" "count plot";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    min-height: 0;
    padding-block: 14px;
  }

  .res-row:not([data-code="n100"]):not([data-code="rotm"]) + .res-row:not([data-code="n100"]) {
    border-top: 1px solid var(--rule-2);
  }

  .res-div.moment {
    margin-top: 12px;
  }

  .bot {
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .res-who {
    grid-area: who;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    column-gap: 12px;
    padding: 0;
    text-align: left;
  }

  .res-row:not(.small) .res-who {
    column-gap: 12px;
  }

  .res-who .bot {
    grid-row: span 2;
  }

  /* a name with no line under it centres on the disc */
  .res-who .cname:last-child {
    grid-row: span 2;
    align-self: center;
  }

  .res-who .csub {
    grid-column: 2;
  }

  .res-mean {
    grid-area: mean;
  }

  .res-say {
    grid-area: say;
    padding-block: 8px 0;
  }

  /* the bubble holds its clipped height here, so that a short reply does not move the page */
  .reply {
    min-height: 4.5em;
  }

  .small .reply {
    min-height: 3em;
  }

  .reply.open,
  .small .reply.open {
    min-height: 0;
  }

  .res-row .res-plot {
    grid-area: plot;
    padding-inline: 12px;
    padding-top: 8px;
    background: none;
  }

  .res-count {
    grid-area: count;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    margin-top: 2px;
  }

  .res-div p {
    grid-column: 1 / -1;
  }

  .res-div .res-plot,
  .res-axis {
    display: none;
  }
}

/* on a phone the rows are one column, with the strip under the mean, and the controls take two lines: the questions and
   the samples scroll sideways on the second */
/* the line of counts stays on one line for every role, here without the draws, which the caption gives */
@media (max-width: 760px) {
  .res-draws {
    display: none;
  }

  .res-div.moment p {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
}

@media (max-width: 640px) {
  .res-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* the question wraps beside the icon, and the sentence takes the next line */
  .res-div.moment b {
    flex: 1 1 calc(100% - 35px);
  }

  /* the question has its own line, since the longest would not fit beside the note */
  .res-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .res-note br {
    display: none;
  }

  .res-row,
  .res-row.small {
    grid-template-areas: "who mean" "plot plot" "say say" "count count";
    grid-template-rows: none;
  }

  .res .ctl:first-child {
    display: none;
  }

  .res .combo {
    flex: 1 1 0;
    width: auto;
  }

  .judge-word {
    display: none;
  }

  .res-segs {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .res-segs::-webkit-scrollbar {
    display: none;
  }

  .res-s {
    flex: none;
    align-self: center;
  }

  .res-segs .seg {
    flex: none;
    flex-wrap: nowrap;
  }

  .res-segs .seg button {
    white-space: nowrap;
  }
}

/* the reply is a chat bubble (.say), clipped to a few lines, ending in an ellipsis, until its button opens it */
.reply-box {
  position: relative;
}

.reply {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.small .reply {
  -webkit-line-clamp: 2;
}

.reply.open,
.small .reply.open {
  display: block;
  -webkit-line-clamp: none;
}

.judge {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
}

/* the judge's score as one quiet pill beside the bubble: a fixed height, the numbered badge 2px from the pill's top,
   bottom and left edge, and the badge and the words both centred on the pill's middle */
.score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px 0 2px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
}

.score i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-style: normal;
}

/* score 0's ring is an inset shadow, not a border, so its badge has the same box and centre as the filled ones */
.score.s0 i {
  box-shadow: inset 0 0 0 1px var(--s2);
  color: var(--ink-2);
}

.score.s1 i {
  background: var(--s1);
  color: var(--ink);
}

.score.s2 i {
  background: var(--s2);
  color: var(--bg);
}

.score.s3 i {
  background: var(--s3);
  color: var(--bg);
}

.tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink-2);
  white-space: nowrap;
}

.hero-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* how it works */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  counter-reset: step;
}

/* each step reads title, illustration, text, with the same gap between them */
.step {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-increment: step;
}

.step h3 {
  order: -1;
}

.step p {
  order: 1;
}

/* side by side, the formula's box is about as tall as the other two illustrations */
@media (min-width: 861px) {
  .step .formula {
    padding-block: 30px;
  }
}

.step h3::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  margin-right: 8px;
  vertical-align: 2px;
}

.step p {
  margin: 0;
  color: var(--ink-2);
}

.splitbar {
  display: grid;
  gap: 5px;
  color: var(--muted);
}

.splitbar .bar {
  display: flex;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--well);
}

.splitbar .att {
  background: var(--s1);
}

.splitbar .neu {
  background: var(--tint-neurons-2);
}

.splitbar .top {
  background: var(--c-neurons);
}

.splitbar .keys {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.formula {
  background: var(--well);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
}

/* small multiples and legends */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

/* a chart or image that reads better at a set width than across the whole section */
.fig-mid {
  max-width: 760px;
}

/* the thread's images, on white in both themes */
.plate {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* the set-size chart's lines to the controls' names */
svg .leader {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 1 3;
  fill: none;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--ink-2);
  margin: 0;
  align-items: center;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.note {
  color: var(--ink-2);
}

ul.plain {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.callout {
  border-left: 3px solid var(--c-neurons);
  padding: 4px 0 4px 14px;
  color: var(--ink-2);
}

/* examples of single-neuron replies */
.ex-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 10px;
}

.ex-list > .rq {
  grid-column: 1 / -1;
}

/* each example: a quiet line naming the persona and the steering, over the reply's bubble */
.ex {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
}

.ex .who {
  color: var(--muted);
}

.ex .who b {
  color: var(--ink-2);
}

.ex p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 8.5em;
  overflow: hidden;
}

/* neuron explorer */
.nx {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pane {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 14px;
  min-width: 0;
  box-shadow: var(--shadow);
  scroll-margin-top: 56px;
}

.pane>*,
.pane-body>* {
  min-width: 0;
}

.pane-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 1101px) {
  #nx-neuron {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 52px);
  }
}

.pane-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.pane-bar .lbl {
  color: var(--muted);
  margin-right: 4px;
}

.pane-bar .combo {
  flex: 1 1 200px;
  min-width: 0;
}

/* the role filter box: a text box whose list of roles narrows as one types */
.combo {
  position: relative;
  display: inline-block;
  min-width: 13em;
  max-width: 100%;
}

.combo input {
  width: 100%;
  padding-right: 28px;
}

.combo::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.combo-list {
  position: absolute;
  z-index: 35;
  left: 0;
  top: calc(100% + 4px);
  width: max(100%, 18em);
  max-width: calc(100vw - 16px);
  max-height: 19rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.combo-list.combo-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.combo-opt,
.combo-none {
  padding: 6px 9px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.combo-opt {
  cursor: pointer;
}

.combo-opt:hover {
  background: var(--well);
}

.combo-opt[aria-selected="true"] {
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--s2);
}

.combo-opt mark {
  background: var(--tint-neurons-2);
  color: inherit;
  border-radius: 2px;
  padding: 0;
}

.combo-grp {
  padding: 9px 9px 3px;
  color: var(--muted);
}

.combo-none {
  color: var(--muted);
}

.pane h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tint-neurons);
  color: var(--t-neurons);
  border: 1px solid var(--c-neurons);
}

.pane p {
  margin: 0;
  color: var(--ink-2);
}

.mini {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
}

.mini h4,
.pane h4 {
  margin: 0 0 4px;
  color: var(--ink-2);
}

.steerbox {
  background: var(--well);
  border-radius: 9px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.steerbox .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.steerbox .row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* a role's top neurons: every row is one line of the same height. The widths below are where each column starts, and a
   column grows when a reader's browser shows its text larger, so no column can run into the next; when they no longer
   fit, the table scrolls sideways inside its own box. The library column takes what is left and ends in an ellipsis when
   the persona's name is too long; the row's tooltip gives it in full. */
.ntable {
  width: 100%;
  min-width: 500px;
  table-layout: auto;
  border-collapse: collapse;
}

.ntable col.c-rank {
  width: 34px;
}

.ntable col.c-neuron {
  width: 96px;
}

.ntable col.c-share {
  width: 106px;
}

.ntable col.c-change {
  width: 72px;
}

.ntable col.c-roles {
  width: 50px;
}

.ntable th {
  color: var(--muted);
  text-align: left;
  vertical-align: bottom;
  padding: 4px 5px 6px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.ntable th.wrap {
  white-space: normal;
}

.ntable td {
  height: 31px;
  padding: 0 5px;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
  vertical-align: middle;
}

.ntable td.r,
.ntable th.r {
  text-align: right;
}

.ntable tr.cur td {
  background: var(--well);
}

.nlink {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
}

.sbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sbar .track {
  flex: none;
  width: 34px;
  height: 8px;
  border-radius: 2px;
  background: var(--rule-2);
  overflow: hidden;
}

.sbar .track i {
  display: block;
  height: 100%;
  min-width: 1px;
  border-radius: 2px;
}

.sbar i.pos {
  background: var(--pos);
}

.sbar i.neg {
  background: var(--neg);
}

.sbar .num {
  flex: none;
  min-width: 3.7em;
  margin-left: auto;
  text-align: right;
}

.up {
  color: var(--t-neurons);
}

.down {
  color: var(--neg);
}

.ntable td.lib {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib .dir {
  display: inline-block;
  min-width: 4.1em;
}

.jl {
  color: var(--ink-2);
}

.jl .cat {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--well);
  color: var(--muted);
}

.jl .pn {
  margin-left: 6px;
}

/* the gap goes before the name, so a pill with no name after it ends the line exactly */
/* a narrow table (a desktop window just wide enough for two panes, or a phone): smaller type and columns, so that the
   direction and the category still fit on the line */
.ntable-wrap {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .ntable col.c-rank {
    width: 34px;
  }

  .ntable col.c-neuron {
    width: 90px;
  }

  .ntable col.c-share {
    width: 90px;
  }

  .ntable col.c-change {
    width: 64px;
  }

  .ntable col.c-roles {
    width: 44px;
  }

  .ntable .sbar {
    gap: 5px;
  }

  .ntable .sbar .track {
    width: 28px;
  }

  .ntable .lib .dir {
    min-width: 3.9em;
  }

  .ntable .jl .cat {
    padding: 1px 4px;
  }
}


/* a phone's card: the table scrolls sideways in its box, and the library column shows the whole name */
@container (max-width: 480px) {
  .ntable {
    width: max-content;
    min-width: 100%;
  }

  .ntable td.lib {
    max-width: none;
  }
}

@container (min-width: 481px) and (max-width: 523px) {
  .ntable .jl .pn {
    display: none;
  }
}

/* no room for a name: the row's tooltip gives it */
.jl .cat.p {
  background: var(--tint-neurons);
  color: var(--t-neurons);
}

.lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lists ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 2px;
}

.lists li button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
}

.credit {
  color: var(--muted);
}

.empty {
  color: var(--muted);
}

/* reply explorer */
.rx {
  display: grid;
  gap: 14px;
}

.rx-body {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.mxwrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 10px 8px;
  box-shadow: var(--shadow);
}

table.mx {
  border-collapse: separate;
  border-spacing: 0;
}

table.mx th {
  color: var(--ink-2);
  text-align: left;
  padding: 0 8px 0 0;
  white-space: nowrap;
}

table.mx thead th {
  color: var(--muted);
  text-align: center;
  padding: 0 0 4px;
}

table.mx th.rowh {
  max-width: 220px;
  white-space: normal;
  padding-block: 1px;
}

table.mx th.rowh .in {
  display: flex;
  align-items: center;
  gap: 6px;
}

table.mx th.rowh.set {
  color: var(--muted);
  padding-left: 16px;
}

/* a thin row above several random draws (rotations, samples of neurons) saying what the draws are */
table.mx td.drawnote {
  padding: 1px 0 1px 16px;
  color: var(--muted);
  text-align: left;
}

table.mx td {
  padding: 1.5px;
}

table.mx td.gap {
  padding-left: 5px;
}

table.mx td.cnt {
  color: var(--muted);
  padding-left: 8px;
  white-space: nowrap;
  text-align: right;
}

table.mx thead th.cnth {
  white-space: normal;
  text-align: right;
  vertical-align: bottom;
}

table.mx tr.sep th,
table.mx tr.sep td {
  padding-top: 7px;
}

table.mx tr.grp th {
  padding: 12px 0 4px;
  color: var(--muted);
  text-align: left;
  white-space: normal;
}

.cell {
  display: block;
  width: 22px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--s2);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
}

.cell.s1 {
  background: var(--s1);
  border-color: var(--s1);
}

.cell.s2 {
  background: var(--s2);
  border-color: var(--s2);
}

.cell.s3 {
  background: var(--s3);
  border-color: var(--s3);
}

.cell.na {
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 3px, var(--rule) 3px, var(--rule) 4px);
}

.cell[aria-current="true"] {
  outline: 2px solid var(--c-neurons);
  outline-offset: 1.5px;
}

.qkey {
  color: var(--muted);
  margin: 8px 0 0;
}

.read {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-width: 0;
}

/* a long "compared with" option must not widen the page on a phone */
.rcard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  box-shadow: var(--shadow);
}

.rcard.main {
  border-color: var(--ink-2);
}

/* The reply cards keep one height for a role and strength, so clicking from reply to reply never moves the buttons: the
   bubble fits its reply, up to --rtext-cap, a longer one scrolling inside, and renderRead reserves the rest of the tallest
   reply's height at the bottom of the card. */
.rmeta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin: 0;
}

.rmeta b {
  color: var(--ink-2);
}

.rtext {
  --rtext-cap: 14em;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: var(--rtext-cap);
}

@media (max-width: 720px) {
  .rtext {
    --rtext-cap: 22em;
  }
}

.rspec {
  margin: 0;
  color: var(--ink-2);
}

.rnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.slegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--ink-2);
  margin: 0;
}

.slegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.slegend .cell {
  width: 16px;
  height: 13px;
  cursor: default;
}

/* method */
.method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px;
}

.method p {
  color: var(--ink-2);
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.links li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 11px 14px;
  display: grid;
  gap: 2px;
}

.links span {
  color: var(--muted);
}

footer.site {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

.err {
  color: var(--t-neurons);
}

@media (max-width: 1100px) {

  .nx,
  .rx-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {

  .steps,
  .method,
  .links {
    grid-template-columns: minmax(0, 1fr);
  }

  .lists {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {

  .duo,
  .ex-list,
  .mini {
    grid-template-columns: minmax(0, 1fr);
  }

  .lists {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the colour theme toggle above the headline, which takes the screen's width here */
  .masthead {
    padding-top: 40px;
  }

  .theme {
    top: 8px;
  }

  .cell {
    width: 17px;
    height: 16px;
  }

  table.mx td {
    padding: 1px;
  }

  table.mx td.gap {
    padding-left: 4px;
  }

  table.mx th.rowh {
    max-width: 92px;
  }

  table.mx td.cnt {
    padding-left: 4px;
  }

  .mxwrap {
    padding: 8px 6px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Smooth scrolling to in-page links is done in app.js (scrollToEl), faster than the browser's own. */

/* =====================================================================================================================
   TYPOGRAPHY: every type rule of the page is in this block (families, sizes, weights, line heights, figures, measure
   and the spacing between text blocks); the rules above set no type. To port it to another copy of the page, use the
   Google Fonts <link> from this page's <head> and paste this block at the end of that copy's stylesheet, where it
   overrides the type set by earlier rules. TYPOGRAPHY.md, beside this file, explains the choices.
   ===================================================================================================================== */
:root {
  /* Two families, as on willmayner.com: Work Sans for headings and the result cards' big numbers; Instrument Sans for
     everything else: text, controls, tables and charts. Monospace only for file paths, from the system. */
  --font-display: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: var(--font-text);
  --serif: var(--font-display);
  --cond: var(--font-display);
  --mono: var(--font-mono);

  /* The scale: ten sizes, each with one job. */
  --fs-micro: 12.5px;
  /* axis ticks, pills and badges, column and group labels */
  --fs-small: 14px;
  /* tables, chart labels, legends, tooltips, metadata, section labels, footer */
  --fs-ui: 15.5px;
  /* controls, captions, card and pane text, replies */
  --fs-medium: 17px;
  /* figure titles, card names, the method section */
  --fs-body: 19px;
  /* running text */
  --fs-lead: 21px;
  /* the standfirst under the title; subheads */
  --fs-name: 26px;
  /* the role or neuron named at the top of an explorer pane */
  --fs-h2: clamp(25px, 1.1vw + 18px, 32px);
  --fs-h1: clamp(33px, 2.4vw + 21px, 43px);
  --fs-figure: 44px;
  /* the result cards' big percentages */

  --lh-body: 1.55;
  /* running text, captions, replies */
  --lh-ui: 1.45;
  /* tooltips, small text in boxes */
  --lh-tight: 1.25;
  /* labels and headings set small */
  --w-heading: 600;
  /* semibold, as the site's headings */
  --w-strong: 600;
  --measure: 41rem;
  /* about 85 characters of body text; text, standfirst and captions share it */
  --caption: #44403c;
  /* captions: darker than --muted, lighter than --ink-2 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --caption: #d1d5db;
  }

  :root:not([data-theme="light"]) body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

:root[data-theme="dark"] {
  --caption: #d1d5db;
}

:root[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* base: proportional figures in text; tabular figures wherever numbers sit in columns or are compared */
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-numeric: proportional-nums;
}

b,
strong {
  font-weight: var(--w-strong);
}

.num,
table.data,
.ntable,
table.mx,
input[type="number"],
.res-count b,
.res-ticks,
.score i,
svg .ax,
svg .val {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* links: the text keeps its colour and a quiet underline that darkens on hover */
a,
.linkbtn,
.nlink,
.lists li button {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover,
.linkbtn:hover,
.nlink:hover,
.lists li button:hover {
  color: var(--link-hover);
}

/* headings */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--w-heading);
  font-variant-numeric: lining-nums proportional-nums;
  text-transform: none;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 15em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.16;
  letter-spacing: -0.006em;
  max-width: 22em;
}

/* one line at the panel's width from about 1100px, so that the panel starts higher on the first screen */
#result-h {
  max-width: none;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-lead);
  line-height: 1.3;
  font-weight: var(--w-strong);
  letter-spacing: 0;
}

h4 {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  font-weight: var(--w-strong);
}

/* masthead */
.dek {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: var(--measure);
  text-wrap: pretty;
}

/* from 900px wide, where the opening figure stands beside the text: the headline and the standfirst fill the width the
   figure leaves (the standfirst up to about 60 characters a line); the headline keeps its size, in four lines at
   1440 × 900 */
@media (min-width: 900px) {
  .mast-text>h1 {
    max-width: none;
  }

  .mast-body .dek {
    max-width: 40rem;
  }
}

.byline {
  font-size: var(--fs-ui);
}

.cta {
  font-size: var(--fs-ui);
  font-weight: var(--w-strong);
}

.toc a {
  font-size: var(--fs-ui);
  line-height: 1.45;
}

/* from 1280 px the whole menu stays on one line, centred in the window: as the window has room, its type and then its
   spacing step up. Below 1280 px it keeps its larger spacing and scrolls sideways. Each step leaves room for a 17 px
   scrollbar. */
@media (min-width: 1280px) {
  .toc-in {
    width: fit-content;
    max-width: 100%;
    gap: 1px;
  }

  .toc a {
    font-size: 14.5px;
    padding-inline: 3px;
  }
}

@media (min-width: 1360px) {
  .toc-in {
    gap: 2px;
  }

  .toc a {
    font-size: var(--fs-ui);
  }
}

@media (min-width: 1440px) {
  .toc a {
    padding-inline: 6px;
  }
}

/* section labels, running text and captions */
.prose {
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 0.85em;
}

.prose p,
.prose li,
.method p,
.step p {
  text-wrap: pretty;
}

.caption,
figcaption {
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--caption);
  max-width: var(--measure);
  text-wrap: pretty;
}

figcaption b {
  font-weight: var(--w-strong);
}

.opener figcaption {
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* the line above the opening figure that skips it */
.opener-skip {
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
}

/* one line under the opening figure */
.fig-title {
  font-family: var(--font-text);
  font-size: var(--fs-medium);
  line-height: var(--lh-tight);
  font-weight: var(--w-strong);
  letter-spacing: 0;
}

.chart.loading::before {
  font-size: var(--fs-small);
}

.numbers summary {
  font-size: var(--fs-ui);
}

.legend,
.slegend {
  font-size: var(--fs-small);
}

.note,
.empty,
.err {
  font-size: var(--fs-ui);
}

.credit {
  font-size: var(--fs-small);
}

/* controls */
.ctl,
select,
input[type="search"],
input[type="number"],
input[type="text"],
.seg button,
.btn {
  font-size: var(--fs-ui);
}

.combo-opt,
.combo-none {
  font-size: var(--fs-ui);
  line-height: 1.3;
}

.combo-opt.cur {
  font-weight: var(--w-strong);
}

.combo-grp {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  line-height: 1.35;
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* tables */
table.data {
  font-size: var(--fs-small);
}

table.data thead th {
  font-weight: var(--w-strong);
}

/* charts: the page's text face, at the page's small sizes */
svg text {
  font-family: var(--font-text);
  font-size: var(--fs-small);
}

svg .ax,
svg .sub {
  font-size: var(--fs-micro);
}

svg .axt {
  font-size: var(--fs-small);
}

svg .lab {
  font-size: var(--fs-small);
  font-weight: var(--w-strong);
}

svg .val {
  font-size: var(--fs-ui);
  font-weight: var(--w-strong);
}

/* tooltips and the library box */
.tip {
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
}

.tip b {
  font-weight: var(--w-strong);
}

.libbox {
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
}

.tip .tsec,
.libbox .tsec,
.tip .rw,
.libbox .rw {
  font-size: var(--fs-micro);
}

.tip .op,
.libbox .op {
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
  font-style: italic;
}

.tip .cat,
.libbox .cat,
.jl .cat {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* the result panel; the question pills of the chat motif */
.ask {
  font-size: var(--fs-ui);
  line-height: 1.35;
}

.res-head .ask {
  padding: 8px 16px;
  border-radius: 16px 16px 4px 16px;
  font-size: var(--fs-medium);
}

.res-note,
.res-chead,
.res-key,
.res-ticks {
  font-size: var(--fs-micro);
  line-height: 1.3;
}

.res-chead b,
.res-role,
.res-m {
  font-size: var(--fs-small);
  font-weight: var(--w-strong);
  color: var(--ink-2);
}

.cname {
  font-family: var(--font-text);
  font-size: var(--fs-ui);
  line-height: var(--lh-tight);
  font-weight: var(--w-strong);
}

.csub {
  font-size: var(--fs-micro);
  line-height: 1.3;
}

.reply {
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.more {
  font-size: var(--fs-small);
}

.res .ctl,
.res .seg button,
.res .btn {
  font-size: var(--fs-small);
}

.res .combo input {
  font-size: var(--fs-ui);
  font-weight: var(--w-strong);
}

.res .btn {
  font-weight: var(--w-strong);
}

.res-div {
  font-size: var(--fs-small);
  line-height: 1.4;
}

.res-div.moment b {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.2;
  font-weight: var(--w-heading);
}

.res-row:not(.small) .cname {
  font-size: var(--fs-medium);
}

.res-count,
.res-mean span {
  font-size: var(--fs-micro);
  line-height: 1.25;
}

/* the judge's line and chip, quieter than the reply */
.judge,
.score {
  font-size: var(--fs-micro);
}

/* one-line height inside the score pill, so the badge's digit and the words centre exactly */
.score {
  line-height: 1;
}

.score i {
  padding-top: 2.5px;
  /* Instrument Sans sits high in its line box: this centres the digit in the badge */
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
}

.tag {
  font-size: var(--fs-micro);
}

.res-count b {
  font-size: var(--fs-name);
  line-height: 1.1;
  font-weight: var(--w-strong);
}

.small .res-count b {
  font-size: var(--fs-lead);
}

/* the narrower columns of the wide layout */
@media (min-width: 1024px) and (max-width: 1180px) {
  .res-row:not(.small) .cname {
    font-size: var(--fs-ui);
  }

  .res-count b {
    font-size: var(--fs-lead);
  }
}

.res-mean b {
  font-family: var(--font-display);
  font-size: var(--fs-figure);
  line-height: 1;
  font-weight: var(--w-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.small .res-mean b,
[data-code="none"] .res-mean b {
  font-size: var(--fs-name);
}

.hero-links {
  font-size: var(--fs-ui);
}

/* how it works */
.step h3::before {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step p {
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
}

.splitbar {
  font-size: var(--fs-small);
}

.formula {
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}

/* single-neuron examples: the line above each bubble is quiet */
.ex .who {
  font-size: var(--fs-micro);
}

.ex .who b {
  font-weight: var(--w-strong);
}

.ex p {
  font-size: var(--fs-ui);
  line-height: 1.5;
}

/* neuron explorer */
.pane-bar .lbl {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  text-transform: none;
}

.pane h3 {
  font-family: var(--font-display);
  font-size: var(--fs-name);
  line-height: 1.15;
  font-weight: var(--w-heading);
}

.badge {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.pane p {
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.pane p.caption {
  color: var(--caption);
}

.pane p.legend {
  font-size: var(--fs-small);
}

.mini h4,
.pane h4 {
  font-size: var(--fs-small);
  font-weight: var(--w-strong);
}

.steerbox {
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
}

.lists ol {
  font-size: var(--fs-small);
}

/* the top-neurons table's columns start at widths that fit these sizes (check-table.mjs measures it) */
.ntable {
  font-size: var(--fs-small);
}

.ntable th {
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
  font-weight: var(--w-strong);
}

.nlink {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.lib {
  font-size: var(--fs-small);
}

.jl {
  font-size: var(--fs-micro);
}

@container (max-width: 560px) {

  .ntable,
  .ntable th,
  .ntable .nlink,
  .ntable .lib,
  .ntable .jl,
  .ntable .jl .cat {
    font-size: var(--fs-micro);
  }
}

/* reply explorer */
table.mx {
  font-size: var(--fs-small);
}

table.mx th {
  font-weight: 500;
}

table.mx thead th {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
}

table.mx thead th.cnth {
  line-height: 1.2;
}

table.mx th.rowh {
  font-size: var(--fs-small);
  line-height: 1.2;
}

table.mx th.rowh.set,
table.mx td.cnt,
table.mx .drawnote {
  font-size: var(--fs-micro);
}

table.mx .drawnote {
  font-weight: 400;
  line-height: 1.25;
}

table.mx tr.grp th {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  text-transform: none;
}

.qkey {
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* the reply card's meta line and specificity line are quieter than the reply */
.rmeta,
.rspec {
  font-size: var(--fs-micro);
}

.rmeta b {
  font-weight: var(--w-strong);
}

.rtext {
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
}

/* method, links and footer */
.method section h3 {
  margin-bottom: 8px;
}

.method p {
  font-size: var(--fs-medium);
  line-height: var(--lh-body);
  margin: 0 0 0.6em;
}

.links b {
  font-weight: var(--w-strong);
}

.links span {
  font-size: var(--fs-small);
}

footer.site {
  font-size: var(--fs-small);
}

/* phone width */
@media (max-width: 720px) {
  :root {
    --fs-body: 17.5px;
    --fs-lead: 19.5px;
    --fs-name: 24px;
    --fs-figure: 40px;
  }

  /* 16px or more in text boxes keeps iPhones from zooming in when one is tapped */
  select,
  input[type="search"],
  input[type="number"],
  input[type="text"] {
    font-size: 16px;
  }

  table.mx th.rowh,
  table.mx td.cnt {
    font-size: var(--fs-micro);
  }
}

/* ===================================================================================================== end TYPOGRAPHY */