@layer tokens, base, components, project;

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-normal-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-normal-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-italic-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-italic-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
:root {
  color-scheme: light dark;
  --font-display: "Instrument Sans", system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 8px;
  --radius-small: 4px;
  --radius-large: 12px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --measure: 70ch;
  --scheme: light;
  --color-bg: #EFEDE9;
  --color-surface: #FFFFFF;
  --color-soft: #F7F6F3;
  --color-border: #E3E0DA;
  --color-ink: #1F2124;
  --color-muted: #3A3E44;
  --color-label: #676C74;
  --color-accent: #A8431C;
  --color-highlight: #FBE3D4;
  --shadow-float: 0 6px 18px rgb(0 0 0 / 10%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-mode="light"]) {
  --scheme: dark;
  --color-bg: #0F1113;
  --color-surface: #181B1E;
  --color-soft: #22262A;
  --color-border: #282C31;
  --color-ink: #ECEAE6;
  --color-muted: #A8AEB6;
  --color-label: #8D939B;
  --color-accent: #E8703A;
  --color-highlight: #4A2A1B;
  --shadow-float: none;
}
}
:root[data-mode="light"] {
  color-scheme: light;
  --scheme: light;
  --color-bg: #EFEDE9;
  --color-surface: #FFFFFF;
  --color-soft: #F7F6F3;
  --color-border: #E3E0DA;
  --color-ink: #1F2124;
  --color-muted: #3A3E44;
  --color-label: #676C74;
  --color-accent: #A8431C;
  --color-highlight: #FBE3D4;
  --shadow-float: 0 6px 18px rgb(0 0 0 / 10%);
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --scheme: dark;
  --color-bg: #0F1113;
  --color-surface: #181B1E;
  --color-soft: #22262A;
  --color-border: #282C31;
  --color-ink: #ECEAE6;
  --color-muted: #A8AEB6;
  --color-label: #8D939B;
  --color-accent: #E8703A;
  --color-highlight: #4A2A1B;
  --shadow-float: none;
}
}

@layer base {
/* Base layer: document defaults built on the tokens, logical properties only. */

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

html {
  font-family: var(--font-ui);
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The page fills the viewport: the main landmark grows, the footer sits under it, never in the middle of a short page. */
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-ink);
}

/* One family for the text, headings included: the hierarchy comes from size and weight. */

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.2;
  margin-block: var(--space-4) var(--space-2);
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: 2.125rem;
  letter-spacing: -0.022em;
}

h2 {
  font-size: 1.1875rem;
  line-height: 1.35;
}

h3 {
  font-size: 1rem;
}

p,
ul,
ol,
dl {
  margin-block: 0 var(--space-3);
}

ul,
ol {
  padding-inline-start: var(--space-4);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* The monospace family is reserved to file paths and identifiers; never under 13 px. */

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: max(0.9375em, 0.8125rem);
}

mark {
  background: var(--color-highlight);
  color: var(--color-ink);
  border-radius: 2px;
}

pre {
  overflow-x: auto;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
}

th,
td {
  text-align: start;
  padding: var(--space-1) var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

blockquote {
  margin-inline: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-ink);
  border-start-end-radius: var(--radius-large);
  border-end-end-radius: var(--radius-large);
  background: var(--color-surface);
  color: var(--color-muted);
}

button,
input {
  font: inherit;
  color: inherit;
}

/* Every control is a target of at least 40 px. */

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
summary {
  min-block-size: 2.5rem;
}

summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▸" / "";
  flex: none;
  color: var(--color-label);
  font-size: 0.8125rem;
}

details[open] > summary::before {
  content: "▾" / "";
}

/* Focus: every interactive element shows the same ring, never removed without a replacement. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* The main landmark spans the page and grows to the footer: each page component sets its own measure, and the columns of an entity page reach the foot. */
main {
  min-inline-size: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

main > * {
  flex: 1;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: none;
  z-index: 1;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}

@layer components {
/* Components layer: one block per slot of the default theme. Text never under 13 px, targets of 40 px. */

concordance-island {
  display: block;
}

.count {
  display: inline-block;
  min-inline-size: 1.5em;
  margin-inline-start: var(--space-1);
  padding-inline: var(--space-1);
  border-radius: 1em;
  background: var(--color-soft);
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: center;
}

/* The type of a page: a chip in the soft colour, read in the secondary text colour. */
.badge {
  display: inline-block;
  padding: 0.25em 0.625em;
  border-radius: calc(var(--radius) * 0.625);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* The chip that leads to the pages of its type keeps the chip colours, the underline on hover telling the link. */
a.badge {
  text-decoration: none;
}

a.badge:hover {
  text-decoration: underline;
}

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

/* A small capital label above a block of the panel. */
.panel-block h2,
.section-label {
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Top bar: the drawer button, mark and site name, the search field, three links, the mode switch; no statistic. Served for the phone: the wider layouts are added at the end of the sheet. */

.site-header {
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-block-size: 3.5rem;
  padding: var(--space-2) var(--space-4);
}

.site-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-logo {
  block-size: 1.375rem;
}

.site-logo svg {
  display: block;
  block-size: 1.375rem;
  inline-size: auto;
}

/* Search island: the field, and the suggestions its script draws under it. */

concordance-island[data-island="search"] {
  position: relative;
  flex: 1 1 16rem;
  max-inline-size: 26rem;
}

.site-search {
  margin: 0;
}

.site-search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding-inline: var(--space-2);
  border-radius: calc(var(--radius) * 1.125);
  background: var(--color-soft);
  color: var(--color-label);
}

.search-glyph {
  flex: none;
}

.site-search input {
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.site-search input::placeholder {
  color: var(--color-label);
  opacity: 1;
}

.search-shortcut {
  flex: none;
  padding: 0.25em 0.5em;
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 500;
}

.search-suggestions {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  z-index: 1;
  min-inline-size: 100%;
  max-block-size: 60vh;
  overflow-y: auto;
  margin-block-start: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

/* The links of the bar stand in the drawer, one under the other; the wide bar lays them in a row. */
.site-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.site-links a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* Mode switch: a square button drawing the glyph of the current scheme, served hidden and revealed by its script; its name and the scheme are written for assistive technology alone. */

.mode-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.mode-switch:hover {
  background: var(--color-soft);
}

.mode-switch-glyph {
  display: block;
}

/* Pinned pages: the island under the bar is served empty, so that the bar shows nothing until a reader has pinned a page; its script draws the row of pins as chips, the current page filled, the ones beyond the room of the bar behind a "+N" summary opening the full list. The button pinning the page stands after the title of the page, served hidden. */

concordance-island[data-island="pins"]:empty {
  display: none;
}

.pins {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4375rem;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.125rem var(--space-4);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}

.pins-label {
  flex: none;
  margin-inline-end: var(--space-1);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pins-list {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  gap: 0.4375rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

/* A chip: the title as a link, the cross that removes it; the current page filled in the ink. */
.pin {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: 0.6875rem 0;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.pin > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  color: inherit;
  text-decoration: none;
}

.pin > a:hover {
  text-decoration: underline;
}

/* The chips beyond the room of the bar, hidden by the script, take no room. */
.pin[hidden],
.pins-row[hidden] {
  display: none;
}

.pin-current {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: 600;
}

.pin-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
}

.pin-current > .pin-remove {
  color: var(--color-border);
}

.pin-remove:hover {
  color: inherit;
}

/* The summary of the pins beyond the bar, "+N ▾", then the menu unfolded under it, right-aligned. */
.pins-more {
  position: relative;
  flex: none;
  margin: 0;
}

.pins-more-button {
  display: inline-flex;
  gap: 0.4375rem;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-ink);
  border-radius: 1.25rem;
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.pins-more-button::before {
  content: none;
}

.pins-more-mark {
  color: var(--color-label);
}

.pins-count {
  flex: none;
  margin-inline-start: auto;
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.pins-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.375rem);
  z-index: 3;
  inline-size: min(22.5rem, calc(100vw - 2 * var(--space-4)));
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  color: var(--color-ink);
  font-weight: 400;
}

.pins-menu-head {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  padding: 0.6875rem 0.875rem;
  border-block-end: 1px solid var(--color-soft);
  background: var(--color-soft);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.pins-menu-title {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pins-menu-count {
  font-family: var(--font-mono);
}

/* The filter reads as a small field, the magnifier before it. */
.pins-menu-filter {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0.625rem 0.875rem;
  padding-inline-start: 0.625rem;
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.pins-filter {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 2.5rem;
  padding: 0 0.625rem 0 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-size: 0.8125rem;
}

.pins-menu-list {
  max-block-size: 50vh;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--color-soft);
  overflow-y: auto;
  list-style: none;
}

/* A row of the menu: the title, the space of the page, the cross; the current page bold. */
.pins-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding-inline-start: 0.875rem;
  border-block-end: 1px solid var(--color-soft);
  font-size: 0.8125rem;
}

.pins-row > a {
  display: flex;
  flex: 1;
  align-items: center;
  min-inline-size: 0;
  min-block-size: 2.5rem;
  overflow: hidden;
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pins-row > a:hover {
  text-decoration: underline;
}

.pins-row-current > a {
  font-weight: 600;
}

.pin-space {
  flex: none;
  color: var(--color-label);
}

.pins-menu-foot {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0.125rem 0.875rem;
  background: var(--color-soft);
}

.pins-remove-all {
  min-block-size: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-size: 0.8125rem;
  cursor: pointer;
}

.pins-remove-all:hover {
  text-decoration: underline;
}

/* The button of the page header stands after the title, a chip with the pin and one word, filled in the ink while the page is pinned. */
.entity-header {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.875rem;
  align-items: center;
}

.entity-header > .entity-badge {
  flex-basis: 100%;
}

.pin-button {
  display: inline-flex;
  gap: 0.4375rem;
  align-items: center;
  min-block-size: 2.5rem;
  margin-block-end: var(--space-2);
  padding-inline: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.pin-button[hidden] {
  display: none;
}

.pin-button:hover {
  background: var(--color-soft);
}

.pin-button[aria-pressed="true"],
.pin-button-pinned {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface);
}

.pin-button-glyph {
  display: inline-flex;
}

.pin-glyph {
  display: block;
}

/* Footer: a band at the width of the page, in two columns, what the tool knows of the site then what the organisation declared, the second shown only when something was; under them the build line, in the monospace family on the soft surface, the to-do page with its count at its end. */

/* Flush with the columns above it: a band the width of the page under a rule, no margin and no radius, so that the foot continues the page instead of floating on its ground. */
.site-footer {
  box-sizing: border-box;
  border-block-start: 1px solid var(--color-border);
}

.site-footer-card {
  background: var(--color-surface);
  overflow: hidden;
}

.site-footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) 2.25rem;
  padding: 1.5rem 2.5rem;
}

.site-footer-site {
  flex: 1;
  min-inline-size: 17.5rem;
}

.site-footer-declared {
  flex: none;
  min-inline-size: 13.75rem;
}

.site-footer-site,
.site-footer-declared {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}

.site-footer-heading {
  margin: 0;
  color: var(--color-label);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer-published,
.site-footer-licence,
.site-footer-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.site-footer-published,
.site-footer-text {
  color: var(--color-muted);
}

.site-footer-licence {
  color: var(--color-label);
}

.site-footer-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.site-footer-card > .site-footer-build {
  margin: 0;
  padding: var(--space-1) 2.5rem;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-soft);
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* The to-do link ends the build line and keeps the target height of the other links. */

.site-footer-todo {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
}

/* Every page but the entity page reads in one measured column. */

.home,
.index,
.todo,
.search-results,
.redirect,
.gallery,
.gallery-panel {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
}

/* Entity page: the tree of the space, the text in the centre, what is computed in the right panel. */

.entity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "space"
    "main"
    "side";
}

/* Three widths: one column; the tree folded above the text with the panel beside it; three columns. The centre column is padded 18 by 16 px on the phone, 20 px on the tablet, 30 by 40 px on the desktop. */

@media (min-width: 43.75rem) {
  .entity {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.5rem);
    grid-template-areas:
      "space space"
      "main side";
  }

  .entity-main {
    padding: 1.25rem 1.25rem var(--space-5);
  }

  .entity-side {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }
}

@media (min-width: 68.75rem) {
  .entity {
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    grid-template-areas: "main side";
  }

  .entity-with-space {
    grid-template-columns: 16rem minmax(0, 1fr) 21.5rem;
    grid-template-areas: "space main side";
  }

  .entity-main {
    padding: 1.875rem 2.5rem var(--space-5);
  }

  .space-tree {
    block-size: 100%;
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-border);
  }

  /* The tree stands in its column: the stylesheet keeps the content of the disclosure in view. */
  .space-tree::details-content {
    display: block;
    content-visibility: visible;
  }

  .space-head::before {
    content: none;
  }
}

.space {
  grid-area: space;
}

.entity-main {
  grid-area: main;
  min-inline-size: 0;
  padding: 1.125rem 1rem var(--space-5);
}

.entity-side {
  grid-area: side;
  min-inline-size: 0;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}

.entity-main > * {
  max-inline-size: 50rem;
  margin-inline: auto;
}

/* The foot of the article on the phone: the name of the file alone, its folders left out, and the short label of the edit link, "plafond.md · Edit" on one line of 48 px, the path kept at the 13 px floor of the theme; the question stays for the wider widths. */

.entity-edit-short {
  display: none;
}

@media (width < 43.75rem) {
  /* Named with the footer, so that the rules of the article, assembled after this file, do not undo them; the line takes the whole width the hidden legend leaves. */
  .entity-footer > .entity-source {
    flex: 1;
    flex-wrap: nowrap;
    min-block-size: 3rem;
  }

  .entity-source-folders,
  .entity-edit-question,
  .entity-edit-long {
    display: none;
  }

  .entity-edit-short {
    display: inline;
  }
}

/* The tree of the space: the initials badge and the name head it, folded behind them where the layout has no column. */

.space-tree {
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.space-head {
  min-block-size: 3.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
}

/* In the column, the head is the link to the page of the space and the summary of the disclosure, kept for the drawer, gives way to it. */

.space-head-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.space-head-link:hover .space-name {
  text-decoration: underline;
}

.space-head-link + .space-tree > .space-head {
  display: none;
}

/* The column carries the rule on its side, so that the head and the tree share it whatever their heights. */

.space {
  border-inline-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.space > .space-tree {
  block-size: auto;
  border-inline-end: 0;
}

.space-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: calc(var(--radius) * 0.875);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.space-nodes {
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-3);
  list-style: none;
  font-size: 0.875rem;
}

.space-nodes .space-nodes {
  padding: 0 0 0 var(--space-3);
}

.space-folder-name,
.space-page > a,
.space-page > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding: var(--space-1) var(--space-2);
  color: var(--color-muted);
  text-decoration: none;
}

.space-folder-name .count {
  margin-inline-start: auto;
}

.space-open > .space-folder-name {
  color: var(--color-ink);
  font-weight: 600;
}

.space-page > a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* The current page: a rule on its side and the bold weight, never a colour alone. */

.space-current > span {
  border-inline-start: 3px solid var(--color-accent);
  border-radius: calc(var(--radius) * 0.875);
  background: var(--color-soft);
  color: var(--color-ink);
  font-weight: 600;
}

/* Breadcrumb: space › folder › page. */

.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0 auto var(--space-3);
  padding: 0;
  list-style: none;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.breadcrumbs-list > li + li::before {
  content: "›" / "";
  margin-inline-end: var(--space-2);
}

.breadcrumbs-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  text-decoration: none;
}

.breadcrumbs-list a:hover {
  text-decoration: underline;
}

.breadcrumbs-list [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 500;
}

/* Title, then the line naming the type, the last change and the space. */

.entity-header h1 {
  margin-block: 0 var(--space-2);
}

.entity-badge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin: 0;
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.entity-badge > * + *::before {
  content: "·" / "";
  margin-inline-end: var(--space-3);
}

.entity-badge > .badge + *::before {
  content: none;
}

/* The space on the line reads as the rest of the line, the underline on hover telling the link to its page. */

a.entity-space {
  color: inherit;
  text-decoration: none;
}

a.entity-space:hover {
  text-decoration: underline;
}

.entity-body {
  margin-block-start: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.entity-body > section > h2:first-child {
  margin-block-start: var(--space-4);
}

/* The three marks of the text, one per degree of curation: a link someone wrote, solid in the
   accent; a recognised word whose entity has a note, dotted in the accent; a recognised
   expression that has a keyword page and no note, dashed in the label grey, never the accent.
   The dots and dashes never carry the information alone: the anchor's title and hidden text do. */

.markdown .written {
  color: var(--color-accent);
}

.markdown .recognised,
.markdown .recognised-keyword {
  color: var(--color-ink);
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}

.markdown .recognised-keyword {
  text-decoration-style: dashed;
  text-decoration-color: var(--color-label);
}

.markdown img {
  max-inline-size: 100%;
  block-size: auto;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.legend-written::before,
.legend-recognised::before,
.legend-keyword::before {
  content: "";
  display: inline-block;
  inline-size: 1.25em;
  margin-inline-end: var(--space-1);
  border-block-end: 2px solid var(--color-accent);
  vertical-align: middle;
}

.legend-recognised::before {
  border-block-end-style: dotted;
}

.legend-keyword::before {
  border-block-end-style: dashed;
  border-color: var(--color-label);
}

/* The footer of the note: the path of the file, then the edit link. */

.entity-footer {
  margin-block-start: var(--space-4);
  padding-block: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.entity-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.entity-source code {
  font-size: 0.8125rem;
}

/* The path linked to the file on its forge reads as the path does, the underline on hover telling the link. */

.entity-source-file {
  color: inherit;
  text-decoration: none;
}

.entity-source-file:hover code {
  text-decoration: underline;
}

.entity-edit-lead {
  margin-inline-start: auto;
}

/* The right panel: stacked blocks, never tabs; each one a disclosure whose summary is its heading. */

.panel-block {
  margin: 0;
  padding: 0 var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

/* Every block is served folded; from the width where the panel has a column, the stylesheet keeps its content in view. */
@media (min-width: 43.75rem) {
  .panel-fold::details-content {
    display: block;
    content-visibility: visible;
  }

  .panel-fold > summary::before {
    content: none;
  }
}

.panel-fold > summary {
  min-block-size: 3rem;
  list-style: none;
}

.panel-fold > summary::before {
  order: 1;
  margin-inline-start: auto;
}

.panel-note,
.related-note {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.attributes {
  margin: 0;
}

.attribute {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-soft);
  font-size: 0.8125rem;
}

.attributes dt {
  flex: none;
  inline-size: 6.75rem;
  color: var(--color-label);
}

.attributes dd {
  flex: 1;
  margin: 0;
  font-weight: 500;
}

/* A value the build decided rather than a declaration, the proposed domain: italics, the reason on hovering. */
.attributes .value-noted {
  font-style: italic;
  text-decoration-style: dotted;
}

.toc-list {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.toc-list a {
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--color-border);
  color: var(--color-muted);
  text-decoration: none;
}

.toc-list a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* The entry of the section being read: the accent on its rule and the ink, moved by the island as the reader scrolls. */

.toc-list a[aria-current] {
  border-inline-start-color: var(--color-accent);
  color: var(--color-ink);
  font-weight: 500;
}

/* Related pages: one entry per page that evokes the entity, most passages first. */

.mentions .panel-fold > summary .count {
  margin-inline-start: var(--space-2);
}

.mentions-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
  font-size: 0.8125rem;
}

.related-filter {
  flex: 1 1 10rem;
  display: flex;
}

.mentions-controls input {
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
}

.mentions-controls input::placeholder {
  color: var(--color-label);
  opacity: 1;
}

.related-types {
  position: relative;
  flex: none;
}

.related-types > summary {
  padding: 0 var(--space-2);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 500;
}

.related-types > summary::before {
  order: 1;
}

.related-types > summary .count {
  background: var(--color-ink);
  color: var(--color-surface);
}

.related-type-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  z-index: 2;
  min-inline-size: 14rem;
  margin-block-start: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.related-type-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-type-list label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding: 0 var(--space-2);
  border-block-end: 1px solid var(--color-soft);
  cursor: pointer;
}

.related-type-list .count {
  margin-inline-start: auto;
}

.related-type-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-soft);
  color: var(--color-label);
}

.related-clear {
  margin-inline-start: auto;
  min-block-size: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-soft);
}

.related-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-inline-size: 0;
}

