:root {
  color-scheme: light dark;
}

/* The scrollbar's space is always reserved (forsgren#153), so a page with a
   vertical scrollbar and one without are equally wide. */
html {
  scrollbar-gutter: stable;
}

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

/* The starter page (forsgren.be, forsgren#153, decision #160) is 150% of the
   48rem it had; the metrics pages keep the body's wider cap. */
body.starter {
  max-width: 72rem;
}

/* The starter page's text sits in a framed card (forsgren#153, decision #161):
   the text colour's thin line, as the tables use, so no new colour; the
   body's 1rem padding is the gutter outside it. */
body.starter main {
  padding: 2rem;
  border: 1px solid currentcolor;
  border-radius: 0.5rem;
}

/* 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;
  width: 100%;
  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;
}

/* Running text keeps a readable measure on a wide screen (forsgren#153,
   decision #160); tables and headings keep the page's full width. On
   forsgren.be the card inside 72rem is narrower, so this changes nothing. */
p,
li {
  max-width: 72rem;
}

/* A table with class no-wrap keeps every cell on one line (forsgren#153): a
   date and a count with its trend do not break. Only by class, so a table with
   long cells still wraps. */
.no-wrap th,
.no-wrap td {
  white-space: nowrap;
}

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