/* LISQM: List of Implementations of Sound Quality Metrics
   Layout: a green masthead and a tab bar over one wide container for desktop screens. Every
   page has a sidebar that lists the contents of its tab. Inside, the text is set like a blog: serif type, ruled
   tables, a comfortable measure for running text. Colour is for reading: links are clearly blue, and the states
   that matter (current edition, newly released and legacy projects, release state, validation, language) each have
   their own colour. No web fonts; JavaScript only for the search and for opening pages at their top. */

:root {
  --bg: #ffffff;
  --text: #1f2328;
  --muted: #5a636e;
  --faint: #8b949e;
  --timeline: #8b949e;     /* the life line of a metric on the home page */
  --rule: #d4dbe2;
  --rule-strong: #2b3137;
  --hairline: #edf0f3;
  --panel: #f3f6f9;
  --panel-line: #d9e1e9;

  --brand: #25c59b;          /* the green of the logo */
  --brand-ink: #06392b;      /* text on it */
  --brand-soft: #0b4d3a;
  --brand-deep: #0f7d60;     /* tab bar, and green text on light backgrounds */
  --brand-deep-ink: #ffffff;
  --tab-hover: #13906f;
  --brand-ring: rgba(255, 255, 255, .9);
  --green-text: #0f7d60;     /* green text on the page background */

  --link: #0b62d6;
  --link-hover: #0846a0;
  --link-line: #a9c8f2;

  --current: #1a7f37;      --current-bg: #e5f4e9;   --current-line: #a6d8b3;
  --ok: #1a7f37;           --ok-bg: #dcf3e2;
  --info: #0b62d6;         --info-bg: #e1eefd;
  --warn: #8a5a00;         --warn-bg: #fff1c2;
  --neutral: #57606a;      --neutral-bg: #edf0f3;
  --new: #c2410c;          --new-bg: #ffe8d6;

  --note-bg: #f1f6fd;      --note-line: #cddff5;
  --alert-bg: #fff3ea;     --alert-line: #f4c6a3;

  --lang-py: #2463ad;
  --lang-m: #bd5512;
  --lang-c: #6b46a6;
  --lang-rs: #94471c;
  --lang-jl: #8b3aa9;
  --lang-js: #866600;
  --lang-pd: #36606e;
  --lang-other: #57606a;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", "Palatino Linotype",
           Georgia, "Noto Serif", "DejaVu Serif", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
          sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --container: 96rem;
  --sidebar: 14rem;
  --measure: 46rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c;
    --text: #e3e7ec;
    --muted: #a2abb6;
    --faint: #7c8692;
    --timeline: #7c8692;
    --rule: #363d46;
    --rule-strong: #c9d0d8;
    --hairline: #252a31;
    --panel: #1b2027;
    --panel-line: #2e3640;
    --brand: #0f6e55;
    --brand-ink: #ffffff;
    --brand-soft: #c4efe0;
    --brand-deep: #0a5240;
    --brand-deep-ink: #ffffff;
    --tab-hover: #0d6650;
    --brand-ring: rgba(255, 255, 255, .25);
    --green-text: #5fd4ae;
    --link: #6cb0ff;
    --link-hover: #a9d1ff;
    --link-line: #2f5e94;
    --current: #7ee2a0;      --current-bg: #173322;   --current-line: #2d6a42;
    --ok: #7ee2a0;           --ok-bg: #173322;
    --info: #8cc2ff;         --info-bg: #182c45;
    --warn: #f2c35b;         --warn-bg: #3a2d0f;
    --neutral: #b1bac4;      --neutral-bg: #2a3038;
    --new: #ffa76b;          --new-bg: #44240f;
    --note-bg: #18222f;      --note-line: #2b4260;
    --alert-bg: #2e1d12;     --alert-line: #6b3f21;
    --lang-py: #85b6f2;
    --lang-m: #f2a46c;
    --lang-c: #c2a8f0;
    --lang-rs: #e0a67d;
    --lang-jl: #d6a0ea;
    --lang-js: #e4cc6a;
    --lang-pd: #95c3d1;
    --lang-other: #b1bac4;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #15181c;
  --text: #e3e7ec;
  --muted: #a2abb6;
  --faint: #7c8692;
  --timeline: #7c8692;
  --rule: #363d46;
  --rule-strong: #c9d0d8;
  --hairline: #252a31;
  --panel: #1b2027;
  --panel-line: #2e3640;
  --brand: #0f6e55;
  --brand-ink: #ffffff;
  --brand-soft: #c4efe0;
  --brand-deep: #0a5240;
  --brand-deep-ink: #ffffff;
  --tab-hover: #0d6650;
  --brand-ring: rgba(255, 255, 255, .25);
  --green-text: #5fd4ae;
  --link: #6cb0ff;
  --link-hover: #a9d1ff;
  --link-line: #2f5e94;
  --current: #7ee2a0;      --current-bg: #173322;   --current-line: #2d6a42;
  --ok: #7ee2a0;           --ok-bg: #173322;
  --info: #8cc2ff;         --info-bg: #182c45;
  --warn: #f2c35b;         --warn-bg: #3a2d0f;
  --neutral: #b1bac4;      --neutral-bg: #2a3038;
  --new: #ffa76b;          --new-bg: #44240f;
  --note-bg: #18222f;      --note-line: #2b4260;
  --alert-bg: #2e1d12;     --alert-line: #6b3f21;
  --lang-py: #85b6f2;
  --lang-m: #f2a46c;
  --lang-c: #c2a8f0;
  --lang-rs: #e0a67d;
  --lang-jl: #d6a0ea;
  --lang-js: #e4cc6a;
  --lang-pd: #95c3d1;
  --lang-other: #b1bac4;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */

html {
  font-size: 106.25%; /* 17px */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--bg);
  padding: .2rem .5rem;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- masthead and tabs */

.masthead {
  background: var(--brand);
  color: var(--brand-ink);
  font-family: var(--sans);
}

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  padding-block: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--brand-ink);
  text-decoration: none;
}

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