.related-title {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-title:hover {
  text-decoration: underline;
}

.related-type,
.related-count {
  flex: none;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.related-count {
  min-inline-size: 1.5em;
  font-family: var(--font-mono);
  text-align: end;
}

.related-excerpt {
  display: block;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-excerpt:hover {
  text-decoration: underline;
}

/* The mark of a page that writes a link to this one: a word in the accent, never the colour alone. */

.related-mark {
  color: var(--color-accent);
}

.mention-context {
  quotes: none;
}

/* The words naming the entity: the same weight as a recognised word in the note, no colour of their own. */
.mention-context mark {
  background: transparent;
  color: inherit;
  font-weight: 600;
}

.mentions-more {
  margin: var(--space-2) 0 0;
}

.mentions-more button {
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.mentions-more button[disabled] {
  cursor: progress;
  color: var(--color-label);
}

.mentions-more a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  font-size: 0.8125rem;
}

/* The served pages beyond the six in view: a disclosure worded and drawn as the button that shows them, its line gone once opened; the island renders its button in its place. */

.related-beyond > summary {
  justify-content: center;
  margin-block-start: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.related-beyond > summary::before {
  content: none;
}

.related-beyond[open] > summary {
  display: none;
}

/* Phone: two entries in view before the button; the others return once the reader asks for them, through the island or the disclosure. */

@media (width < 43.75rem) {
  .mentions-body:not(.related-expanded):not(:has(.related-beyond[open]))
    > .related-list
    > .related-page:nth-child(n + 3),
  .mentions-body:not(.related-expanded):not(:has(.related-beyond[open])) > .related-others {
    display: none;
  }
}

/* Tablet: while the entries beyond three stay folded behind their count, the way to the others stays with them. */

@media (43.75rem <= width < 68.75rem) {
  .related-others:not([open]) ~ .related-beyond,
  .related-others:not([open]) ~ .mentions-more {
    display: none;
  }
}

/* The neighbourhood, folded behind its line at the foot of the panel. */

.neighbourhood-fold {
  margin: 0;
}

.neighbourhood-fold > summary {
  min-block-size: 3.25rem;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  list-style: none;
}

.neighbourhood-fold > summary::before {
  order: 2;
}

/* The mark before the lead: the centre in the accent, its neighbours in the label tone, the edges in the border tone; gone once the line is the head of the map. */
.neighbourhood-icon {
  flex: none;
  fill: var(--color-label);
}

.neighbourhood-icon-centre {
  fill: var(--color-accent);
}

.neighbourhood-icon-edges {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.2;
}

.neighbourhood-fold[open] > summary > .neighbourhood-icon {
  display: none;
}

.neighbourhood-lead {
  flex: 1;
}

.neighbourhood-count {
  color: var(--color-label);
  font-weight: 400;
}

.neighbourhood {
  padding: 0 var(--space-3) var(--space-3);
}

.neighbourhood h2 {
  margin-block-start: 0;
  font-size: 1rem;
}

.neighbour-list {
  padding: 0;
  list-style: none;
}

/* Contract viewer of an API page; the block around it is styled with the API page at the end of the sheet. */

.contract {
  margin-block: var(--space-4);
}

.contract-summary,
.contract-description {
  color: var(--color-muted);
}

.contract-operation > button,
.contract-schema-list button {
  cursor: pointer;
  color: var(--color-accent);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contract-data[aria-busy="true"] {
  color: var(--color-muted);
}

.contract-operation-list,
.contract-schema-list {
  padding: 0;
  list-style: none;
}

.contract-operation {
  margin-block-end: var(--space-2);
}

.contract-operation-details {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-border);
}

.contract-schema-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.contract-schema-list button[aria-pressed="true"] {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: bold;
}

.contract-table {
  inline-size: 100%;
  margin-block: var(--space-2);
  border-collapse: collapse;
  font-size: 0.875rem;
}

.contract-table caption {
  text-align: start;
  font-weight: bold;
}

.contract-table th,
.contract-table td {
  padding: var(--space-1) var(--space-2);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.contract-required {
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-style: italic;
}

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

.neighbourhood-map {
  margin: 0 0 var(--space-3);
}

/* The map in a frame on the soft surface, the drawing centred in it at the scale its width allows. The font size is a presentation attribute of the SVG: the layout estimates label widths from it. */
.neighbourhood-graph {
  display: block;
  inline-size: 100%;
  block-size: 20.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-soft);
  font-family: var(--font-ui);
}

.neighbourhood-graph .map-edge {
  stroke: var(--color-border);
  stroke-width: 1.6;
}

/* A neighbour is a small grey node; the page at the centre is drawn in the accent, it is the current position. */
.neighbourhood-graph .map-shape {
  fill: var(--color-label);
}

.neighbourhood-graph .map-centre .map-shape {
  fill: var(--color-accent);
  stroke: var(--color-soft);
  stroke-width: 3;
}

/* A noteless word: a dashed, hollow square, its edge dashed too. */
.neighbourhood-graph .map-node-keyword .map-shape {
  fill: var(--color-soft);
  stroke: var(--color-label);
  stroke-width: 1.5;
}

/* The type glyph sits inside the node, drawn in the surface colour over the grey. */
.neighbourhood-graph .map-glyph {
  fill: var(--color-surface);
}

.neighbourhood-graph text.map-glyph {
  font-size: 8px;
  font-weight: 700;
}

/* A halo of the frame colour lets a label stay readable where an edge passes under it. */
.neighbourhood-graph .map-label {
  fill: var(--color-ink);
  font-size: 11.5px;
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--color-soft);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.neighbourhood-graph .map-centre .map-label {
  font-size: 12px;
  font-weight: 600;
}

/* Under the map, when the model holds more neighbours than it draws. */
.neighbourhood-total {
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.neighbourhood-map figcaption {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.neighbour {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

/* A new priority group of neighbours, as ranked by the profile. */
.neighbour.group-start {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.relation {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.weight {
  margin-inline-start: auto;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* Index: the title and its sentence with the filters button beside them, the letter bar ruled above and below, then the entries of every letter of the page in a table of four columns, and the note on the words without a definition at the foot. */

.index {
  max-inline-size: 71.25rem;
  padding: 2.125rem 2.5rem var(--space-5);
}

.index-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) 1.25rem;
  margin-block-end: 1.125rem;
}

.index-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.index h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.index-lead {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* The filters: a button folding a menu of links, each leading to the results page filtered by its value; the marker of the summary reads ▾ after the word. */

.index-filters {
  position: relative;
  flex: none;
}

.index-filters-button {
  gap: 0.4375rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.index-filters-button::before {
  content: "▾" / "";
  order: 1;
}

.index-filters[open] > .index-filters-button::before {
  content: "▴" / "";
}

.index-filters-glyph {
  flex: none;
}

.index-filters-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  z-index: 2;
  min-inline-size: 16rem;
  margin-block-start: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.index-filter + .index-filter {
  border-block-start: 1px solid var(--color-border);
}

.index-filter h2 {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-filter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-filter-list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding: 0 var(--space-3);
  color: var(--color-ink);
  font-size: 0.875rem;
  text-decoration: none;
}

.index-filter-list a:hover {
  background: var(--color-soft);
  text-decoration: underline;
}

.index-filter-list .count {
  margin-inline-start: auto;
}

/* The letter bar: every letter in the monospace family, the current one on the ink, a letter without an entry struck through and inert, the count of those at the end of the row. */

.letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-end: 1.25rem;
  padding-block: 0.625rem;
  border-block: 1px solid var(--color-border);
}

/* The letters stay on one line where the bar is wide enough, the count after them or under them at the end of the bar. */
.letters ul {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 0.1875rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.25rem;
  min-block-size: 2.5rem;
  border-radius: var(--radius);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

a.letter:hover {
  background: var(--color-soft);
  color: var(--color-ink);
}

.letter[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: 600;
}

.letter.inactive {
  color: var(--color-label);
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
}

.letters-without {
  flex: none;
  margin: 0;
  margin-inline-start: auto;
  color: var(--color-label);
  font-size: 0.8125rem;
}

/* One letter: its mark and its count on one line, then the table, the headings in small capitals; the rows are ruled, the word bold, the summary cut on its line with an ellipsis. */

.index-letter {
  margin-block-end: var(--space-4);
  overflow-x: auto;
}

.index-letter-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-1);
}

.index-letter-mark {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.index-letter-count {
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 400;
}

.index-table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.index-table th,
.index-table td {
  padding: 0.8125rem 0.875rem 0.8125rem 0;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: baseline;
}

.index-table thead th {
  padding-block: 0.5625rem;
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.index-table tbody tr:last-child > * {
  border-block-end: 0;
}

.index-table .index-word {
  inline-size: 15rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.index-word a {
  color: var(--color-ink);
  text-decoration: none;
}

.index-word a:hover {
  text-decoration: underline;
}

.index-table .index-type {
  inline-size: 6.5rem;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.index-table td.index-summary {
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.84375rem;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-table .index-pages {
  inline-size: 3.875rem;
  padding-inline-end: 0;
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: end;
}

/* A word without a definition: read in the secondary colour and dotted, the way its page titles it; its mark dashed, hollow. */

.index-entry-noteless .index-word a {
  color: var(--color-muted);
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.index-no-definition {
  border-block-end: 1px dashed var(--color-label);
}

.index-note {
  margin: 0;
  padding: 0.875rem 0 1.125rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* To do */

.todo-section ul {
  padding: 0;
  list-style: none;
}

.todo-files {
  margin-inline-start: var(--space-1);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.todo-unit {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* The words after the first hundred and the suspected noise: disclosures, no script. */

.todo-fold > summary {
  cursor: pointer;
  color: var(--color-ink);
  font-weight: 500;
}

.todo-fold > summary > h2 {
  display: inline;
  font-size: inherit;
}

.todo-noise .todo-word {
  color: var(--color-ink);
}

.todo-reason {
  display: block;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.todo-contribute {
  margin-block-start: var(--space-2);
}

/* Document: download links, the viewer opened on demand, the rail of positions, the extracted text */

.document {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.document-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.document-open {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.75);
  background: var(--color-surface);
  color: var(--color-ink);
}

.document-viewer {
  margin-block: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: auto;
}

.viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.viewer-toolbar button {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.75);
  background: var(--color-bg);
  color: var(--color-ink);
}

.viewer-counter,
.viewer-status {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.viewer-page {
  display: block;
  max-inline-size: 100%;
  margin: var(--space-2) auto;
  background: white;
}

.document-rail ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.document-rail a {
  display: block;
  min-inline-size: 8rem;
  max-inline-size: 12rem;
  min-block-size: 2.5rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.75);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.document-rail a.current {
  border-color: var(--color-ink);
}

.document-position {
  display: block;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.document-caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-text details {
  margin-block: var(--space-1);
}

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

/* A document folded under the note that leads its page: its line reads "Also available: deck.pptx · Presentation · 24 pages", the block opening on demand. */

.document-fold {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.document-fold > summary {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.document-fold > .document {
  margin-block-start: 0;
  padding-block-start: var(--space-2);
  border-block-start: 0;
}

/* Home: the question, the field with its live results in the flow, the shortcuts; then the spaces and the recent changes in two columns. */

.home {
  max-inline-size: 65rem;
  padding-block-start: var(--space-5);
}

.home h1 {
  margin-block: 0 var(--space-2);
  font-size: 2.375rem;
  letter-spacing: -0.024em;
}

.home-explanation {
  max-inline-size: 41rem;
  margin-block-end: var(--space-4);
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* The field of the home page: drawn large across the column, ruled in the ink, its live results joined under it. */

.home-ask concordance-island[data-island="search"] {
  position: static;
  max-inline-size: none;
}

.home-search {
  margin: 0;
}

.home-search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 3.5rem;
  padding-inline: var(--space-3);
  border: 1.5px solid var(--color-ink);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  color: var(--color-ink);
}

.home-search-field input {
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 1.125rem;
}

.home-search-field input::placeholder {
  color: var(--color-label);
  opacity: 1;
}

.search-count {
  flex: none;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.home-search:has(+ .home-suggestions:not([hidden])) .home-search-field {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.home-suggestions {
  position: static;
  min-inline-size: 0;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--color-ink);
  border-block-start: 0;
  border-radius: 0 0 calc(var(--radius) * 1.25) calc(var(--radius) * 1.25);
  box-shadow: none;
}

/* The rows of the live results, under the field of the header and the field of the home page alike: the title, the detail line cut to the row, the space at the end; the first row on the soft colour. */

.suggestions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.suggestion > a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 2.75rem;
  padding: 0.75rem 1.125rem;
  border-block-end: 1px solid var(--color-border);
  color: var(--color-ink);
  text-decoration: none;
}

.suggestion:first-child > a {
  background: var(--color-soft);
}

.suggestion > a:hover,
.suggestion > a:focus-visible {
  background: var(--color-soft);
}

.suggestion-title {
  flex: none;
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.3;
}

.suggestion-qualifier {
  color: var(--color-label);
  font-weight: 400;
}

.suggestion-detail {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-space {
  flex: none;
  margin-inline-start: auto;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.suggestion-keyword .suggestion-title {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.suggestions-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0.625rem 1.125rem;
  background: var(--color-soft);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.suggestions-help kbd {
  padding: 0.25em 0.4em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 500;
}

.suggestions-all {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  margin-inline-start: auto;
}

/* The panel of the header keeps its width and its shadow; its rows read the same. */

.search-suggestions {
  padding: 0;
}

.suggestion:last-child > a {
  border-block-end: none;
}

/* The most cited pages as chips, led by a word. */

.home-most-cited {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-3) var(--space-5);
}

.home-most-cited-lead {
  color: var(--color-label);
  font-size: 0.8125rem;
}

.home-shortcuts {
  display: contents;
}

.home-shortcuts li {
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

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

/* The spaces on the left, the recent changes on the right, from 48 rem. */

.home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 43.75rem) {
  .home-columns {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

.home-spaces h2,
.home-recent h2 {
  margin-block: 0 var(--space-2);
  font-size: 1.0625rem;
}

.home-lead {
  margin-inline-start: var(--space-1);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 400;
}

.home-space-list,
.home-change-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  list-style: none;
  overflow: hidden;
}

.home-space + .home-space,
.home-change + .home-change {
  border-block-start: 1px solid var(--color-border);
}

/* A row of a space: the badge, the name and the count; the row is a link to the page of the space. */

.home-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 3.75rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}

.home-space-row:hover .home-space-name {
  text-decoration: underline;
}

.home-space-row .space-initials {
  flex: none;
  inline-size: 2.125rem;
  block-size: 2.125rem;
}

.home-space-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.home-space-name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.home-space-meta,
.home-change-meta {
  color: var(--color-label);
  font-size: 0.8125rem;
}

.home-space.stale .home-space-meta {
  color: var(--color-muted);
}

.home-more-spaces {
  margin-block-start: var(--space-2);
}

.home-more-spaces > summary {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.home-more-spaces > .home-space-list {
  margin-block-start: var(--space-2);
}

.home-note {
  margin-block: var(--space-2) 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* A recent change: the title, then its space and its date. */

.home-change > a {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}

.home-change > a:hover .home-change-title {
  text-decoration: underline;
}

.home-change-title {
  font-size: 0.875rem;
  font-weight: 600;
}

/* The alert on a dormant space: a card in the ink, never in the accent. */

.home-alert {
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
}

.home-alert h3 {
  margin-block: 0 var(--space-1);
  font-size: 0.875rem;
}

.home-alert p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Keyword page: the word nobody defined, its passages in the centre, what is known of it in the panel. */

/* The title of a word without a note is dotted, the way the word is drawn on the map and in the results. */

.keyword-title {
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* The "no definition" mark: a dashed chip, hollow, so that it does not read as a type. */

.badge-noteless {
  border: 1px dashed var(--color-label);
  background: var(--color-surface);
}

/* The notice stands where the note would: a rule on its side in the accent, the position of the current thing, and a text of its own. */

.keyword-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-start-end-radius: var(--radius-large);
  border-end-end-radius: var(--radius-large);
  background: var(--color-surface);
}

.keyword-notice p {
  margin: 0;
}

.keyword-notice-lead {
  font-weight: 600;
}

.keyword-notice-detail {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.keyword-notice .create-note {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-block-size: 2.5rem;
  margin-block-start: var(--space-1);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.keyword-notice a.create-note:hover {
  text-decoration: underline;
}

.keyword-body > h2 {
  margin-block: 0 var(--space-1);
  font-size: 1.1875rem;
}

.keyword-summary {
  margin: 0 0 var(--space-3);
  color: var(--color-label);
  font-size: 0.875rem;
}

/* One page: its head on the soft surface with the type chip, hollow on the surface, the title and the count in mono; then its passages, each one a row with where it stands, a timecode, a page or a line in the accent mono, and its text. */

.passage-group {
  margin-block-end: 0.6875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  overflow: hidden;
}

.passage-file {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0 0.9375rem;
  border-block-end: 1px solid var(--color-soft);
  background: var(--color-soft);
  font-size: 0.84375rem;
}

.passage-file .badge {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font-size: 0.8125rem;
  line-height: 1;
}

/* The head of a page keeps its 40 px: the title is the target, the row carries no padding of its own. */

.passage-title {
  flex: 1;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.passage-title:hover {
  text-decoration: underline;
}

.passage-count {
  flex: none;
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.passage-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.passage {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.9375rem;
  border-block-end: 1px solid var(--color-soft);
  font-size: 0.875rem;
  line-height: 1.7;
}

.passage-group > .passage-list > .passage:last-child {
  border-block-end: 0;
}

.passage-at {
  flex: none;
  min-inline-size: 3.75rem;
  padding-block-start: 0.1em;
  white-space: nowrap;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.passage-text {
  quotes: none;
}

/* The passages of a page beyond the two in view: a fold worded with their count, on the line of a passage, its rows following once open. */

.passage-more {
  border-block-start: 1px solid var(--color-soft);
}

.passage-more > summary {
  min-block-size: 2.5rem;
  padding: 0 0.9375rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.passage-more > .passage-list {
  border-block-start: 1px solid var(--color-soft);
}

.passage-more > .passage-list > .passage:last-child {
  border-block-end: 0;
}

/* The files beyond the six pages in view: a disclosure worded and drawn as the button that shows them, its line gone once opened. */

.passage-files-more > summary {
  justify-content: center;
  margin-block: var(--space-1) var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.passage-files-more > summary::before {
  content: none;
}

.passage-files-more[open] > summary {
  display: none;
}

/* The three blocks of the panel: what we know, maybe the same thing, the accompanying words. */

.keyword-facts .attributes dt {
  inline-size: 6.75rem;
}

.similar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.similar-lead {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding-block: var(--space-1);
  color: var(--color-ink);
  font-size: 0.8125rem;
  text-decoration: none;
}

.similar-lead:hover {
  text-decoration: underline;
}

.similar-label {
  flex: 1;
}

/* The other forms a note was met under, as a muted line under its title. */

.similar-aliases {
  display: block;
  color: var(--color-label);
  font-weight: 400;
}

.similar-count {
  color: var(--color-label);
  font-family: var(--font-mono);
}

/* The word filed among the notes of its space, in the column and in the drawer alike, carries its passage count at the end of its line, as a folder does. */

.space-page > span > .count {
  margin-inline-start: auto;
}

/* Phone and tablet: the same page at three widths. The base layer is the phone's: the bar reduced to the drawer button, the name and the search button, the panel as folded blocks under the text; the tablet and the desktop add their columns. */

/* The drawer button: the summary of the drawer, a 48 px bordered square drawn as ☰, as ✕ in the ink once open; its name is written for assistive technology. */

.site-menu {
  flex: none;
  justify-content: center;
  inline-size: 3rem;
  min-block-size: 3rem;
  margin-inline-start: calc(-1 * var(--space-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  list-style: none;
}

.site-menu::before {
  content: "☰" / "";
  color: var(--color-ink);
  font-size: 1.25rem;
}

.site-drawer[open] > .site-menu {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.site-drawer[open] > .site-menu::before {
  content: "✕" / "";
  color: var(--color-bg);
}

/* The name takes the room between the buttons, cut with an ellipsis where it does not fit. */

.site-title {
  flex: 1;
  min-inline-size: 0;
}

.site-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Closed, the drawer keeps the links and the mode switch; the bar shows the button, the name and the search button, a 40 px square drawing the magnifier alone, which unfolds the field under the bar. */

.site-nav > concordance-island[data-island="mode-switch"] {
  display: none;
}

.site-search-fold {
  position: relative;
  flex: none;
}

.site-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  list-style: none;
}

.site-search-button::before {
  content: none;
}

.site-search-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The drawer: the spaces with their initials and counts, the tree of the current space unfolded, the links, every entry a 48 px target. */

.drawer-spaces-title,
.drawer-space-list a,
.drawer .site-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 3rem;
  padding-inline: var(--space-2);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.drawer-spaces-title {
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.drawer-space-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-space-name {
  color: var(--color-ink);
  font-weight: 600;
}

.drawer-space-list .count {
  margin-inline-start: auto;
}

.drawer-space {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.drawer-space .space-tree {
  border: 0;
  background: transparent;
}

.drawer-space .space-head,
.drawer-space .space-folder-name,
.drawer-space .space-page > a,
.drawer-space .space-page > span {
  min-block-size: 3rem;
}

.drawer .site-links {
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

/* Open, the drawer takes the whole screen: the bar stays at the top with ✕ and the name, the search field comes first, then the spaces, the tree and the links, the mode switch at the foot. The drawer exists under the width where the bar has room for everything. */

@media (width < 68.75rem) {
  .site-header:has(.site-drawer[open]) {
    position: fixed;
    inset: 0;
    z-index: 3;
    overflow-y: auto;
  }

  body:has(.site-drawer[open]) {
    overflow: hidden;
  }

  /* The summary and the content of the open drawer lay out as two items of the bar: the button in the first row, the content after the search field. */
  .site-drawer[open],
  .site-drawer[open]::details-content {
    display: contents;
  }

  .drawer {
    flex-basis: 100%;
    order: 2;
    padding-block-end: var(--space-4);
  }

  .site-drawer[open] ~ .site-search-fold {
    display: block;
    flex-basis: 100%;
    order: 1;
    margin-inline-start: 0;
  }

  .site-drawer[open] ~ .site-search-fold > .site-search-button {
    display: none;
  }

  .site-drawer[open] ~ .site-search-fold::details-content {
    display: block;
    content-visibility: visible;
  }

  .site-drawer[open] ~ concordance-island[data-island="mode-switch"] {
    display: block;
    flex-basis: 100%;
    order: 3;
  }

  /* The search button unfolds the field under itself, at the end of the bar, while the drawer is closed. */
  .site-drawer:not([open]) ~ .site-search-fold[open] > concordance-island[data-island="search"] {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--space-1));
    z-index: 3;
    inline-size: min(22rem, calc(100vw - 2 * var(--space-4)));
    max-inline-size: none;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
  }
}

/* The page on the phone: the tree lives in the drawer, the breadcrumb keeps the last folder and the page, the line under the title reads the type and the short date, the blocks of the panel show their counts. */

.entity > .space {
  display: none;
}

.breadcrumbs-list > li:not(:nth-last-child(-n + 2)) {
  display: none;
}

.breadcrumbs-list > li:nth-last-child(2)::before {
  content: none;
}

.entity-badge > .entity-space,
.entity-changed-long {
  display: none;
}

/* The related pages beyond the first three: a disclosure of their own behind their count, unfolded where the panel has its full column. */

.related-others > summary {
  display: flex;
  min-block-size: 2.5rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  list-style: none;
}

/* Phone: the folded sections in the order of importance, the table of contents first, their headings in the sentence case of the text; the related pages as their titles, counts and excerpts alone; the neighbourhood line reads as the others, its short label and the number of pages the map draws; the legend of the marks left out of the foot. */

@media (width < 43.75rem) {
  .entity-side {
    display: flex;
    flex-direction: column;
  }

  .entity-toc {
    order: -1;
  }

  .panel-fold > summary h2 {
    color: var(--color-ink);
    letter-spacing: 0;
    text-transform: none;
  }

  .mentions-controls,
  .related-type,
  .related-note {
    display: none;
  }

  .neighbourhood-fold > summary {
    font-weight: 600;
  }

  .neighbourhood-fold:not([open]) > summary > .neighbourhood-icon,
  .neighbourhood-fold:not([open]) > summary > .neighbourhood-lead,
  .neighbourhood-fold:not([open]) > summary > .neighbourhood-count {
    display: none;
  }

  .neighbourhood-fold:not([open]) > summary > .neighbourhood-head {
    display: inline;
    flex: 1;
  }

  .neighbourhood-fold:not([open]) > summary > .neighbourhood-number {
    order: 1;
  }

  .neighbourhood-fold[open] > summary > .neighbourhood-number {
    display: none;
  }

  .entity-footer > .legend {
    display: none;
  }
}

/* Tablet: the search button reads as a small field after the name, the mode switch joins the bar, the panel stands beside the text, condensed; the tree stays in the drawer. */

@media (min-width: 43.75rem) {
  .site-title {
    flex: none;
  }

  .site-search-fold {
    flex: 1;
    max-inline-size: 9.375rem;
    margin-inline-end: auto;
  }

  .site-search-button {
    inline-size: 100%;
    justify-content: flex-start;
    gap: var(--space-2);
    padding-inline: var(--space-2);
    border: 0;
    background: var(--color-soft);
    color: var(--color-label);
    font-size: 0.8125rem;
  }

  .site-search-label {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  .site-nav > concordance-island[data-island="mode-switch"] {
    display: block;
  }

  .breadcrumbs-list > li:not(:nth-last-child(-n + 2)) {
    display: block;
  }

  .breadcrumbs-list > li:nth-last-child(2)::before {
    content: "›" / "";
  }

  .entity-badge > .entity-space {
    display: inline;
  }

  .entity-changed-long {
    display: inline;
  }

  .entity-changed-short,
  .panel-count {
    display: none;
  }
}

@media (43.75rem <= width < 68.75rem) {
  /* The blocks of the panel are placed one under the other in a narrow right column, the table of contents left out, and the neighbourhood spans the foot of the page under the text and the blocks. */
  .entity {
    grid-template-columns: minmax(0, 1fr) 11.625rem;
    grid-template-areas: none;
  }

  .entity-side > .entity-toc {
    display: none;
  }

  .entity-main {
    grid-area: 1 / 1 / 7 / 2;
    border-inline-end: 1px solid var(--color-border);
  }

  .entity-side {
    display: contents;
  }

  .entity-side > .panel-block {
    grid-column: 2;
    background: var(--color-surface);
  }

  .entity-side > .neighbourhood-fold {
    grid-area: 7 / 1 / 8 / 3;
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .entity-side > .neighbourhood-fold > summary {
    padding-inline: var(--space-4);
  }

  .entity-side > .neighbourhood-fold .neighbourhood {
    padding-inline: var(--space-4);
  }

  /* Properties: the values alone, their terms kept for assistive technology, the note left out. */
  .entity-panel .panel-note {
    display: none;
  }

  .entity-panel .attributes dt {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Related pages: three titles, the others folded behind their count. */
  .mentions-controls,
  .related-type,
  .related-count,
  .related-excerpt,
  .related-note {
    display: none;
  }
}

/* Desktop: the bar has room for everything. The drawer button goes, its content stays in view in the bar: the link to the spaces and the two others; the search field is unfolded; the tree of the space returns to its column. */

@media (min-width: 68.75rem) {
  .site-menu {
    display: none;
  }

  .site-drawer {
    order: 1;
    margin-inline-start: auto;
  }

  .site-drawer::details-content {
    display: block;
    content-visibility: visible;
  }

  .drawer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .drawer-space-list,
  .drawer-space {
    display: none;
  }

  .drawer-spaces-title,
  .drawer .site-links a {
    min-block-size: 2.5rem;
    padding-inline: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

  .drawer-spaces-title:hover,
  .drawer .site-links a:hover {
    color: var(--color-ink);
    text-decoration: underline;
  }

  .drawer .site-links {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding-block-start: 0;
    border-block-start: 0;
  }

  .site-search-fold {
    flex: 1 1 16rem;
    max-inline-size: 26rem;
    margin-inline-end: 0;
  }

  .site-search-button {
    display: none;
  }

  .site-search-fold::details-content {
    display: block;
    content-visibility: visible;
  }

  .related-others::details-content {
    display: block;
    content-visibility: visible;
  }

  .related-others > summary {
    display: none;
  }

  .site-nav > concordance-island[data-island="mode-switch"] {
    order: 2;
  }

  .entity > .space {
    display: block;
  }
}

/* Neighbourhood map, unfolded. Closed, the line of the fold reads its lead and the count of pages; open, it reads a back control, the title of the map and the name of the page. Where the panel has a column, the open map replaces the blocks of the panel and never the text; without any script the disclosure simply unfolds under them. */

.neighbourhood-head,
.neighbourhood-page,
.neighbourhood-fold[open] > summary > .neighbourhood-lead,
.neighbourhood-fold[open] > summary > .neighbourhood-count {
  display: none;
}

.neighbourhood-fold[open] > summary > .neighbourhood-head {
  display: inline;
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.neighbourhood-fold[open] > summary > .neighbourhood-page {
  display: inline;
  flex: 0 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-label);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Open, the marker of the fold is the back control: a bordered square at the start of the line. */
.neighbourhood-fold[open] > summary::before {
  content: "◂" / "";
  order: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
}

/* The summary of the fold carries the title: the heading of the section stays for assistive technology only. */
.neighbourhood-fold .neighbourhood > h2 {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The controls: the distance the model records, the type filter at the end of the line. */
.neighbourhood-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-soft);
  font-size: 0.8125rem;
}

.neighbourhood-distance {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-label);
}

.neighbourhood-hop {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: 600;
}

.neighbourhood-types {
  margin-inline-start: auto;
}

.neighbourhood-type-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.neighbourhood-type {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding: 0 var(--space-2);
  border-block-end: 1px solid var(--color-soft);
}

.neighbourhood-type > label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  cursor: pointer;
}

.neighbourhood-type .count {
  margin-inline-start: auto;
}

/* An unticked type hides its nodes, their edges and their rows: the checkbox and the elements share the rank of the type, so that the filter needs no script; twelve ranks, as the map holds twelve nodes at most. */
.neighbourhood:has(.neighbourhood-type:nth-child(1) > input:not(:checked)) [data-type="1"],
.neighbourhood:has(.neighbourhood-type:nth-child(2) > input:not(:checked)) [data-type="2"],
.neighbourhood:has(.neighbourhood-type:nth-child(3) > input:not(:checked)) [data-type="3"],
.neighbourhood:has(.neighbourhood-type:nth-child(4) > input:not(:checked)) [data-type="4"],
.neighbourhood:has(.neighbourhood-type:nth-child(5) > input:not(:checked)) [data-type="5"],
.neighbourhood:has(.neighbourhood-type:nth-child(6) > input:not(:checked)) [data-type="6"],
.neighbourhood:has(.neighbourhood-type:nth-child(7) > input:not(:checked)) [data-type="7"],
.neighbourhood:has(.neighbourhood-type:nth-child(8) > input:not(:checked)) [data-type="8"],
.neighbourhood:has(.neighbourhood-type:nth-child(9) > input:not(:checked)) [data-type="9"],
.neighbourhood:has(.neighbourhood-type:nth-child(10) > input:not(:checked)) [data-type="10"],
.neighbourhood:has(.neighbourhood-type:nth-child(11) > input:not(:checked)) [data-type="11"],
.neighbourhood:has(.neighbourhood-type:nth-child(12) > input:not(:checked)) [data-type="12"] {
  display: none;
}

/* The framed map, no wider than the panel wherever the fold spans the page. */
.neighbourhood-map {
  max-inline-size: 28rem;
  margin: 0 0 var(--space-2);
}

/* The legend under the map: a plain rule for a page that has a note, a dashed one for a word without one. */
.neighbourhood-map figcaption {
  margin-block-start: var(--space-2);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.map-legend-entity::before,
.map-legend-keyword::before {
  content: "";
  display: inline-block;
  inline-size: 1rem;
  margin-inline-end: var(--space-1);
  vertical-align: middle;
  border-block-end: 1.6px solid var(--color-border);
}

.map-legend-keyword::before {
  border-block-end-style: dashed;
}

/* The textual equivalent: its head, then one row per neighbour, a mark, the title, the type and the count. */
.neighbourhood-list-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-block-end: var(--space-1);
  border-block-end: 1px solid var(--color-soft);
}

.neighbourhood-list-head > .section-label {
  flex: 1;
}

.neighbourhood-equivalent {
  color: var(--color-label);
  font-size: 0.8125rem;
}

.neighbour-list {
  margin: 0;
}

/* A row per neighbour, opening on the accent mark: one step from the current position, the type saying what the node is. */
.neighbour {
  flex-wrap: nowrap;
  min-block-size: 2.5rem;
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--color-soft);
}

.neighbour::before {
  content: "●" / "";
  flex: none;
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.neighbour > a {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neighbour > a:hover {
  text-decoration: underline;
}

/* The type as plain text, then the relation, both in the label tone: the lightest that stays readable at the smallest size of the theme. */
.neighbour > .neighbour-type,
.neighbour > .relation {
  flex: none;
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 400;
}

.neighbour > .weight {
  flex: none;
  min-inline-size: 1.5em;
  margin-inline-start: 0;
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-align: end;
}

.neighbourhood-note {
  margin: var(--space-3) 0 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* Where the panel has a column, the open map takes it: the blocks of the panel go until the fold closes, and the column widens to hold the map, the text keeping its column. */
@media (min-width: 68.75rem) {
  .entity-side:has(> .neighbourhood-fold[open]) > .panel-block {
    display: none;
  }

  .entity:has(> .entity-side > .neighbourhood-fold[open]) {
    grid-template-columns: minmax(0, 1fr) 26.875rem;
  }

  .entity-with-space:has(> .entity-side > .neighbourhood-fold[open]) {
    grid-template-columns: 16rem minmax(0, 1fr) 26.875rem;
  }
}

/* Search results: the facets in a full-height column on the left, the first row expanded and the others condensed as cards, the words without a note dotted. The heading of the page is kept for assistive technology alone: the query in the field names the page. */

/* The island of the results page is the page itself: the measure the header gives the search island does not apply. */
main > concordance-island[data-island="search"] {
  max-inline-size: none;
}

/* The page spans the main landmark: the column of the facets stands against the left edge, under the bar. */
.search-results {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.facets {
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.facets-head {
  min-block-size: 3rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
}

.facet-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-3) var(--space-3);
}

.facet > summary {
  min-block-size: 2.5rem;
  list-style: none;
}

.facet > summary::before {
  order: 1;
  margin-inline-start: auto;
}

.facet h2 {
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.facet-values {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A value: its box, its label covering the row, its count in the monospace family; a selected value is filled and bold, never a colour alone. */
.facet-value {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.5rem;
}

.facet-value input {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  appearance: none;
  cursor: pointer;
}

.facet-value input[type="radio"] {
  border-radius: 50%;
}

.facet-value input:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.facet-value input[disabled] {
  cursor: default;
}

.facet-value label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.5rem;
  color: var(--color-muted);
  font-size: 0.84375rem;
  cursor: pointer;
}

.facet-value label .count {
  margin-inline-start: auto;
  padding: 0;
  background: transparent;
}

.facet-active label {
  color: var(--color-ink);
  font-weight: 600;
}

.facet-disabled label {
  color: var(--color-label);
  cursor: default;
}

/* The words without a note: a dashed box, like their rows. */
.facet-keyword input {
  border-style: dashed;
}

.facets-note {
  margin: auto 0 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* The facets take a 250 px column from 700 px, as tall as the page; under it they fold behind their heading above the results. */
@media (min-width: 43.75rem) {
  .results-layout {
    grid-template-columns: 15.625rem minmax(0, 1fr);
    min-block-size: calc(100vh - 3.5rem);
  }

  .facets {
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-border);
  }

  .facets-fold::details-content {
    display: block;
    content-visibility: visible;
  }

  /* The heading that folds the column is kept for assistive technology where the column stands open. */
  .facets-head {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .facets-head::before {
    content: none;
  }

  /* The column is as tall as the page, so that the note on the counters sits at its foot. */
  .facets-fold,
  .facets-fold::details-content {
    block-size: 100%;
  }

  .facet-groups {
    box-sizing: border-box;
    min-block-size: 100%;
    padding: 1.5rem 1.125rem;
  }
}

/* The results in their region, the active filters as chips then the summary on one line above them. */
.results-main {
  min-inline-size: 0;
  padding: 1.625rem 2rem;
}

.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 0.625rem;
  margin-block-end: var(--space-3);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.remove-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding-inline: 0.8125rem;
  border-radius: 1.25rem;
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.remove-filter:hover {
  text-decoration: underline;
}

.clear-filters a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  font-size: 0.8125rem;
}

.search-summary {
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.search-closest {
  color: var(--color-muted);
}

.results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A condensed row: the chip, the title and the count on one line, the summary cut to the next. */
.result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 1.0625rem 1.375rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
}

.result-head {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin: 0;
}

.result-title {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-title:hover {
  text-decoration: underline;
}

.result-cited {
  flex: none;
  margin-inline-start: auto;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.result-cited-count {
  font-family: var(--font-mono);
}

.snippet {
  margin: 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.90625rem;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The first row, expanded: the title larger, the whole summary, then the line of facts. */
.result-lead {
  gap: 0.5625rem;
  padding: 1.25rem 1.375rem;
}

.result-lead .result-head {
  flex-wrap: wrap;
}

.result-lead .result-title {
  overflow: visible;
  font-size: 1.1875rem;
  white-space: normal;
}

.result-lead .snippet {
  overflow: visible;
  color: var(--color-ink);
  font-size: 0.9375rem;
  text-overflow: clip;
  white-space: normal;
}

.result-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 0.875rem;
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.result-facts > span + span::before {
  content: "·" / "";
  margin-inline-end: 0.875rem;
}

.breadcrumb {
  display: block;
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* A word without a note: outlined in dashes, its chip too, its title dotted, like its square on the map; its notice on the same line as the title. */
.result-keyword {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  border-style: dashed;
}

.result-keyword .badge {
  border: 1px dashed var(--color-border);
  background: var(--color-bg);
}

.result-keyword .result-title {
  overflow: visible;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  white-space: normal;
}

.result-subtitle,
.result-detail {
  display: block;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* The button drawing the next rows in place, under the rows drawn so far. */
.results-more {
  inline-size: 100%;
  min-block-size: 2.5rem;
  margin-block-start: 0.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.results-note {
  margin: var(--space-3) 0 0;
  padding-block-start: 0.875rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* The button clearing a field, shown by the island while the field holds a query; in the header the shortcut hint yields to it. */
.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-inline-size: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.875rem;
  cursor: pointer;
}

.search-clear[hidden] {
  display: none;
}

.site-search-field:has(.search-clear:not([hidden])) .search-shortcut {
  display: none;
}

.site-search input::-webkit-search-cancel-button,
.home-search input::-webkit-search-cancel-button {
  appearance: none;
}

/* Tabs: a row of tabs ruled underneath, with what the page adds at its end, over panels shown one at a time. */

.tabs {
  margin-block-start: var(--space-3);
}

.tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.tabs-bar > concordance-island {
  flex: none;
  align-self: stretch;
}

.tabs-list {
  display: flex;
  flex-wrap: wrap;
  block-size: 100%;
}

.tab {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  margin-block-end: -1px;
  padding: 0 0.875rem;
  border-block-end: 2px solid transparent;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.tab:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* What follows the tabs sits at the end of the row. */
.tabs-bar > :not(concordance-island) {
  margin-inline-start: auto;
}

/* One panel in view at a time, without any script: the targeted one, the one holding the targeted anchor, else the first; the tab of the panel shown marked by a rule and the bold weight, never by the colour alone. A browser without `:has()` shows the panels one under the other. Once the island runs it hides the panels itself and marks the selected tab. */
@supports selector(:has(a)) {
  .tabs:not(.tabs-scripted) .tabs-panel {
    display: none;
  }

  .tabs:not(.tabs-scripted)
    .tabs-panels:not(:has(.tabs-panel:target, .tabs-panel :target))
    > .tabs-panel:first-child,
  .tabs:not(.tabs-scripted) .tabs-panel:target,
  .tabs:not(.tabs-scripted) .tabs-panel:has(:target) {
    display: block;
  }

  .tabs:not(.tabs-scripted):not(:has(.tabs-panel:target, .tabs-panel :target)) .tab:nth-child(1),
  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(1):target, .tabs-panel:nth-child(1) :target)
    .tab:nth-child(1),
  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(2):target, .tabs-panel:nth-child(2) :target)
    .tab:nth-child(2),
  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(3):target, .tabs-panel:nth-child(3) :target)
    .tab:nth-child(3),
  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(4):target, .tabs-panel:nth-child(4) :target)
    .tab:nth-child(4),
  .tabs-scripted .tab[aria-selected="true"] {
    border-block-end-color: var(--color-accent);
    color: var(--color-ink);
    font-weight: 600;
  }
}

.tabs-panel[hidden] {
  display: none;
}

.tabs-panel {
  padding-block-start: var(--space-3);
}

/* Meeting page: the representations behind the tabs of the theme, the transcript as timestamped lines, the decisions the meeting produced, the properties of the meeting. */

/* The tabs of the representations: the mention that the build grouped the files at the end of the row; the notes and the deck lose the rule the entity page puts over them. */
.meeting-grouped {
  padding-inline-start: var(--space-3);
  color: var(--color-label);
  font-size: 0.8125rem;
}

.meeting-representations .tabs-panel > .entity-body,
.meeting-representations .tabs-panel > .document {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

/* The transcript: one row per speaker turn, the timecode in the accent and underlined, the speaker in bold, then what was said. */
.transcript {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.75;
}

.cue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block: var(--space-1) var(--space-2);
}

.cue:target {
  background: var(--color-highlight);
}

.cue-time {
  flex: none;
  min-inline-size: 2.75rem;
  padding-block-start: 0.15em;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cue-text {
  min-inline-size: 0;
  margin: 0;
}

.cue-speaker {
  font-weight: 600;
}

.meeting-representations .tabs-panel > .document-files {
  margin-block: var(--space-3) 0;
  font-size: 0.875rem;
}

.meeting-pseudonyms {
  margin: var(--space-3) 0 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* The decisions the meeting produced: a card in the surface colour under the cue each came from, at the head of the transcript for the ones no cue names, after the tabs for a meeting without a transcript; the lead in words, the decisions as links. */
.meeting-decisions {
  margin-block-start: var(--space-3);
}

.meeting-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5625rem;
  inline-size: fit-content;
  margin: 0;
  padding: 0.625rem 0.8125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.cue > .meeting-decision {
  grid-column: 2;
  margin-block-start: 0.625rem;
}

.meeting-representations .tabs-panel > .meeting-decision {
  margin-block-end: var(--space-3);
}

.meeting-decision-link {
  color: var(--color-ink);
}

.meeting-properties time {
  font-weight: 500;
}

/* Spaces page: every space in one table, the most cited first; a row leads to the page of the space. */

.spaces {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
}

.spaces h1 {
  margin-block: 0 var(--space-2);
  font-size: 2rem;
  letter-spacing: -0.024em;
}

.spaces-lead {
  margin-block: 0 var(--space-4);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.spaces-table {
  inline-size: 100%;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  border-spacing: 0;
  background: var(--color-surface);
  overflow: hidden;
}

.spaces-table th,
.spaces-table td {
  padding: 0.9375rem var(--space-2);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: middle;
}

.spaces-table th:first-child,
.spaces-table td:first-child {
  padding-inline-start: var(--space-4);
}

.spaces-table th:last-child,
.spaces-table td:last-child {
  padding-inline-end: var(--space-4);
}

.spaces-table thead th {
  padding-block: 0.75rem;
  background: var(--color-soft);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.spaces-table tbody tr:last-child > * {
  border-block-end: 0;
}

/* The badge and the name: a link to the page of the space, the whole row reading as one entry. */

.spaces-name {
  inline-size: 16rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

tbody .spaces-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.spaces-name .space-initials {
  flex: none;
  inline-size: 2.875rem;
  block-size: 2.125rem;
}

.spaces-name a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  color: var(--color-ink);
  text-decoration: none;
}

.spaces-name a:hover {
  text-decoration: underline;
}

.spaces-content {
  max-inline-size: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spaces-table .spaces-count,
.spaces-table .spaces-date {
  color: var(--color-label);
  font-size: 0.8125rem;
  text-align: end;
  white-space: nowrap;
}

.spaces-table .spaces-count {
  inline-size: 5.5rem;
  font-family: var(--font-mono);
}

.spaces-table .spaces-date {
  inline-size: 7.5rem;
}

/* A dormant space: its date in the accent, the only place where a colour carries an alert, and worded in days. */

.spaces-row.stale .spaces-date {
  color: var(--color-accent);
}

.spaces-note {
  margin-block: var(--space-3) 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* Under 48 rem the table gives up its content column and its heading row: a row reads the badge and the name, then the count and the date on one line. */

@media (width < 43.75rem) {
  .spaces-table thead,
  .spaces-table .spaces-content {
    display: none;
  }

  .spaces-table,
  .spaces-table tbody {
    display: block;
  }

  .spaces-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }

  .spaces-table tr:last-child {
    border-block-end: 0;
  }

  .spaces-table tbody .spaces-name,
  .spaces-table td {
    display: flex;
    inline-size: auto;
    padding: 0;
    border-block-end: 0;
  }

  .spaces-table tbody .spaces-name {
    flex: 1 1 100%;
    min-block-size: 2.75rem;
  }

  .spaces-table .spaces-count {
    margin-inline-start: calc(2.875rem + var(--space-3));
  }
}

/* Space page: the breadcrumb from the spaces page, the badge and the title, then the categories on the left, the recent changes and the vocabulary on the right; no tree. */

.space-overview {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
}

.space-overview .breadcrumbs-list {
  margin-inline: 0;
}

/* Two steps only: the first one carries no separator, whatever the width restores on the entity page. */

.space-overview .breadcrumbs-list > li:first-child::before {
  content: none;
}

.space-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.space-header .space-initials {
  flex: none;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: calc(var(--radius) * 1.375);
  font-size: 1rem;
}

.space-heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.space-heading h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.024em;
}

.space-description {
  max-inline-size: 41rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.space-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.space-meta > * + *::before {
  content: "·" / "";
  margin-inline-end: var(--space-2);
}

.space-meta code {
  font-size: 0.8125rem;
}

.space-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 43.75rem) {
  .space-columns {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.space-browse h2,
.space-recent h2,
.space-words h2 {
  margin-block: 0 var(--space-2);
  font-size: 1.0625rem;
}

.space-lead {
  margin-inline-start: var(--space-1);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* A category: the folder, its sentence when something declares one, its count and the arrow to its list. */

.space-categories,
.space-changes {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  list-style: none;
  overflow: hidden;
}

.space-category + .space-category,
.space-change + .space-change {
  border-block-start: 1px solid var(--color-border);
}

.space-category > a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 3.5rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}

.space-category > a:hover .space-category-name {
  text-decoration: underline;
}

.space-category-name {
  flex: none;
  inline-size: 12.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.space-category-text {
  flex: 1;
  min-inline-size: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-category-count {
  flex: none;
  inline-size: 3.25rem;
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-align: end;
}

.space-category-arrow {
  flex: none;
  color: var(--color-label);
  font-size: 0.8125rem;
}

@media (width < 43.75rem) {
  .space-category-name {
    inline-size: auto;
  }

  .space-category-text {
    display: none;
  }
}

.space-note {
  margin-block: var(--space-2) 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.space-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A recent change: the title, then its category and its date. */

.space-change > a {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}

.space-change > a:hover .space-change-title {
  text-decoration: underline;
}

.space-change-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.space-change-meta {
  color: var(--color-label);
  font-size: 0.8125rem;
}

/* The vocabulary of the space: chips with their counts, dashed for a word without a note. */

.space-word-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.space-word-list .chip {
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
}

.chip-keyword {
  border-style: dashed;
  color: var(--color-muted);
}

.chip-count {
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
}

.space-footer {
  margin-block: auto 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Screen page: the tables and the images of the repository in the note of any entity page, the legend of the two marks at the foot of the article next to the path. */

/* A table of the note: a card whose header row reads in small capitals on the soft surface, the first column in the ink, the others in the secondary colour. */

.markdown table {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  font-size: 0.875rem;
  line-height: 1.5;
}

.markdown th {
  padding: 0.6875rem 0.9375rem;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-soft);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.markdown td {
  padding: 0.75rem 0.9375rem;
  border-block-end: 1px solid var(--color-soft);
  color: var(--color-muted);
}

.markdown td:first-child {
  color: var(--color-ink);
}

.markdown tbody tr:last-child td {
  border-block-end: 0;
}

.markdown thead th:first-child {
  border-start-start-radius: calc(var(--radius) * 1.25 - 1px);
}

.markdown thead th:last-child {
  border-start-end-radius: calc(var(--radius) * 1.25 - 1px);
}

.markdown tbody tr:last-child td:first-child {
  border-end-start-radius: calc(var(--radius) * 1.25 - 1px);
}

.markdown tbody tr:last-child td:last-child {
  border-end-end-radius: calc(var(--radius) * 1.25 - 1px);
}

/* An image of the repository, at its place in the flow of the text: the image in a dashed frame, its caption under it, then the note saying what it is and the path of the file in the monospace family. */

.figure {
  margin: 0 0 var(--space-4);
  overflow: hidden;
  border: 1px dashed var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
}

.figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.figure figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem;
  padding: var(--space-3);
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

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

.figure-path {
  font-size: 0.8125rem;
}

/* The foot of the article: the legend of the two marks, then the path of the file at the end of the line with its edit link. */

.entity-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.entity-footer .legend {
  margin: 0;
}

.legend + .entity-source {
  margin-inline-start: auto;
}

/* API page: the operations table matched to the contract, then the contract block; the panel cut to five keys. */

.api-operations {
  margin-block: var(--space-4);
}

.api-operations h2,
.contract h2 {
  margin-block: var(--space-4) var(--space-2);
}

.api-lead {
  margin: 0 0 var(--space-3);
  color: var(--color-label);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* One row per operation on the surface, ruled in the soft colour; the radius is on the table, so the borders stay on the cells. */

.api-table {
  inline-size: 100%;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  overflow: hidden;
}

.api-table td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-soft);
  vertical-align: middle;
}

.api-table tr:last-child > td {
  border-block-end: 0;
}

/* Three narrow cells around the title: the method as a chip in the monospace family, every method drawn in the same width, the path and the callers. */

.api-cell-method,
.api-cell-path,
.api-cell-callers {
  inline-size: 1%;
  white-space: nowrap;
}

.api-cell-path > code {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.api-method {
  display: inline-block;
  min-inline-size: 3.25rem;
  padding: 0.3125em 0.4375em;
  border-radius: calc(var(--radius) * 0.5);
  background: var(--color-soft);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

.api-method > abbr {
  text-decoration: none;
}

/* Without a method, a dashed hollow chip: the note declares none, the contract knows nothing. */

.api-method-none {
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-label);
}

.api-operation {
  font-weight: 600;
}

a.api-operation {
  color: var(--color-ink);
  text-decoration: none;
}

a.api-operation:hover {
  text-decoration: underline;
}

.api-cell-callers {
  color: var(--color-label);
  font-size: 0.8125rem;
  text-align: end;
}

/* A gap between the contract and the notes reads in italics on the soft surface, never by a colour alone. */

.api-gap > td {
  background: var(--color-soft);
  font-style: italic;
}

.api-gap .api-operation {
  font-weight: 500;
}

.api-gap-without-page .api-operation {
  color: var(--color-muted);
}

.api-gap-note {
  color: var(--color-muted);
}

/* The contract block of the API page: the meta line on the soft surface with the date at its end, the viewer open under it, the download link at the foot. */

.contract-card {
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  overflow: hidden;
}

.contract-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0.75rem;
  align-items: baseline;
  margin: 0;
  padding: 0.6875rem 0.9375rem;
  border-block-end: 1px solid var(--color-soft);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.contract-format {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-weight: 500;
}

.contract-file {
  color: var(--color-label);
  font-size: 0.8125rem;
}

.contract-imported {
  margin-inline-start: auto;
  color: var(--color-label);
}

/* The viewer takes the body of the card as soon as its script runs; until then, and without it, the link to the JSON view stands centred in the zone the board reserves. */

.contract-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  min-block-size: 8.5rem;
  padding: var(--space-3) 0.9375rem;
  justify-content: center;
  text-align: center;
}

.contract-body > concordance-island {
  inline-size: 100%;
}

.contract-body .contract-data {
  margin: 0;
}

.contract-body .contract-viewer {
  text-align: start;
}

.contract-body .contract-viewer > h3 {
  margin-block: var(--space-2);
  font-size: 0.875rem;
}

.contract-note {
  max-inline-size: 28rem;
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.contract-foot {
  margin: 0;
  padding: var(--space-2) 0.9375rem;
  border-block-start: 1px solid var(--color-soft);
  font-size: 0.8125rem;
}

/* Category list: the list of a folder at the top of a space. The tree of the space on the left, as on the entity page; the breadcrumb, the title and its lead, the two selectors on the same line, the table in a card, the counts and the note under it. Nothing under 13 px and no target under 40 px, where the reference frame goes lower. */

.category {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "space"
    "main";
}

.category > .space {
  display: none;
}

.category-main {
  display: grid;
  grid-area: main;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "crumbs"
    "header"
    "toolbar"
    "card"
    "foot"
    "pages";
  align-items: end;
  column-gap: var(--space-3);
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-3) var(--space-5);
}

/* The island stands between the header and the card without breaking the grid. */
.category-main > concordance-island {
  display: contents;
}

.category-main > .breadcrumbs {
  grid-area: crumbs;
  margin-block-end: var(--space-2);
}

.category-header {
  grid-area: header;
  margin-block-end: var(--space-3);
}

.category-header h1 {
  margin-block: 0 0.4375rem;
  font-size: 1.875rem;
  letter-spacing: -0.024em;
}

.category-lead {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* The selectors: two chips, each a disclosure reading what is selected, its choices in a menu under it. */

.category-toolbar {
  display: flex;
  flex: none;
  gap: var(--space-2);
  grid-area: toolbar;
  margin-block-end: var(--space-3);
}

.category-select {
  position: relative;
}

.category-select > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-block-size: 2.5rem;
  padding: 0 var(--space-2) 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* The mark of the selector stays a ▾ whether it is open or not: the base marker gives way to it. */
.category-select > summary::before {
  content: none;
}

.category-select-mark {
  color: var(--color-label);
}

.category-choices {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  z-index: 2;
  min-inline-size: 12rem;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  list-style: none;
}

.category-choices a,
.category-choices button,
.category-choices span {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: calc(var(--radius) * 0.75);
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.875rem;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.category-choices a:hover,
.category-choices button:hover {
  background: var(--color-soft);
  color: var(--color-ink);
}

/* The choice selected: bold and ticked, so that the mark does not rest on colour. */
.category-choices [aria-current],
.category-choices [aria-pressed="true"] {
  color: var(--color-ink);
  font-weight: 600;
  cursor: default;
}

.category-choices [aria-current]::after,
.category-choices [aria-pressed="true"]::after {
  content: "✓";
  margin-inline-start: auto;
}

/* The table in its card: uppercase labels on the soft surface, one row per page, its columns fixed; the links column is wider than the frame draws it so that its label fits at 13 px. */

.category-card {
  grid-area: card;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  overflow-x: auto;
}

.category-table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.category-table th,
.category-table td {
  padding: 0.875rem 0 0.875rem var(--space-3);
  border-block-end: 1px solid var(--color-border);
  vertical-align: baseline;
  text-align: start;
}

.category-table th:first-child,
.category-table td:first-child {
  padding-inline-start: 1.25rem;
}

.category-table th:last-child,
.category-table td:last-child {
  padding-inline-end: 1.25rem;
}

.category-table thead th {
  padding-block: 0.6875rem;
  background: var(--color-soft);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-table tbody tr:last-child th,
.category-table tbody tr:last-child td {
  border-block-end: 0;
}

.category-table .category-title {
  inline-size: 14.375rem;
}

.category-table .category-value {
  inline-size: 7.375rem;
}

.category-table .category-links {
  inline-size: 3.5rem;
  text-align: end;
}

.category-table tbody .category-title {
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.35;
}

.category-table tbody .category-title a {
  color: var(--color-ink);
  text-decoration: none;
}

.category-table tbody .category-title a:hover {
  text-decoration: underline;
}

.category-table tbody .category-value {
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.category-table tbody .category-value a {
  color: inherit;
  text-decoration: none;
}

.category-table tbody .category-value a:hover {
  text-decoration: underline;
}

.category-table tbody .category-summary {
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.84375rem;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-table tbody .category-links {
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Under the card: how many rows the page shows of the whole and the note on the links column, one paragraph; the page links after it. */

.category-foot {
  grid-area: foot;
  margin: 0;
  padding: 0.875rem 0 1.125rem;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.category-pages {
  grid-area: pages;
}

.category-pages ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-pages a,
.category-pages button,
.category-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}

.category-pages [aria-current="page"] {
  border-color: var(--color-ink);
  color: var(--color-ink);
  font-weight: 600;
  cursor: default;
}

.category-pages a:hover,
.category-pages button:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* The tablet: the selectors stand on the line of the lead, at its end. */

@media (min-width: 43.75rem) {
  .category-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "crumbs crumbs"
      "header toolbar"
      "card card"
      "foot foot"
      "pages pages";
  }
}

/* The desktop: the tree returns to its column and the list reads in a measured column beside it. */

@media (min-width: 68.75rem) {
  .category {
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-areas: "space main";
  }

  .category > .space {
    display: block;
  }

  .category-main {
    max-inline-size: 58.75rem;
    justify-self: center;
    padding: 1.875rem 2.25rem var(--space-5);
  }
}

/* Side panels folded behind a handle: a tab of paper slid behind the edge of the panel, of which only the outer half shows, without a label or a border on the panel side. Folded to 44 px, the tree keeps its initials badge and its name written vertically, the right panel the headings of its blocks; the room goes to the wide content of the text, tables, figures and code, the prose keeping its measure. Under the desktop width the layout already folds the panels, so the handle exists from 1100 px only. */

.panel-handle-track {
  display: none;
}

@media (min-width: 68.75rem) {
  /* The panels stay while the text scrolls: each sticks to the top of the viewport, no taller than it, and scrolls on its own when it holds more. Its scroll stops at its edge rather than moving the page. */
  .space,
  .entity-side {
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    min-block-size: 100dvh;
    max-block-size: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The track takes no room and lets the clicks through to the panel. */
  .panel-handle-track {
    display: block;
    block-size: 0;
    pointer-events: none;
  }

  /* 26 px wide and as tall as every target of the theme, clipped to the 13 px that show beyond the edge, the room around them kept for the focus ring. Fixed to the middle of the viewport at the edge of the column, out of the panel that would otherwise clip the half beyond its edge: the handle always stands at the same place. */
  .panel-handle {
    position: fixed;
    z-index: 1;
    inset-block-start: calc(50vh - 1.25rem);
    inset-inline-start: calc(var(--tree-column) - 0.8125rem);
    inset-inline-end: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.625rem;
    block-size: 2.5rem;
    padding: 0 0 0 0.8125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-soft);
    color: var(--color-label);
    font-size: 0.8125rem;
    line-height: 1;
    clip-path: inset(-0.375rem -0.375rem -0.375rem 0.8125rem);
    cursor: pointer;
    pointer-events: auto;
  }

  /* Served hidden until its script wires it: no dead control shows without JavaScript. */
  .panel-handle[hidden] {
    display: none;
  }

  .panel-handle:hover {
    color: var(--color-ink);
  }

  /* The glyph points the way the panel goes: towards it to fold, away from it to unfold. */
  .panel-handle::before {
    content: "‹" / "";
  }

  .panel-handle[aria-expanded="false"]::before,
  .panel-handle-folded::before {
    content: "›" / "";
  }

  /* On the right panel the tab shows beyond the start edge, its other half clipped, its glyph mirrored. */
  .entity-side > .panel-handle-track > .panel-handle {
    inset-inline-start: auto;
    inset-inline-end: calc(var(--panel-column) - 0.8125rem);
    padding: 0 0.8125rem 0 0;
    clip-path: inset(-0.375rem 0.8125rem -0.375rem -0.375rem);
  }

  .entity-side > .panel-handle-track > .panel-handle::before {
    content: "›" / "";
  }

  .entity-side > .panel-handle-track > .panel-handle[aria-expanded="false"]::before,
  .entity-side > .panel-handle-track > .panel-handle-folded::before {
    content: "‹" / "";
  }

  /* Read from right to left, the columns swap sides and so do the glyphs. */
  [dir="rtl"] .panel-handle::before,
  [dir="rtl"] .entity-side > .panel-handle-track > .panel-handle[aria-expanded="false"]::before,
  [dir="rtl"] .entity-side > .panel-handle-track > .panel-handle-folded::before {
    content: "›" / "";
  }

  [dir="rtl"] .panel-handle[aria-expanded="false"]::before,
  [dir="rtl"] .panel-handle-folded::before,
  [dir="rtl"] .entity-side > .panel-handle-track > .panel-handle::before {
    content: "‹" / "";
  }

  /* The columns follow two lengths the folded states shorten; the open map keeps widening the panel unless it is folded. */
  .entity {
    --tree-column: 16rem;
    --panel-column: 21.5rem;

    grid-template-columns: minmax(0, 1fr) var(--panel-column);
  }

  .entity-with-space {
    grid-template-columns: var(--tree-column) minmax(0, 1fr) var(--panel-column);
  }

  .entity:has(> .entity-side > .neighbourhood-fold[open]) {
    --panel-column: 26.875rem;

    grid-template-columns: minmax(0, 1fr) var(--panel-column);
  }

  .entity-with-space:has(> .entity-side > .neighbourhood-fold[open]) {
    grid-template-columns: var(--tree-column) minmax(0, 1fr) var(--panel-column);
  }

  .category {
    --tree-column: 16rem;

    grid-template-columns: var(--tree-column) minmax(0, 1fr);
  }

  :root[data-panels~="tree"] .entity,
  :root[data-panels~="tree"] .category,
  .entity-tree-folded {
    --tree-column: 2.75rem;
  }

  :root[data-panels~="panel"] .entity,
  :root[data-panels~="panel"] .entity:has(> .entity-side > .neighbourhood-fold[open]),
  .entity-panel-folded,
  .entity-panel-folded:has(> .entity-side > .neighbourhood-fold[open]) {
    --panel-column: 2.75rem;
  }

  /* The tree folded: the badge, then the name of the space written upwards, its pages gone. */
  :root[data-panels~="tree"] .space > .space-head-link,
  :root[data-panels~="tree"] .space > .space-tree > .space-head,
  .entity-tree-folded > .space > .space-head-link,
  .entity-tree-folded > .space > .space-tree > .space-head {
    flex-direction: column;
    gap: 0.625rem;
    align-items: center;
    min-block-size: 0;
    padding: 0.8125rem 0;
    border-block-end: 0;
  }

  :root[data-panels~="tree"] .space .space-name,
  .entity-tree-folded > .space .space-name {
    color: var(--color-label);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  :root[data-panels~="tree"] .space > .space-tree > .space-nodes,
  .entity-tree-folded > .space > .space-tree > .space-nodes {
    display: none;
  }

  /* The right panel folded: the heading of every block written upwards with its count, the blocks themselves and the line of the map gone; the summaries hidden with their headings left in view, so that nothing folded takes the focus. */
  :root[data-panels~="panel"] .entity-side > .panel-block,
  .entity-panel-folded > .entity-side > .panel-block {
    padding: 0;
    border-block-end: 0;
  }

  :root[data-panels~="panel"] .entity-side .panel-fold > summary,
  .entity-panel-folded > .entity-side .panel-fold > summary {
    display: flex;
    justify-content: center;
    min-block-size: 0;
    padding: 0.8125rem 0 0;
    visibility: hidden;
  }

  :root[data-panels~="panel"] .entity-side .panel-fold > summary h2,
  .entity-panel-folded > .entity-side .panel-fold > summary h2 {
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    visibility: visible;
  }

  :root[data-panels~="panel"] .entity-side .panel-fold > summary .panel-count,
  .entity-panel-folded > .entity-side .panel-fold > summary .panel-count {
    display: inline-block;
  }

  :root[data-panels~="panel"] .entity-side .panel-fold::details-content,
  .entity-panel-folded > .entity-side .panel-fold::details-content {
    display: none;
  }

  :root[data-panels~="panel"] .entity-side > .neighbourhood-fold,
  .entity-panel-folded > .entity-side > .neighbourhood-fold {
    display: none;
  }

  /* The room a folded panel gives goes to the wide content: tables, figures, code and documents take the column, up to 1200 px; the prose keeps its measure. */
  :root[data-panels~="tree"] .entity-with-space > .entity-main > *,
  :root[data-panels~="panel"] .entity > .entity-main > *,
  .entity-tree-folded > .entity-main > *,
  .entity-panel-folded > .entity-main > * {
    max-inline-size: 75rem;
  }

  :root[data-panels~="tree"]
    .entity-with-space
    > .entity-main
    .entity-body
    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6),
  :root[data-panels~="panel"]
    .entity
    > .entity-main
    .entity-body
    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6),
  .entity-tree-folded
    > .entity-main
    .entity-body
    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6),
  .entity-panel-folded
    > .entity-main
    .entity-body
    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
    max-inline-size: 50rem;
  }
}

/* Document page: the three views of an office document behind the tabs of the theme, the strip of pages beside the rendering of the current page and its notes, the files that make the document in the panel. */

.document-page .entity-main {
  padding: 1.625rem 2.125rem var(--space-5);
}

.document-page .entity-main > * {
  max-inline-size: none;
}

.document-line {
  padding-block-end: 0;
  border-block-end: 0;
}

/* The download of the original at the end of the tab bar, as a button. */

.document-views .document-download {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.document-views .document-download:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.document-views .tabs-panel {
  padding-block-start: 1.125rem;
}

/* The strip of pages beside the rendering: numbered thumbnails, the current one ruled in the accent; a row on a narrow page, a column from the tablet. */

.document-stage {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.document-page .document-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-2);
}

.document-page .document-rail ol {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.document-page .document-rail a {
  display: flex;
  flex: none;
  align-items: flex-end;
  inline-size: 7.375rem;
  min-inline-size: 0;
  max-inline-size: none;
  block-size: 4.125rem;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.75);
  background: var(--color-bg);
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.document-page .document-rail a.current {
  border: 2px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
}

@media (min-width: 43.75rem) {
  .document-stage {
    flex-direction: row;
  }

  .document-page .document-rail {
    inline-size: 7.375rem;
  }

  .document-page .document-rail ol {
    flex-direction: column;
    max-block-size: 40rem;
  }
}

/* The rendering of the current page: the toolbar of the viewer as a line, the page on its stage; without the viewer, the PDF as the browser shows it; then the two notes. */

.document-render {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

.document-render .document-viewer {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.document-render .viewer-toolbar {
  padding: 0 0 var(--space-2);
  border-block-end: 0;
}

.viewer-stage,
.document-embed {
  display: flex;
  justify-content: center;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
}

.document-embed {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 40rem;
}

.viewer-stage .viewer-page {
  margin: 0;
  border: 1px solid var(--color-border);
}

.document-render-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

/* The toolbar of the viewer as the board draws it: the counter, the zoom between its two signs, the find field after its glyph, all on one line. */

.viewer-toolbar {
  gap: 0.875rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.viewer-counter {
  font-family: var(--font-mono);
}

.viewer-separator {
  color: var(--color-border);
}

.viewer-toolbar .viewer-zoom-out,
.viewer-toolbar .viewer-zoom-in {
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
}

.viewer-toolbar button[disabled] {
  color: var(--color-label);
}

.viewer-find {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 2.5rem;
}

.viewer-find input {
  inline-size: 10rem;
  min-block-size: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
}

.viewer-find input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* Decision page: one chip reading the type and the status, the identifier and the day of the decision on the line under the title, the callout of the session after the text, the properties of the decision. */

/* The chip: the type, which keeps its link to the pages of the type, the separator and the status in lowercase, read in the words of the site. */

.decision-chip {
  font-size: 0.8125rem;
}

.decision-type {
  color: inherit;
  text-decoration: none;
}

.decision-type:hover {
  text-decoration: underline;
}

.decision-status {
  text-transform: lowercase;
}

.decision-id {
  font-size: 0.8125rem;
}

/* The callout of a session: the surface colour framed by a rule, the accent on its start side as the notice of a keyword page, its words saying what it points at; the link to the minutes reads as every link and leads to the cue that names the decision. */

.decision-session {
  margin-block: var(--space-4) 0;
  padding: 0.8125rem 1.0625rem;
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-start-end-radius: calc(var(--radius) * 1.25);
  border-end-end-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.90625rem;
  line-height: 1.7;
}

.decision-properties dd time {
  font-weight: 500;
}

/* The files the build grouped into a page, at the foot of the properties block of every template: the line counting them and naming the criterion, one row per file with its kind, then the link to contest the grouping. */

.grouped-files {
  margin-block: var(--space-2) var(--space-3);
}

.grouped-files-lead {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.grouped-files-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  list-style: none;
  overflow: hidden;
}

.grouped-files-list li {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-block-size: 2.5rem;
  padding: 0 0.6875rem;
  border-block-end: 1px solid var(--color-soft);
}

.grouped-files-list li:last-child {
  border-block-end: 0;
}

.grouped-file-name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grouped-file-format {
  flex: none;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.grouped-files-separate {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  font-size: 0.8125rem;
}

/* About page: the breadcrumb from the home page, the title and its sentence, the figures of the build, the sources with the version each was read at, what the site leaves out and how a page is corrected. */

.about {
  max-inline-size: 67.5rem;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
}

.about .breadcrumbs-list {
  margin-inline: 0;
}

/* Two steps only: the first one carries no separator, whatever the width restores on the entity page. */

.about .breadcrumbs-list > li:first-child::before {
  content: none;
}

.about h1 {
  margin-block: 0 0.625rem;
  font-size: 2rem;
  letter-spacing: -0.024em;
}

.about-lead {
  max-inline-size: 46.25rem;
  margin-block: 0 var(--space-4);
  color: var(--color-muted);
  font-size: 0.90625rem;
  line-height: 1.7;
}

/* The figures: one card in as many cells, a label over a number. */

.about-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-block: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--color-surface);
  overflow: hidden;
}

.about-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 1.25rem;
  border-inline-end: 1px solid var(--color-border);
}

.about-figure:last-child {
  border-inline-end: 0;
}

.about-figure dt {
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.about-figure dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

/* The sources: the heading with its sentence, then one table, the most cited first. */

.about-sources {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-sources h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.about-sources-lead {
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 400;
}

.about-table {
  inline-size: 100%;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.25);
  border-spacing: 0;
  background: var(--color-surface);
  overflow: hidden;
}

.about-table th,
.about-table td {
  padding: 0.875rem var(--space-2);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: middle;
}

.about-table th:first-child,
.about-table td:first-child {
  padding-inline-start: 1.25rem;
}

.about-table th:last-child,
.about-table td:last-child {
  padding-inline-end: 1.25rem;
}

.about-table thead th {
  padding-block: 0.6875rem;
  background: var(--color-soft);
  color: var(--color-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.about-table tbody tr:last-child > * {
  border-block-end: 0;
}

.about-table .about-repository {
  inline-size: 10.625rem;
  font-size: 0.84375rem;
  font-weight: 600;
}

.about-table .about-nature {
  inline-size: 8.25rem;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.about-table .about-version {
  inline-size: 6.5rem;
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.about-table .about-content {
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.about-table .about-date {
  inline-size: 8.125rem;
  color: var(--color-label);
  font-size: 0.8125rem;
  text-align: end;
  white-space: nowrap;
}

/* A dormant source: its date in the accent, the only place where a colour carries an alert, and worded in days. */

.about-row.stale .about-date {
  color: var(--color-accent);
}

.about-note {
  max-inline-size: 52.5rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* What the site leaves out and how a page is corrected, side by side over a rule. */

.about-closing {
  display: flex;
  flex-wrap: wrap;
  gap: 1.125rem;
  margin-block-start: 0.75rem;
  padding-block: var(--space-3) 1.25rem;
  border-block-start: 1px solid var(--color-border);
}

.about-closing p {
  flex: 1;
  min-inline-size: 18.75rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.about-closing b {
  color: var(--color-ink);
  font-weight: 600;
}

/* Under the tablet width the table gives up its nature and version columns; each row keeps the repository, what was kept and the date. */

@media (width < 43.75rem) {
  .about-table .about-nature,
  .about-table .about-version {
    display: none;
  }

  .about-table .about-repository,
  .about-table .about-date {
    inline-size: auto;
  }
}

/* Edge cases: what shows when something is missing. The page served for a missing address, the empty results, the document whose conversion failed, the notice on the age of the site: the cause named in plain words, what stays reachable said, two exits at least, the navigation kept. */

/* The two shapes of exit these states share: a filled button and a bordered one, 44 px high. */

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0 1.0625rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button-secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
}

.button-primary:hover,
.button-secondary:hover {
  text-decoration: underline;
}

summary.button-secondary::before {
  content: none;
}

/* The page served for a missing address: one measured column on the page background. */

.not-found {
  max-inline-size: 38.75rem;
  margin-inline: auto;
  padding: 1.875rem var(--space-4) 2.125rem;
}

.not-found > .section-label {
  margin: 0 0 0.75rem;
}

.not-found h1 {
  margin: 0 0 0.75rem;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.not-found-cause {
  margin: 0 0 1.25rem;
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.not-found-nearby {
  margin: 0 0 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  overflow: hidden;
}

.not-found-nearby > h2 {
  padding: 0.625rem 0.9375rem;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-soft);
}

.not-found-nearby ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.not-found-nearby li + li {
  border-block-start: 1px solid var(--color-border);
}

.not-found-nearby a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 2.75rem;
  padding: 0.75rem 0.9375rem;
  color: var(--color-ink);
  text-decoration: none;
}

.not-found-nearby a:hover .not-found-nearby-title {
  text-decoration: underline;
}

.not-found-nearby-title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.not-found-nearby-path {
  color: var(--color-label);
  font-size: 0.8125rem;
}

.not-found-exits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
}

/* The empty results: one card on the soft surface in the column of the results, the exits as rows on the surface; the column takes the whole width when the page has no facet to draw. */

.results-layout > .results-main:first-child {
  grid-column: 1 / -1;
}

.results-empty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-inline-size: 47.5rem;
  padding: var(--space-3);
  border-radius: var(--radius-large);
  background: var(--color-soft);
}

.results-empty p {
  margin: 0;
}

.results-empty-lead {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.results-empty-cause {
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1.7;
}

.results-exits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.results-exit {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.75rem;
  padding: 0.6875rem 0.8125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.results-exit:hover .results-exit-label {
  text-decoration: underline;
}

.results-exit-secondary {
  border-style: dashed;
}

.results-exit-label {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.results-exit-count {
  color: var(--color-label);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.results-empty .search-closest {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.results-empty-note {
  padding-block-start: 0.8125rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-label);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* The notice of a page whose datum is missing, ruled in the accent: under the title of an interface whose contract could not be read, in place of the rendering of a document whose conversion failed. */

.page-notice {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  max-inline-size: 47.5rem;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-start-end-radius: var(--radius-large);
  border-end-end-radius: var(--radius-large);
  background: var(--color-surface);
}

.page-notice p {
  margin: 0;
}

.page-notice-lead {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.page-notice-detail {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.page-notice-exits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
  margin-block-start: 0.125rem;
}

.page-notice-exits .button-primary,
.page-notice-exits .button-secondary {
  min-block-size: 2.5rem;
  padding: 0 0.9375rem;
  font-size: 0.8125rem;
}

.page-notice-why {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5625rem;
}

.page-notice-why > p {
  flex-basis: 100%;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.page-notice-why code {
  color: var(--color-label);
  font-size: 0.8125rem;
}

/* The notice under the title of an entity page keeps the measure of the text; the block of a document whose conversion failed stacks it over the extracted text. */

.entity-header + .page-notice {
  margin-block: 0 var(--space-4);
}

.document-failure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.document-extracted {
  max-inline-size: 47.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  overflow: hidden;
}

.document-extracted-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.9375rem;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-soft);
}

.document-extracted-note {
  margin-inline-start: auto;
  color: var(--color-label);
  font-size: 0.8125rem;
}

.document-extracted-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.document-extracted-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.9375rem;
}

.document-extracted-list li + li {
  border-block-start: 1px solid var(--color-border);
}

.document-extracted-list p {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1.7;
}

.document-extracted-position {
  flex: none;
  min-inline-size: 2.125rem;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* The state of every representation in the panel: the one that failed marked, its state written in the accent. */

.document-states {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  list-style: none;
  overflow: hidden;
}

.document-states li {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.6875rem 0.8125rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.document-states li + li {
  border-block-start: 1px solid var(--color-border);
}

.document-states code {
  flex: 1;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.document-state-failed {
  background: var(--color-soft);
}

.document-state-failed span {
  color: var(--color-accent);
  font-weight: 600;
}

/* The notice on the age of the site, between the bar and the page, in the measure of the pages. */

.age-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  max-inline-size: 69rem;
  margin: var(--space-3) var(--space-4) 0;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.age-notice-chip {
  flex: none;
  margin-block-start: 0.125rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-small);
  background: var(--color-soft);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.age-notice-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
}

.age-notice-text p {
  margin: 0;
}

.age-notice-lead {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.age-notice-detail {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.age-notice-close {
  flex: none;
  min-inline-size: 2.5rem;
  border: 0;
  background: none;
  color: var(--color-label);
  font-size: 0.875rem;
  cursor: pointer;
}

.age-notice-close:hover {
  color: var(--color-ink);
}

@media (min-width: 72rem) {
  .age-notice {
    margin-inline: auto;
  }
}

/* Component gallery: the index frames every state at the width of its board. */

.gallery-widths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.gallery-width {
  min-block-size: 2.5rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}

.gallery-width[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-soft);
  font-weight: 600;
}

.gallery-board {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.gallery-board-caption,
.gallery-caption {
  max-inline-size: var(--measure);
}

.gallery-board-caption {
  color: var(--color-muted);
}

.gallery-state {
  margin-block: var(--space-4);
}

.gallery-state > h3 {
  margin-block-end: var(--space-1);
}

.gallery-meta {
  margin-block: var(--space-1) var(--space-2);
  color: var(--color-label);
  font-size: 0.8125rem;
}

/* The frame keeps the width of its board and scrolls in its stage rather than widening the page. */

.gallery-stage {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.gallery-frame {
  display: block;
  max-inline-size: none;
  border: 0;
}

.gallery-slots ul,
.gallery-slot ul {
  padding-inline-start: var(--space-4);
}
}