/* Colours and faces, light and dark. */

:root {
  color-scheme: light dark;
  --paper: white;
  --ink: black;
  --muted: #667078;
  --rule: #ded8ce;
  --status-bg: black;
  --status-ink: ivory;
  --accent: #9a3248;
  --code-bg: #f4f1ea;
  --mark-next: var(--accent);
  --mark-todo: var(--muted);
  --mark-wait: #8a7a1c;
  --mark-done: #3d7a3d;
  --mark-idea: #5a4d8a;
  --display-font: "Public Sans", helvetica, arial, sans-serif;
  --body-font: var(--display-font);
  --mono-font: ui-monospace, "SF Mono", menlo, consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111517;
    --ink: #c2cbd0;
    --muted: #8b969d;
    --rule: #2f383d;
    --status-bg: #d7d2c4;
    --status-ink: #111719;
    --accent: #de6e7c;
    --code-bg: #171c1f;
    --mark-next: var(--accent);
    --mark-todo: var(--muted);
    --mark-wait: #d9c65a;
    --mark-done: #7ac47a;
    --mark-idea: #a99ad9;
  }
}

/* The document: box model, root type, links. */

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

html {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* The library band: eyebrow, site name, and the three doors. */

.library {
  display: grid;
  grid-template-columns: minmax(10rem, 0.5fr) minmax(0, 1.5fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, var(--accent));
}

.eyebrow {
  margin: 0 0 0.1rem;
  color: var(--muted);
  font: 700 0.72rem/1 var(--display-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.library h1 {
  margin: 0;
  font: 700 1.25rem/1.1 var(--display-font);
  letter-spacing: -0.02em;
}

.library h1 a {
  color: inherit;
}

.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.door {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}

.door:hover, .door:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--rule));
  text-decoration: none;
  outline: none;
}

.door.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.door-title {
  font: 700 0.95rem/1.2 var(--display-font);
}

.door-meta {
  color: var(--muted);
  font: 500 0.82rem/1.2 var(--display-font);
  min-width: 0;
  overflow-wrap: break-word;
}

/* The status bar, as a Glk grid window: black, monospace, bold. */

.status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem clamp(1rem, 4vw, 3rem);
  font: 700 0.9rem/1.5 var(--mono-font);
  color: var(--status-ink);
  background: var(--status-bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.status a {
  color: inherit;
}

.status-left, .status-right {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs {
  display: inline;
}

.crumbs .crumb-sep {
  margin: 0 0.45em;
  opacity: 0.55;
}

.crumbs a.crumb {
  opacity: 0.75;
}

.crumbs a.crumb:hover {
  opacity: 1;
  text-decoration: underline;
}

.crumbs .crumb.current {
  opacity: 1;
}

/* The main column; wide pages fill the viewport but their prose keeps a
readable measure. */

main {
  max-width: 66ch;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1rem, 4vw, 3rem) 2.75rem;
  margin: 0 auto;
}

body.wide main {
  max-width: none;
  margin: 0;
}

body.wide main > p, body.wide main > h1, body.wide article.source-body > p, body.wide article.source-body > h1 {
  max-width: 66ch;
}

.site-footer {
  max-width: 66ch;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
  border-top: 1px solid var(--rule);
  font: 500 0.82rem/1.4 var(--display-font);
  color: var(--muted);
}

/* Headings, paragraphs, figures and their IDs, mentions, marks. */

h1, h2, h3, h4 {
  font-family: var(--display-font);
  line-height: 1.16;
  font-weight: 800;
}

h1 {
  font-size: 2.2rem;
  letter-spacing: -0.06em;
  margin: 0.5rem 0 1.5rem;
}

h2 {
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  margin: 2.6rem 0 0.75rem;
}

h3 {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin: 2rem 0 0.5rem;
  font-weight: 700;
}

p {
  margin: 0 0 1.1rem;
  hyphens: manual;
  text-align: justify;
  text-align-last: start;
}

section.figure {
  scroll-margin-top: 1rem;
}

section:target > h2, section:target > h3, section:target > h4 {
  background: var(--code-bg);
  outline: 0.4rem solid var(--code-bg);
}

a.figure-id {
  margin-left: 0.6rem;
  font-family: var(--mono-font);
  font-size: 0.7em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
}

h2:hover a.figure-id, h3:hover a.figure-id, h4:hover a.figure-id, section:target > h2 a.figure-id, section:target > h3 a.figure-id {
  opacity: 1;
}

.mention {
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 0.82em;
}

.mention.dangling {
  color: var(--muted);
  text-decoration: line-through;
}

.unresolved-link {
  border-bottom: 1px dotted var(--muted);
}

.mark {
  font-family: var(--mono-font);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15em 0.45em;
  border-radius: 0.2em;
  vertical-align: middle;
  color: var(--paper);
  background: var(--mark-todo);
}

.mark-next {
  background: var(--mark-next);
}

.mark-wait {
  background: var(--mark-wait);
}

.mark-done {
  background: var(--mark-done);
}

.mark-idea {
  background: var(--mark-idea);
}

p.backlinks {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1rem;
}

/* Code, tables, lists, images. */

code, pre {
  font-family: var(--mono-font);
  font-size: 0.85em;
}

code {
  background: none;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 80%, var(--accent));
}

