: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 (blue for open bugs). 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);
}

/* The dash of Open bugs when the count did not change is blue (forsgren#152). */
.trend-flat-bugs {
  color: light-dark(#0b57d0, #8ab4f8);
}

/* The 0 of Open bugs is green, the green of .trend-down, whatever the arrow
   after it (forsgren#151). The number itself is the signal, so colour is not
   the only one. */
.bugs-zero {
  color: light-dark(#1b6e2f, #7fd98f);
}

/* The charts of the History page (forsgren#68) sit in the Trend cell and shrink
   with it, never past the cell, at their own proportions. They are drawn in
   currentcolor by the markup, so light and dark follow the text colour and no
   rule here sets a colour. */
td svg {
  display: block;
  width: 7.5rem;
  max-width: 100%;
  height: auto;
}

td svg polyline {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}