: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 five 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;
}

/* The one rule for the heading of every page (forsgren#135): the look the
   metrics table's caption had. */
h1 {
  font-weight: 600;
  font-size: 1.25rem;
}

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;
}

/* The one place styles.css sets colours besides color-scheme (forsgren#126,
   forsgren#114; Yves's ruling, a narrow exception for these semantic trend
   arrows only, not a general permission): red for a count that rose, green
   for one that fell, grey for one that did not change. Red and green say
   rising and falling, not worse and better. Each is light-dark(light, dark)
   and reads at 4.5:1 or more on the page background in its mode, which
   TestTrendColoursHaveAContrastOfAtLeast4Point5InLightAndDark measures. The
   arrow and the aria-label carry the meaning too, so colour is never the
   only signal. */
.trend-up {
  color: light-dark(#b3261e, #ff8a80);
}

.trend-down {
  color: light-dark(#1b6e2f, #7fd98f);
}

.trend-flat {
  color: light-dark(#595959, #b0b0b0);
}