.brand-mark {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: .72rem;
  box-shadow: 0 0 0 2px var(--brand-ring);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.brand-tagline {
  font-size: .85rem;
  color: var(--brand-soft);
}

.masthead-meta {
  margin: 0;
  text-align: right;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--brand-soft);
}

.masthead-meta a {
  color: var(--brand-ink);
  text-decoration-color: currentColor;
}

.tabs {
  background: var(--brand-deep);
  font-family: var(--sans);
}

.tabs .container {
  display: flex;
  flex-wrap: wrap;
}

.tabs a {
  padding: .55rem 1.05rem .45rem;
  border-bottom: 3px solid transparent;
  color: var(--brand-deep-ink);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  opacity: .92;
}

.tabs a:hover {
  background: var(--tab-hover);
  opacity: 1;
}

.tabs a[aria-current="page"] {
  color: var(--brand-ink);
  background: var(--brand);
  border-bottom-color: var(--brand-ink);
  opacity: 1;
}

/* ---------------------------------------------------------------- search

   site-src/search.js. A field at the right end of the tab bar on wide screens, a Search button in the masthead that
   opens a dialog on narrow ones, and a filter above the tables of the Projects page. Without JavaScript none of
   them is shown (the "js" class is set by the script at the top of every page). */

.site-search,
.search-open,
.table-filter {
  display: none;
}

.js .site-search {
  display: block;
}

.js .table-filter {
  display: flex;
}

.tabs .container {
  position: relative;
}

.site-search {
  position: relative;
  flex: 1 1 12rem;
  max-width: 19rem;
  align-self: center;
  margin-left: auto;
  padding: .2rem 0;
}

.site-search input {
  box-sizing: border-box;
  width: 100%;
  padding: .32rem 1.9rem .32rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, .94);
  font: inherit;
  font-size: .88rem;
  color: #1f2328;
}

.site-search input::placeholder {
  color: #6e7781;
}

.site-search .search-icon {
  position: absolute;
  top: 50%;
  left: .55rem;
  z-index: 1;
  color: #5a636e;
  transform: translateY(-50%);
  pointer-events: none;
}

.site-search input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  background-color: #fff;
}

.site-search input::-webkit-search-cancel-button {
  display: none;
}

