/* Softer contrast for easier reading */
:root {
  --text-color: #222;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #e5e5e5;
  }
}

/* Table cell highlight colors */
.cell-success {
  background: rgba(34, 197, 94, 0.25);
}
.cell-fail {
  background: rgba(239, 68, 68, 0.25);
}
@media (prefers-color-scheme: dark) {
  .cell-success {
    background: rgba(34, 197, 94, 0.35);
  }
  .cell-fail {
    background: rgba(239, 68, 68, 0.35);
  }
}

/* Override monospace-web uppercase headings */
h1, h2, h3, h4, h5, h6 {
  text-transform: none;
}

/* Bigger main title */
h1 {
  font-size: 2.5rem;
  line-height: calc(3 * var(--line-height));
}

/* Bigger blog post titles */
h2 {
  font-size: 1.5rem;
  line-height: calc(2 * var(--line-height));
}

/* Space between blog posts on the homepage */
article {
  margin-bottom: calc(var(--line-height) * 3);
}

/* Range slider styling to match diagram line color */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--text-color);
  border-radius: 2px;
  opacity: 0.4;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-color);
  margin-top: -6px;
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--text-color);
  border-radius: 2px;
  border: none;
  opacity: 0.4;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--text-color);
}

/* GitHub-style anchor links on post headings (added by NixCI.Blog.Static.TH).
   The whole heading is wrapped in a link to its own id; it looks like plain
   heading text, and the '#' affordance is a ::before hung into the left gutter
   so revealing it does not shift the text. The '#' inherits the link colour,
   so it always matches the heading. Hidden on narrow screens, where there is
   no gutter to hang into (and hover is not a real affordance). */
.heading-anchor {
  color: inherit;
  text-decoration: none;
}
/* The "#" hangs in the left gutter: an inline-block (so it stays on the
   heading's baseline) two characters wide, pulled two characters left, so the
   gutter is a consistent width in the character grid for every heading level. */
.heading-anchor::before {
  content: "#";
  display: inline-block;
  width: 2ch;
  margin-left: -2ch;
  opacity: 0;
  font-weight: normal;
  transition: opacity 0.15s ease-in-out;
}
h2:hover > .heading-anchor::before,
h3:hover > .heading-anchor::before,
h4:hover > .heading-anchor::before,
h5:hover > .heading-anchor::before,
.heading-anchor:hover::before {
  opacity: 1;
}
@media (max-width: 768px) {
  .heading-anchor::before {
    display: none;
  }
}