pre {
  background: var(--code-bg);
  padding: 0.8rem 1rem;
  overflow-x: auto;
  line-height: 1.4;
}

pre code {
  padding: 0;
  background: none;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92em;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.3rem 0.8rem 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}

th {
  font-weight: normal;
  color: var(--muted);
}

ul, ol {
  padding-left: 1.4rem;
}

li {
  margin: 0.25rem 0;
}

ul.figure-list {
  list-style: none;
  padding-left: 0;
}

ul.figure-list li.level-2 {
  padding-left: 1.5rem;
}

figure.image, figure.capture {
  margin: 1.5rem 0;
}

figure.image img, figure.capture img, figure.capture video, img.inline {
  max-width: 100%;
  height: auto;
  border-radius: 0.4rem;
}

/* Lisp source as dexp boxes: every list is a box whose side borders are
its parentheses; a list without body forms flows and wraps, one with body
forms is a grid of rows (see the stacked group). */

.lisp {
  --paren: color-mix(in srgb, var(--ink) 30%, transparent);
  font-family: var(--display-font);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 1rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--code-bg);
  border-radius: 0.4rem;
  overflow-x: auto;
}

.lisp > * {
  display: block;
  margin: 0.4rem 0;
}

.lisp > .comment {
  display: block;
}

.lisp .list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  min-width: 0;
  row-gap: 0.05em;
  padding: 0 0.4em;
  border: 0 solid var(--paren);
  border-width: 0 1.5px;
  border-radius: 0.55em;
}

.lisp .list > .list {
  margin: 0.05em 0;
}

.lisp .body {
  flex-basis: 100%;
}

.lisp .operator, .lisp .list > .list.body > .operator, .lisp .list > .list > .operator {
  color: var(--accent);
}

.lisp .symbol {
  white-space: nowrap;
}

.lisp .package {
  opacity: 0.55;
}

.lisp .keyword {
  color: var(--mark-idea);
}

.lisp .string {
  color: color-mix(in srgb, var(--ink) 60%, var(--mark-done));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lisp .number, .lisp .character {
  color: var(--mark-wait);
}

.lisp .comment {
  flex-basis: 100%;
  color: var(--muted);
  font-style: italic;
  white-space: pre-wrap;
}

.lisp .prefixed, .lisp .conditional {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  min-width: 0;
}

.lisp .prefix {
  color: var(--muted);
  font-weight: bold;
}

.lisp .conditional > .list, .lisp .conditional > .skipped {
  border-style: dashed;
}

.lisp .skipped {
  color: var(--muted);
  white-space: pre-wrap;
}

.lisp .body.prefixed, .lisp .body.conditional {
  display: flex;
}

/* Code references and lisp: definition blocks. */

details.definition {
  margin: 0.6rem 0;
}

details.definition > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
}