.site-search > kbd {
  position: absolute;
  top: 50%;
  right: .45rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.site-search input:focus + kbd {
  display: none;
}

.site-search .search-results {
  position: absolute;
  top: calc(100% + .1rem);
  right: 0;
  z-index: 30;
  width: min(34rem, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(15, 30, 40, .18);
}

/* Between tablets and wide screens the tabs leave no room for the field: it folds to a magnifier at the end of the
   tab bar, and opens over the tabs while it is in use. */
@media (min-width: 64.0625rem) and (max-width: 72rem) {
  .site-search {
    flex: none;
    width: 2.4rem;
  }

  .site-search input {
    padding-right: 0;
    border-color: rgba(255, 255, 255, .45);
    color: transparent;
    background-color: transparent;
    cursor: pointer;
  }

  .site-search input:hover {
    background-color: var(--tab-hover);
  }

  .site-search .search-icon {
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
  }

  .site-search:focus-within .search-icon {
    left: 1.15rem;
    color: #5a636e;
    transform: translateY(-50%);
  }

  .site-search input::placeholder,
  .site-search > kbd {
    visibility: hidden;
  }

  .site-search:focus-within {
    position: absolute;
    top: 0;
    right: 1.5rem;
    z-index: 2;
    width: 19rem;
    padding-left: .6rem;
    background: var(--brand-deep);
  }

  .site-search:focus-within input {
    padding-right: .6rem;
    border-color: transparent;
    color: #1f2328;
    background-color: #fff;
    cursor: text;
  }

  .site-search:focus-within input::placeholder {
    visibility: visible;
  }
}

/* The results, in the panel and in the dialog. */
.search-results {
  font-family: var(--sans);
  font-size: .92rem;
  text-align: left;
  color: var(--text);
  background: var(--bg);
}

.sr-group + .sr-group {
  border-top: 1px solid var(--hairline);
}

.sr-head {
  margin: 0;
  padding: .55rem .9rem .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-results a.sr-item {
  display: block;
  padding: .32rem .9rem .38rem;
  border-bottom: 0;
  border-left: 3px solid transparent;
  font-size: inherit;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  opacity: 1;
}

.search-results a.sr-item:hover,
.search-results a.sr-item.active {
  background: var(--current-bg);
  border-left-color: var(--brand-deep);
}

.sr-title {
  display: block;
  font-weight: 600;
  color: var(--link);
}

.sr-title code {
  font-size: .92em;
  color: var(--text);
}

.sr-sub {
  display: block;
  overflow: hidden;
  font-size: .8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.sr-item mark {
  padding: 0 .05em;
  background: #fff1a8;
  color: inherit;
}

.sr-item .mk {
  margin-left: .35em;
  font-size: .72em;
  font-weight: 700;
}

.sr-item .mk-legacy {
  color: var(--muted);
}

.sr-none {
  margin: 0;
  padding: .9rem;
  color: var(--muted);
}

.sr-foot {
  margin: 0;
  padding: .45rem .9rem;
  border-top: 1px solid var(--hairline);
  font-size: .72rem;
  color: var(--faint);
  background: var(--panel);
}

.site-search kbd,
.sr-foot kbd {
  display: inline-block;
  min-width: 1.2em;
  margin: 0 .12em;
  padding: 0 .3em;
  border: 1px solid var(--panel-line);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #fff;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}

.search-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The Search button of narrow screens, and its dialog. */
.search-open {
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem;
  border: 1px solid rgba(6, 57, 43, .35);
  border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-ink);
  cursor: pointer;
}

.search-open:hover {
  background: rgba(255, 255, 255, .75);
}

.search-dialog {
  box-sizing: border-box;
  width: min(44rem, calc(100vw - 2rem));
  max-height: 84vh;
  margin: 8vh auto auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: var(--bg);
  box-shadow: 0 24px 60px rgba(10, 25, 35, .35);
}

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

.search-dialog::backdrop {
  background: rgba(15, 30, 40, .45);
}

.dialog-field {
  display: flex;
  flex: none;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--muted);
}

.dialog-field input {
  flex: 1;
  min-width: 0;
  padding: .2rem 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 1.05rem;
  color: var(--text);
  background: transparent;
}

.dialog-field input::-webkit-search-cancel-button {
  display: none;
}

.dialog-close {
  flex: none;
  padding: .3rem .7rem;
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  background: var(--panel);
  font: inherit;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}

.search-dialog .search-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.dialog-hint {
  margin: 0;
  padding: .8rem .9rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--muted);
}

.search-results:not([hidden]) ~ .dialog-hint {
  display: none;
}

/* The filter of the Projects page. */
.table-filter {
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  margin: 1.2rem 0 .4rem;
  padding: .55rem .7rem;
  border: 1px solid var(--panel-line);
  font-family: var(--sans);
  font-size: .9rem;
  background: var(--panel);
}

.table-filter label {
  font-weight: 600;
}

.table-filter input {
  flex: 0 1 24rem;
  min-width: 0;
  padding: .35rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
}

.table-filter .count {
  color: var(--muted);
}

/* What the filter hides stays hidden, whatever the layout of the tables (on phones each row is a block). */
table.projects tr[hidden],
main [hidden]:is(h2, p, div, figure, section) {
  display: none !important;
}

/* ---------------------------------------------------------------- page grid and sidebar */

.page {
  padding-block: 1.6rem 3rem;
}

.page.with-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.page.with-sidebar.narrow-side {
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 1.8rem;
}

.page.with-sidebar main {
  grid-column: 2;
  grid-row: 1;
}

.page.with-sidebar .sidebar {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 1rem;
  /* The height includes the padding, so that the box ends 1rem above the bottom of the window; the extra space
     under the last link keeps it clear of that edge when a long list is scrolled to its end. */
  box-sizing: border-box;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-bottom: 2.4rem;
}

/* Links to a section land with a little space above the heading. */
[id] {
  scroll-margin-top: 1rem;
}

main {
  min-width: 0;
}

.sidebar {
  padding: .9rem .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.45;
}

.side-head {
  margin: 1rem 0 .35rem;
  color: var(--green-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.side-head:first-child {
  margin-top: 0;
}

.side-head a {
  color: inherit;
  text-decoration: none;
}

.side-head a:hover {
  text-decoration: underline;
}

.sidebar ul.side-sub {
  margin: 0 0 .2rem .9rem;
}

.side-family {
  margin: .6rem 0 .15rem;
  font-weight: 700;
}

.side-family a {
  color: var(--text);
  text-decoration: none;
}

.side-family a:hover {
  text-decoration: underline;
}

.side-family a[aria-current="page"] {
  color: var(--green-text);
}

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

.sidebar li + li {
  margin-top: 0;
}

.sidebar li a {
  display: block;
  padding: .14rem .5rem;
  border-left: 3px solid transparent;
  color: var(--link);
  text-decoration: none;
}

.sidebar li a:hover {
  text-decoration: underline;
}

.sidebar li a[aria-current="page"] {
  border-left-color: var(--green-text);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding-block: 1.2rem 1.8rem;
  background: var(--panel);
  border-top: 3px solid var(--brand);
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
}

.site-footer p {
  margin: .35rem 0;
}

.site-footer .credit {
  color: var(--text);
  font-weight: 700;
}

/* ---------------------------------------------------------------- text */

h1, h2, h3 {
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: 1.95rem;
  letter-spacing: -.01em;
  margin: .4rem 0 .4rem;
}

h2 {
  font-size: 1.38rem;
  margin: 2.4rem 0 .7rem;
}

h3 {
  font-size: 1.1rem;
  margin: 1.8rem 0 .5rem;
}

p, ul, ol {
  margin: 0 0 1rem;
}

/* One reading width for all running text, legends, bylines and notes included, so that they end at the same right
   edge; only tables, the timeline and the maps are wider. Text inside them follows their width. */
main :is(p, ul, ol, dl, blockquote),
main > .in-short,
main > .notice,
.message,
.legend {
  box-sizing: border-box;
  max-width: var(--measure);
}

main :is(td, th, table, figure, .map-wrap, .legend) :is(p, ul, ol, dl) {
  max-width: none;
}

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

li + li {
  margin-top: .25rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

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

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

strong {
  font-weight: 700;
}

.lead {
  font-size: 1.1rem;
}

.byline {
  color: var(--muted);
  font-style: italic;
  margin: 0 0 1.4rem;
}

.byline .tag,
.byline .lang {
  font-style: normal;
}

.crumbs {
  margin: 0;
  font-size: .9rem;
}

.crumbs .sep {
  color: var(--faint);
  margin: 0 .2rem;
}

.toc {
  margin: 1.4rem 0;
  padding: .55rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: .92rem;
}

h2 .count {
  color: var(--muted);
  font-size: .8em;
  font-weight: 400;
}

h2 .count::before { content: "("; }
h2 .count::after { content: ")"; }

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

.small {
  font-size: .88rem;
}

.old,
.old a {
  color: var(--faint);
}

ol.refs {
  color: var(--muted);
  font-size: .88rem;
  padding-left: 1.6rem;
}

ol.refs a {
  overflow-wrap: anywhere;
}

ul.caveats li::marker {
  color: var(--new);
}

/* How it was validated: one entry per implementation, or per group of rows with the same evidence and details. */
dl.validation {
  margin: .6rem 0 1.4rem;
}

dl.validation dt {
  margin-top: 1.1rem;
  font-weight: 600;
}

dl.validation dt + dt {
  margin-top: .1rem;
}

dl.validation dt .sep {
  color: var(--faint);
  font-weight: 400;
}

dl.validation dt .muted,
dl.validation dt .tag {
  font-weight: 400;
}

dl.validation dt .tag-new,
dl.validation dt .tag-dev,
dl.validation dt .tag-legacy {
  font-weight: 700;
}

dl.validation dd {
  margin: .3rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--hairline);
}

dl.validation dd p {
  margin: .2rem 0;
}

dl.validation .evidence {
  color: var(--muted);
}

dl.validation .evidence .tag {
  font-size: .8em;
}

dl.validation dd ul {
  margin: .25rem 0 0;
  padding-left: 1.1rem;
}

dl.validation dd li + li {
  margin-top: .25rem;
}

/* The entry a validation tag in a table links to. */
dl.validation dt:target {
  background: var(--warn-bg);
  box-shadow: 0 0 0 .2rem var(--warn-bg);
}

/* The row of the Standards page that a link opens at (from the Home timeline, a metric page or the map). */
table.grid tr:target,
table.grid tr:target td {
  background: var(--warn-bg);
}

/* Evidence tags can name long things ("compared with ArtemiS SUITE (HEAD acoustics)"), so they wrap. */
table.impls .tag,
dl.validation .evidence .tag {
  white-space: normal;
}

/* In the details, the projects a tag names link to their pages. */
.tag a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}

/* On a metric page the entries are named after projects: normal weight, so that the names shown in
   bold everywhere else still stand out. */
dl.validation.on-metric dt {
  font-weight: 400;
}

dl.validation .derived {
  color: var(--muted);
  font-size: .94em;
}

/* The list maintainer's own observation, set apart from what the project states. */
.maintainer-check {
  margin: .5rem 0;
  padding: .4rem .7rem;
  border-left: 3px solid var(--ok);
  background: var(--ok-bg);
}

dl.validation dd .maintainer-check {
  margin-top: .45rem;
}

/* The project map: a legend, the picture drawn by Graphviz (scrolls sideways when the screen is narrow), the kinds
   of line and the same relations in words. */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
  list-style: none;
  margin: .6rem 0 .8rem;
  padding: 0;
  font-size: .9rem;
  color: var(--muted);
}

.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.line-sample {
  flex: none;
}

.key-box {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  padding: 0 .35rem;
  border: 1.3px solid var(--lang-py);
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
}

.key-box.super {
  border: 2.4px solid var(--text);
  font-weight: 700;
}

.key-box.legacy {
  opacity: .62;
}

.key-box.code {
  border: 1px dashed #8b949e;
  background: #f3f4f6;
  font-style: italic;
  color: var(--muted);
}

.map-wrap {
  overflow-x: auto;
  margin: .4rem 0;
  padding: .4rem;
  border: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}

svg.map-graph {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

svg.map-graph a {
  text-decoration: none;
}

/* Only the background of a box: its border is drawn over the text and must stay unfilled. */
svg.map-graph g.node:hover path:not([fill="none"]),
svg.map-graph g.node:hover polygon:not([fill="none"]) {
  fill: #eef7f3;
}

svg.map-graph g.edge:hover path:not(.hit) {
  stroke-width: 3;
}

dl.map-kinds {
  max-width: var(--measure);
  margin: .4rem 0 1rem;
}

dl.map-kinds dt {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .55rem;
  font-weight: 600;
}

dl.map-kinds dd {
  margin: .1rem 0 0 3.3rem;
}

ul.map-words li {
  margin: .2rem 0;
}

/* Before you compare numbers. */
dl.conventions dt {
  margin-top: .8rem;
}

dl.conventions dd {
  margin: .2rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--hairline);
}

dl.conventions dd ul {
  margin: .2rem 0;
  padding-left: 1.1rem;
}

ul.updates {
  padding-left: 1.1rem;
}

ol.faq-toc {
  columns: 2;
  column-gap: 2.5rem;
  font-size: .94rem;
}

ol.faq-toc li {
  break-inside: avoid;
}

section.update + section.update {
  border-top: 1px solid var(--rule);
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------------- tags and languages */

.tag {
  display: inline-block;
  padding: 0 .38em;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: .06em;
  text-decoration: none;
}

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

.tag-ok      { color: var(--ok);      background: var(--ok-bg); }
.tag-info    { color: var(--info);    background: var(--info-bg); }
.tag-warn    { color: var(--warn);    background: var(--warn-bg); }
.tag-neutral { color: var(--neutral); background: var(--neutral-bg); }
.tag-new     { color: var(--new);     background: var(--new-bg); }
.tag-dev     { color: var(--info);    background: var(--info-bg); }
.tag-legacy  { color: var(--neutral); background: var(--neutral-bg); }
.tag-new, .tag-dev, .tag-legacy { text-transform: uppercase; letter-spacing: .05em; }

.lang {
  font-variant-caps: all-small-caps;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.lang-py    { color: var(--lang-py); }
.lang-m     { color: var(--lang-m); }
.lang-c     { color: var(--lang-c); }
.lang-rs    { color: var(--lang-rs); }
.lang-jl    { color: var(--lang-jl); }
.lang-js    { color: var(--lang-js); }
.lang-pd    { color: var(--lang-pd); }
.lang-r,
.lang-other { color: var(--lang-other); }

/* A language as its usual file extension in a small box in the language's colour: py, m, c++, rs … The box has a
   fixed width so that the names after it line up. */
.lb {
  display: inline-block;
  box-sizing: border-box;
  min-width: 2.45em;
  margin-right: .4em;
  padding: 0 .2em;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-family: var(--mono);
  font-size: .74em;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-indent: 0;
  vertical-align: .08em;
}

/* ---------------------------------------------------------------- tinted notes */

.in-short {
  margin: 1.4rem 0 1.6rem;
  padding: .9rem 1.1rem .4rem;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
}

.in-short > p:first-child strong {
  color: var(--info);
  font-variant-caps: all-small-caps;
  letter-spacing: .05em;
  font-size: 1.05em;
}

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

ul.by-lang li {
  margin: .2rem 0;
  padding-left: 6.2rem;
  text-indent: -6.2rem;
}

ul.by-lang .lang {
  display: inline-block;
  min-width: 6.2rem;
  text-indent: 0;
}

ul.by-lang .tag {
  text-indent: 0;
}

.caution {
  color: var(--new);
  font-weight: 700;
}

.older {
  color: var(--muted);
  font-size: .94em;
}

.notice {
  margin: 0 0 1.4rem;
  padding: .7rem 1rem;
  background: var(--alert-bg);
  border: 1px solid var(--alert-line);
}

.notice strong {
  color: var(--new);
}

.notice-info {
  background: var(--note-bg);
  border-color: var(--note-line);
}

.notice-info strong {
  color: var(--info);
}

.notice-legacy {
  background: var(--neutral-bg);
  border-color: var(--rule);
}

.notice-legacy strong {
  color: var(--neutral);
}

/* ---------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.6rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  border-top: 1.5px solid var(--rule-strong);
  border-bottom: 1.5px solid var(--rule-strong);
}

caption {
  caption-side: top;
  text-align: left;
  font-style: italic;
  color: var(--muted);
  padding-bottom: .4rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: .5rem .9rem .5rem 0;
}

th:last-child, td:last-child {
  padding-right: 0;
}

thead th {
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

tbody tr + tr td,
tbody tr + tr th {
  border-top: 1px solid var(--hairline);
}

table.coverage th:not(:first-child),
table.coverage td:not(:first-child) {
  width: 10%;
  text-align: center;
}

/* Coverage marks are drawn, so the full, half and empty circles and the dash have exactly the same size. */
.mark {
  display: inline-block;
  box-sizing: border-box;
  width: .8em;
  height: .8em;
  border: 2px solid currentColor;
  border-radius: 50%;
  vertical-align: -.06em;
}

.mark-current { color: var(--current); background: currentColor; }
.mark-new     { color: var(--new); background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.mark-partial { color: var(--muted); background: transparent; }

.mark-none {
  color: var(--faint);
  height: 2px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  vertical-align: .28em;
}

.mark-key .mark {
  margin-right: .2em;
}

table.editions td:first-child,
table.standards td:first-child,
table.projects td:nth-child(5),
table.projects .when {
  white-space: nowrap;
}

table.editions td:nth-child(2) { min-width: 11rem; }
table.projects { table-layout: fixed; min-width: 48rem; }
table.projects th { box-sizing: border-box; }
table.projects th:nth-child(1) { width: 16%; }
table.projects th:nth-child(2) { width: 8%; }
table.projects th:nth-child(3) { width: 14%; }
table.projects th:nth-child(4) { width: 13%; }
table.projects th:nth-child(5) { width: 11%; }
table.impls td:nth-child(1) { width: 14%; }
table.impls td:nth-child(2) { width: 19%; }
table.impls td:nth-child(3) { width: 19%; }
table.impls td:nth-child(4) { width: 12%; }
table.impls code { white-space: nowrap; }
table.defs td:first-child { width: 14rem; white-space: nowrap; }

table.facts {
  margin: 1.2rem 0 1.6rem;
  font-size: .92rem;
}

table.facts th {
  width: 11rem;
  padding-right: 1.2rem;
  color: var(--muted);
  font-weight: 400;
}

table.facts td {
  overflow-wrap: anywhere;
}

/* Shown on phones only (see the narrow-screen rules at the end). */
.phone-only {
  display: none;
}

/* ---------------------------------------------------------------- timeline (home page) */

.timeline-section h2 {
  margin-top: 2rem;
}

.legend {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.75;
}

.legend p {
  margin: 0;
}

.key {
  padding: 0 .35em;
}

.key-current {
  color: var(--current);
  font-weight: 700;
  background: var(--current-bg);
  outline: 1px solid var(--current-line);
}

.key-old {
  color: var(--faint);
}

.key-life {
  display: inline-block;
  width: 2.2em;
  height: 0;
  border-top: 2px solid var(--timeline);
  vertical-align: .3em;
}

.key-lang {
  margin-right: .9em;
  white-space: nowrap;
}

.key-lang .lb {
  margin-right: .25em;
}

.quiet-sample {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

/* The timeline is dense, so it is set in a sans-serif, which stays legible at small sizes. */
table.timeline {
  min-width: 60rem;
  table-layout: fixed;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.45;
}

table.timeline th,
table.timeline td {
  padding: .5rem .4rem .55rem;
}

table.timeline thead th {
  text-align: left;
}

table.timeline thead th.now {
  color: var(--link);
}

table.timeline tbody td + td,
table.timeline tbody th + td {
  border-left: 1px solid var(--hairline);
}

table.timeline .rowhead {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 9rem;
  padding-left: 0;
  background: var(--bg);
}

table.timeline tbody th.rowhead {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
}

table.timeline .unit {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 400;
}

table.timeline tr.family th {
  padding: .9rem 0 .3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--text);
}

table.timeline tbody:first-of-type tr.family th {
  border-top: 0;
}

table.timeline tr.family th span {
  position: sticky;
  left: 0;
}

table.timeline tr.family + tr > * {
  border-top: 0;
}

/* The line runs from a metric's first edition to the present, through the first line of each edition label. It is
   heavier and darker than the table rules, so that it reads as the time axis of each metric. */
table.timeline td.bin {
  position: relative;
}

table.timeline td.life::before {
  content: "";
  position: absolute;
  left: -1px;              /* over the column rule, so that the rules do not break the line */
  right: 0;
  top: calc(.5rem + .72em + .15rem - 1px);
  border-top: 2px solid var(--timeline);
}

table.timeline .edition {
  position: relative;
  padding: .15rem .25rem .25rem;
}

table.timeline .edition + .edition {
  margin-top: .45rem;
}

table.timeline .ed-label {
  background: var(--bg);
  padding-right: .3em;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

table.timeline .edition.ed-current {
  background: var(--current-bg);
  outline: 1px solid var(--current-line);
}

/* The label links to the Standards page, in the colour of its edition; underlined on hover only. */
table.timeline a.ed-label {
  color: inherit;
  text-decoration: none;
}

table.timeline a.ed-label:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}

table.timeline .ed-current .ed-label {
  background: var(--current-bg);
  color: var(--current);
}

table.timeline .ed-old .ed-label {
  color: var(--faint);
  font-weight: 400;
}

table.timeline .ed-dev .ed-label {
  font-style: italic;
}

/* One line per project. A long name wraps under itself, clear of the language square. */
table.timeline ul {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}

table.timeline li {
  display: flex;
  align-items: baseline;
  margin: 0;
}

table.timeline li + li {
  margin-top: .1rem;
}

table.timeline li .lb {
  flex: none;
}

table.timeline li .nm {
  min-width: 0;
}

table.timeline li a {
  text-decoration: none;
}

table.timeline li a:hover {
  text-decoration: underline;
}

table.timeline li.quiet a {
  color: var(--muted);
}

table.timeline li.quiet .lb {
  opacity: .6;
}

table.timeline li .tag {
  margin-left: .1em;
}

/* Light group markers in the dense timeline: a small word after the name, no box. */
table.timeline .mk,
.legend .mk {
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

table.timeline .mk {
  margin-left: .15em;
}

.mk-new { color: var(--new); }
.mk-dev { color: var(--info); }
.key-quiet { color: var(--muted); }

/* "+3 more" shows the rest of an edition's projects in place; once open, the toggle sits under them and reads
   "show fewer". */
table.timeline li.more {
  display: block;
  margin-top: .15rem;
}

table.timeline li.more summary {
  display: inline-block;
  color: var(--muted);
  font-size: .85em;
  cursor: pointer;
  list-style: none;
}

table.timeline li.more summary::-webkit-details-marker {
  display: none;
}

table.timeline li.more summary:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

table.timeline li.more summary:focus:not(:focus-visible) {
  outline: none;
}

table.timeline li.more .opened,
table.timeline li.more details[open] .closed {
  display: none;
}

table.timeline li.more details[open] .opened {
  display: inline;
}

table.timeline li.more details[open] {
  position: relative;
  padding-bottom: 1.3em;
}

table.timeline li.more details[open] > summary {
  position: absolute;
  left: 0;
  bottom: 0;
}

table.timeline li.more ul {
  margin-top: 0;
}

.others-note {
  margin-top: .4rem;
  color: var(--muted);
  font-size: .9rem;
}

.others-note strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- metrics and languages pages */

table.metrics td:nth-child(1) { width: 24%; }
table.metrics td:nth-child(2) { width: 17%; }
table.langs td:nth-child(1) { width: 17%; }
table.langs td:nth-child(2) { width: 50%; }

/* Project names in a running list: language code, name and markers stay together. */
.pn {
  display: inline-block;
  margin: 0 .7em .15em 0;
  white-space: nowrap;
}

.pn a {
  text-decoration: none;
}

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

.pn.quiet a {
  color: var(--muted);
}

.pn.quiet .lb {
  opacity: .6;
}

/* ---------------------------------------------------------------- message box (FAQ) */

.message {
  margin: 1.4rem 0 2.4rem;
  padding: 1.1rem 1.3rem 1.2rem;
  max-width: var(--measure);
  background: var(--note-bg);
  border: 1px solid var(--note-line);
}

.message h2 {
  margin-top: 0;
}

.message-form label {
  display: block;
  margin: .7rem 0 .25rem;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 700;
}

.message-form input,
.message-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .45rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
}

.message-form textarea {
  resize: vertical;
}

.message-form input:focus,
.message-form textarea:focus {
  outline: 2px solid var(--link);
  outline-offset: 0;
}

.message-form .form-row {
  margin: .8rem 0 0;
}

.message-form button {
  padding: .45rem 1rem;
  border: 0;
  border-radius: 3px;
  background: var(--brand-deep);
  color: var(--brand-deep-ink);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}

.message-form button:hover {
  background: var(--tab-hover);
}

/* ---------------------------------------------------------------- home page columns */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3rem;
}

.col-main,
.col-side {
  min-width: 0;
}

/* ---------------------------------------------------------------- smaller screens */

@media (max-width: 64rem) {
  /* One column: the content first, the sidebar after it. */
  .page.with-sidebar,
  .page.with-sidebar.narrow-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .page.with-sidebar main {
    grid-column: 1;
    grid-row: 1;
  }

  .page.with-sidebar .sidebar {
    grid-column: 1;
    grid-row: 2;
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: 1.1rem;
  }

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

  .masthead-meta {
    display: none;
  }

  /* The search moves from the tab bar to a button at the right of the masthead, which opens a dialog. */
  .js .site-search {
    display: none;
  }

  .js .masthead-row {
    flex-wrap: nowrap;
  }

  .js .brand {
    min-width: 0;
  }

  .js .brand-tagline {
    text-wrap: balance;
  }

  .js .search-open {
    display: inline-flex;
    flex: none;
  }
}

@media (max-width: 40rem) {
  html {
    font-size: 100%; /* 16px */
  }

  /* The Search button shows only its magnifier (its name is still read out), and the dialog fills the screen. */
  .search-open {
    padding: .6rem;
  }

  .js .masthead-row {
    column-gap: .8rem;
  }

  .search-open .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .search-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .container {
    padding-inline: 1rem;
  }

  .brand-tagline {
    font-size: .74rem;
    line-height: 1.3;
  }

  .brand-name {
    font-size: 1.3rem;
  }

  .brand-mark {
    width: 2.3rem;
    height: 2.3rem;
  }

  h1 {
    font-size: 1.6rem;
  }

  /* All nine tabs in two rows. */
  .tabs a {
    padding: .45rem .42rem .35rem;
    font-size: .8rem;
  }

  /* The timeline scrolls sideways; its metric column stays in view, and long names hyphenate instead of
     breaking at any letter. */
  table.timeline {
    min-width: 60rem;
  }

  table.timeline .rowhead {
    width: 8rem;
    box-shadow: 1px 0 0 var(--hairline);
  }

  table.timeline tbody th.rowhead {
    font-size: .86rem;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  table.timeline li {
    overflow-wrap: normal;
  }

  ol.faq-toc {
    columns: 1;
  }

  /* Facts of a project: each name above its value. */
  table.facts tr {
    display: block;
    padding: .4rem 0;
  }

  table.facts th,
  table.facts td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  table.facts th {
    font-size: .8rem;
  }

  table.facts tbody tr + tr {
    border-top: 1px solid var(--hairline);
  }

  /* Lists of projects, implementations, editions, metrics and documents: one block per row, each value under the
     name of its column, instead of narrow columns. */
  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards, table.defs) {
    min-width: 0;
    table-layout: auto;
  }

  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards, table.defs) thead {
    display: none;
  }

  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards, table.defs) :is(tr, td) {
    display: block;
    width: auto !important;
  }

  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards, table.defs) tr {
    padding: .6rem 0 .7rem;
  }

  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards, table.defs) td {
    padding: .1rem 0;
    border: 0 !important;
    white-space: normal;
  }

  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards, table.defs) tbody tr + tr {
    border-top: 1px solid var(--rule);
  }

  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards) td + td::before,
  :is(table.editions, table.standards) td:first-child::before {
    content: attr(data-label);
    display: block;
    margin-top: .3rem;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* An empty value is left out of a block. */
  :is(table.projects, table.impls, table.editions, table.metrics, table.langs, table.standards) td.empty {
    display: none;
  }

  /* Short values side by side. */
  :is(table.projects, table.impls, table.editions, table.standards) tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  :is(table.projects, table.impls, table.editions, table.standards) td {
    grid-column: 1 / -1;
  }

  /* Projects: language, licence, release and last commit; editions: date and edition; implementations: edition
     and validation; documents: date and status. */
  table.projects td:nth-child(n+2):nth-child(-n+5),
  table.editions td:nth-child(-n+2),
  table.impls td:nth-child(2),
  table.impls td:nth-child(4),
  table.standards td:nth-child(1),
  table.standards td:nth-child(3) {
    grid-column: auto;
  }

  table.impls td:nth-child(3),
  table.standards td:nth-child(2) {
    order: 1;
  }

  table.impls td:nth-child(5),
  table.standards td:nth-child(4) {
    order: 2;
  }

  /* The name that opens each block. */
  :is(table.projects, table.impls, table.metrics, table.langs) td:first-child {
    font-size: 1rem;
  }

  /* Coverage by language: the metric column stays in view. */
  table.coverage th:first-child,
  table.coverage td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
  }

  .phone-only {
    display: block;
  }

  .key-lang {
    white-space: normal;
  }

  h1 {
    overflow-wrap: anywhere;
  }
}

@media print {
  .tabs, .sidebar, .skip, .site-footer {
    display: none;
  }

  .page.with-sidebar {
    display: block;
  }

  body {
    background: #fff;
    color: #000;
  }
}