:root {
  color-scheme: light dark;
}

body {
  margin: 0 auto;
  max-width: 48rem;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/* The table of the four metrics (forsgren#38) scrolls inside its own box on
   a narrow screen, so the page itself never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
}

/* The example config of the no-projects page (forsgren#41) scrolls inside its
   own box on a narrow screen. */
pre {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  min-width: 44rem;
}

caption {
  text-align: start;
  font-weight: 600;
}

th,
td {
  padding: 0.5rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid currentcolor;
}

.label th {
  padding-inline-start: 1.5rem;
  font-weight: normal;
}

/* The dash is for the eye only: its alternative text is empty, so a screen
   reader reads the row's hidden project name and its label. */
.label th::before {
  content: "– " / "";
}

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