details.definition > summary .kind {
  color: var(--accent);
}

details.definition > summary .name {
  color: var(--ink);
}

details.definition > summary a.source {
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

details.definition > .lisp {
  margin-top: 0.4rem;
}

.code-references > p.backlinks {
  margin-bottom: 0.2rem;
}

/* Source browser: definition links, whole-file pages, source metadata. */

.lisp a.definition-link {
  color: inherit;
}

.lisp a.definition-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.lisp.source {
  background: none;
  padding: 0;
}

.lisp.source > .toplevel {
  padding: 0;
  margin: 1.1rem 0;
  scroll-margin-top: 1rem;
}

.lisp.source > .toplevel:target {
  box-shadow: -0.6rem 0 0 -0.4rem var(--accent);
}

.lisp.source > .toplevel > .comment.prose {
  border-left: none;
  padding-left: 0;
  max-width: 44rem;
}

h1.source-title {
  font-size: 1.8rem;
  letter-spacing: -0.04em;
}

p.source-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Source pages on wide screens: the sidebar of systems and files on the
left, sticky under the status bar, the file itself as the main column. */

body.source-page main {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

article.source-body {
  min-width: 0;
}

.source-nav {
  position: sticky;
  top: 2.4rem;
  max-height: calc(100vh - 2.9rem);
  overflow-y: auto;
  padding-right: 0.75rem;
  margin-top: 0.55rem;
  font: 500 0.82rem/1.45 var(--display-font);
  border-right: 1px solid var(--rule);
  scrollbar-width: thin;
}

.source-nav-title {
  margin: 0 0 0.6rem;
  font: 700 0.72rem/1.4 var(--display-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.source-nav-title a {
  color: var(--muted);
}

.source-nav-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

details.source-system {
  margin: 0;
}

details.source-system > summary {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.15rem 0;
  cursor: pointer;
  list-style: none;
  color: color-mix(in srgb, var(--ink) 85%, var(--muted));
}

details.source-system > summary::-webkit-details-marker {
  display: none;
}

details.source-system > summary::before {
  content: "›";
  display: inline-block;
  width: 0.7em;
  color: var(--muted);
  transition: transform 0.12s;
}

details.source-system > summary .system {
  font-weight: 700;
  overflow-wrap: anywhere;
}

details.source-system > summary .count {
  color: var(--muted);
  font-size: 0.85em;
}

details.source-system > summary:hover .system {
  color: var(--accent);
}

details.source-system[open] > summary::before {
  transform: rotate(90deg);
}

details.source-system > ul {
  list-style: none;
  margin: 0.1rem 0 0.5rem;
  padding: 0 0 0 0.7em;
  border-left: 2px solid var(--rule);
}

details.source-system > ul > li {
  padding: 0.05rem 0 0.05rem 0.5em;
  margin-left: -2px;
  border-left: 2px solid transparent;
}

details.source-system > ul > li a {
  color: var(--ink);
  overflow-wrap: anywhere;
}

details.source-system > ul > li a .directory {
  color: var(--muted);
}

details.source-system > ul > li a:hover {
  color: var(--accent);
  text-decoration: none;
}

details.source-system > ul > li.current {
  border-left-color: var(--accent);
}

details.source-system > ul > li.current a {
  color: var(--accent);
  font-weight: 700;
}

/* Definitions index: kind badge · name · signature · line. */

nav.definitions {
  margin: 1rem 0 2rem;
  padding: 0.6rem 0.9rem;
  background: var(--code-bg);
  border-radius: 0.4rem;
}

nav.definitions ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.7em;
  row-gap: 0.15rem;
  align-items: baseline;
}

li.definition-entry {
  display: contents;
  font-family: var(--display-font);
  font-size: 0.85rem;
  line-height: 1.45;
}

li.definition-entry .kind {
  font-size: 0.78em;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

li.method-entry .kind {
  opacity: 0.6;
}

li.method-entry a.name {
  padding-left: 1.2em;
}

li.definition-entry .kind-defclass, li.definition-entry .kind-defstruct, li.definition-entry .kind-define-condition {
  color: var(--mark-idea);
}

li.definition-entry .kind-defgeneric {
  color: var(--accent);
}

li.definition-entry .kind-defmacro {
  color: var(--mark-wait);
}

li.definition-entry .kind-defvar, li.definition-entry .kind-defparameter, li.definition-entry .kind-defconstant {
  color: var(--mark-done);
}

li.definition-entry a.name {
  color: var(--ink);
  overflow-wrap: anywhere;
}

li.definition-entry a.name:hover {
  color: var(--accent);
}

li.definition-entry .signature {
  margin-left: 0.3em;
  color: var(--muted);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

details.definition > summary .kind {
  color: var(--accent);
}

/* Source index: files expand to their definitions in place; the systems table. */

details.source-file {
  margin: 0.25rem 0;
}

details.source-file > summary {
  cursor: pointer;
  font-size: 0.9rem;
}

details.source-file > summary .count, details.source-file > summary .system {
  margin-left: 0.6em;
  color: var(--muted);
  font-size: 0.8em;
}

table.systems {
  width: 100%;
  margin: 1rem 0 2rem;
  font-size: 0.88rem;
  line-height: 1.35;
}

table.systems th {
  font: 700 0.72rem/1.4 var(--display-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.3rem 0.9rem 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}

table.systems td {
  padding: 0.35rem 0.9rem 0.35rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.systems tr:target td {
  background: color-mix(in srgb, var(--paper) 94%, var(--accent));
}

td.system-name {
  font-weight: 700;
  white-space: nowrap;
}

td.system-description {
  max-width: 28rem;
  color: color-mix(in srgb, var(--ink) 80%, var(--muted));
}

td.system-depends {
  max-width: 16rem;
  color: var(--muted);
}

td.system-files {
  min-width: 18rem;
}

td.system-files details.source-file {
  margin: 0;
}

td.system-files details.source-file > summary {
  font-size: 0.88rem;
  line-height: 1.5;
}

td.system-files nav.definitions {
  margin: 0.3rem 0 0.6rem 0.9rem;
  padding: 0.4rem 0.7rem;
}

details.source-file > summary .directory {
  color: var(--muted);
}

details.source-file > summary .file {
  color: var(--accent);
  font-weight: 600;
}

details.source-file > nav.definitions {
  margin: 0.4rem 0 0.8rem 1.2rem;
}

a.github {
  color: var(--muted);
  text-decoration: none;
}

/* Docstrings and comments as prose inside the boxes. */

.lisp .prose {
  flex-basis: 100%;
  white-space: normal;
  font-family: var(--body-font);
  text-align: start;
  font-size: 0.95em;
  line-height: 1.45;
  max-width: 40rem;
}

.lisp .prose p {
  margin: 0.15em 0 0.35em;
}

.lisp .prose p:last-child, .lisp .prose ul:last-child {
  margin-bottom: 0.1em;
}

.lisp .prose ul, .lisp .prose ol {
  margin: 0.2em 0;
  padding-left: 1.2rem;
}

.lisp .prose code {
  font-family: var(--mono-font);
  font-size: 0.85em;
}

.lisp .string.prose {
  color: color-mix(in srgb, var(--ink) 75%, var(--mark-done));
  padding-left: 0.6em;
  border-left: 2px solid color-mix(in srgb, var(--mark-done) 40%, transparent);
}

.lisp .comment.prose {
  color: var(--muted);
  font-style: italic;
  padding-left: 0.6em;
  border-left: 2px solid var(--rule);
}

.lisp .comment.prose code {
  font-style: normal;
}

.lisp .prose code.symbol {
  font-family: var(--display-font);
  font-size: 0.95em;
  font-style: normal;
  background: none;
  padding: 0;
  color: var(--ink);
}

.lisp .prose a.definition-link code.symbol {
  color: var(--accent);
}

/* A list with body forms is a grid of rows: the .head row, then one row
per body form, so the box hugs its widest row instead of stretching to
its parent (#993QQQ). */

.lisp .list.stacked {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  width: fit-content;
  max-width: 100%;
}

.lisp .list.stacked > .head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  min-width: 0;
}

.lisp .list.stacked > .body {
  flex-basis: auto;
  max-width: 100%;
}

.lisp .list.stacked > .list.body {
  width: fit-content;
}

/* COND, CASE, HANDLER-CASE and other clause forms are tables (#4175NC):
each clause a row with its key or test in the first column and its
body forms stacked in the second, aligned across the clauses. */

.lisp .list.clauses {
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  column-gap: 0.7em;
}

.lisp .list.clauses > .head, .lisp .list.clauses > .comment {
  grid-column: span 2;
}

.lisp .list.clauses > .stacked-clause {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: baseline;
  width: auto;
}

.lisp .list.clauses > .stacked-clause > .head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  min-width: 0;
}

.lisp .list.clauses > .stacked-clause > .rest {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  row-gap: 0.05em;
  min-width: 0;
}

.lisp .list.clauses > .stacked-clause > .rest > .body {
  flex-basis: auto;
  max-width: 100%;
}

.lisp .list.clauses > .stacked-clause > .rest > .list.body {
  width: fit-content;
}

/* Layouts: binding grids, clauses, loop rows.  The selectors are the roles
dexp.lisp assigns. */

.lisp .list.bindings {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.6em;
  row-gap: 0.1em;
  align-items: baseline;
}

.lisp .list.bindings > .list.clause {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: baseline;
  column-gap: 0.6em;
}

.lisp .list.bindings > .symbol, .lisp .list.bindings > .comment {
  grid-column: span 2;
}

.lisp .rest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  min-width: 0;
}

.lisp .list.clause:not(.bindings > *) {
  display: flex;
}

.lisp .break {
  flex-basis: 100%;
  height: 0;
}

.lisp .row-start {
  color: var(--accent);
}

/* Keyword/value pairs stay together; in body position each pair is a row
with keys loosely aligned.  A SETF with several pairs is a place/value
table: each pair a subgrid row of its two-column box. */

.lisp .pair {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.5em;
  min-width: 0;
}

.lisp .pair.body {
  display: flex;
  flex-basis: 100%;
}

.lisp .pair.body > .symbol:first-child {
  min-width: 8em;
}

.lisp .list.pairs {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.6em;
}

.lisp .list.pairs > .head, .lisp .list.pairs > .comment {
  grid-column: span 2;
}

.lisp .list.pairs > .pair.body {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: baseline;
}

.lisp .list.pairs > .pair.body > .symbol:first-child {
  min-width: 0;
}

/* Narrow screens: one column, smaller title, ragged prose. */

@media screen and (max-width: 90ch) {
  .library, .doors {
    grid-template-columns: minmax(0, 1fr);
  }

  h1 {
    font-size: 1.65rem;
  }

  p {
    text-align: start;
  }

  body.source-page main {
    display: block;
  }

  .source-nav {
    display: none;
  }

  a.crumb:not(:first-of-type), a.crumb:not(:first-of-type) + .crumb-sep {
    display: none;
  }

  .status:has(.crumb-sep) .status-right {
    display: none;
  }
}

/* Figure and definition cards shown beside mentions. */

.figure-popover {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  font: 400 0.92rem/1.4 var(--body-font);
  overflow: hidden;
  inset: auto;
}

.figure-popover:popover-open {
  display: block;
}

.figure-card .card-title, .figure-popover .card-title {
  display: block;
  padding: 0.65rem 0.85rem 0.15rem;
  font: 700 1rem/1.25 var(--display-font);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.figure-popover .card-title:hover {
  color: var(--accent);
  text-decoration: none;
}

.figure-popover .card-title .mark {
  font-size: 0.55em;
  vertical-align: 0.15em;
}

.figure-popover .card-meta {
  display: block;
  padding: 0 0.85rem 0.5rem;
  color: var(--muted);
  font: 500 0.8rem/1.3 var(--display-font);
  border-bottom: 1px solid var(--rule);
}

.figure-popover .card-id {
  font-family: var(--mono-font);
  font-weight: 700;
}

.figure-popover .card-excerpt {
  margin: 0;
  padding: 0.6rem 0.85rem 0.75rem;
  text-align: start;
  hyphens: auto;
  color: color-mix(in srgb, var(--ink) 88%, var(--paper));
}

/* Math and diagrams. */

.math.display {
  margin: 1rem 0;
  overflow-x: auto;
  text-align: center;
}

pre.mermaid {
  background: none;
  padding: 0.5rem 0;
  text-align: center;
  font: 0.85rem/1.4 var(--mono-font);
  color: var(--muted);
}

pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

pre.mermaid p, pre.mermaid span {
  text-align: center;
  margin: 0;
}

/* Definition cards. */

.figure-popover .card-kind {
  color: var(--accent);
  font-weight: 500;
}

.figure-popover .card-lambda-list {
  display: block;
  padding: 0 0.85rem 0.35rem;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* Systems table: file entries and their popover buttons; the systems graph. */

.file-entry {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  line-height: 1.5;
}

.file-entry .directory {
  color: var(--muted);
}

.file-entry .file {
  color: var(--accent);
  font-weight: 600;
}

button.count {
  font: 600 0.72rem/1.4 var(--display-font);
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0 0.5em;
  cursor: pointer;
}

button.count:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.figure-popover nav.definitions {
  margin: 0;
  padding: 0.5rem 0.85rem 0.7rem;
  background: none;
  max-height: 60vh;
  overflow-y: auto;
}

pre.mermaid.system-graph {
  margin: 0.5rem 0 1.5rem;
  text-align: start;
}

pre.mermaid.system-graph svg {
  max-width: 100%;
  height: auto;
}

p.graph-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

/* The Pages table. */

table.pages {
  width: 100%;
  margin: 1rem 0 2rem;
  font-size: 0.9rem;
}

table.pages td {
  padding: 0.45rem 1rem 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

td.page-title {
  width: 18rem;
  font-weight: 700;
}

td.page-title a {
  color: var(--ink);
}

td.page-headings a.heading {
  display: inline-block;
  margin: 0 0.9em 0.15em 0;
  color: var(--ink);
}

td.page-headings a.heading.level-2 {
  color: var(--muted);
  font-size: 0.92em;
}

td.page-headings a.heading:hover {
  color: var(--accent);
  text-decoration: none;
}

td.page-headings a.heading .mark {
  font-size: 0.65em;
}

/* The Work page: marks by status. */

section.work-status {
  margin: 1.5rem 0 2rem;
}

section.work-status > h2 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

section.work-status > h2 .mark {
  font-size: 0.75em;
}

.status-meaning {
  font-weight: 400;
  color: var(--muted);
}

table.work {
  width: 100%;
  font-size: 0.9rem;
}

table.work td {
  padding: 0.4rem 1rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

td.work-title {
  width: 22rem;
  font-weight: 600;
}

td.work-title a {
  color: var(--ink);
}

td.work-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

.work-page {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

td.work-intent {
  color: color-mix(in srgb, var(--ink) 80%, var(--muted));
}