runnerd-web 0.0.21

/* runnerd's dashboard. The type, colours and the budget-block motif come from the docs site (site/src/styles). */

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  /* The version is a digest of the font file (`assets::path`); a test fails until it matches a new file. */
  src: url('/assets/libre-franklin.woff2?v=fde39c4a41e6117b') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Profiles, in the order runnerd.toml lists them. The first two are the site's mint and pink. */
  --p0: #c3edce;
  --p1: #f8c7c9;
  --p2: #d6cdf6;
  --p3: #f1e3a0;
  --p4: #c2def3;
  --p5: #f6d3b3;
  --block-ink: #0a0a0a;

  --frame: #e9ece9;
  --bg: #f8f8f8;
  --surface: #ececec;
  --surface-2: #dedede;
  --line: #c9c9c9;
  --ink: #0a0a0a;
  --muted: #555555;
  --accent: #1f6b3a;
  --accent-ink: #ffffff;
  --memory: #1f6b3a;
  --cpu: #5b3fc4;
  --wait: #9a5b00;
  --wait-ink: #7a4800;
  --success-bg: #d3efdb;
  --success-ink: #134526;
  --failure-bg: #ffd9d4;
  --failure-ink: #8a1c12;
  --running-bg: #e3dcff;
  --running-ink: #3a2590;

  --gutter: clamp(1rem, 3vw, 2.5rem);
  --gap: 8px;
  --radius: 0;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --frame: #070908;
    --bg: #0d0f0e;
    --surface: #1a1d1b;
    --surface-2: #262a28;
    --line: #3a3f3c;
    --ink: #f2f3f2;
    --muted: #a9b0ac;
    --accent: #8fe0a6;
    --accent-ink: #0a0a0a;
    --memory: #8fe0a6;
    --cpu: #b7a6ff;
    --wait: #f1c46b;
    --wait-ink: #f1c46b;
    --success-bg: #163d25;
    --success-ink: #c3edce;
    --failure-bg: #4a1d1a;
    --failure-ink: #ffb8ae;
    --running-bg: #2c2550;
    --running-ink: #d9d0ff;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --frame: #070908;
  --bg: #0d0f0e;
  --surface: #1a1d1b;
  --surface-2: #262a28;
  --line: #3a3f3c;
  --ink: #f2f3f2;
  --muted: #a9b0ac;
  --accent: #8fe0a6;
  --accent-ink: #0a0a0a;
  --memory: #8fe0a6;
  --cpu: #b7a6ff;
  --wait: #f1c46b;
  --wait-ink: #f1c46b;
  --success-bg: #163d25;
  --success-ink: #c3edce;
  --failure-bg: #4a1d1a;
  --failure-ink: #ffb8ae;
  --running-bg: #2c2550;
  --running-ink: #d9d0ff;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* The top bar below the sidebar's width sticks over the page: a link to a place in it lands under the bar. */
  scroll-padding-top: calc(3.5rem + env(safe-area-inset-top, 0));
  background: var(--frame);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.45;
  /* For the fallback fonts: Libre Franklin has no tabular figures, so a figure that ticks gets a box wider than its
     text instead (`.elapsed`, `.reading`, `.figure.ongoing`), and its digits' widths move nothing else. */
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}

main {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem max(var(--gutter), env(safe-area-inset-right, 0)) calc(6rem + env(safe-area-inset-bottom, 0))
    max(var(--gutter), env(safe-area-inset-left, 0));
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(2rem, 4vw, 3rem);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h2 {
  font-size: 1.375rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

code,
pre,
.log-lines {
  font-family: var(--mono);
}

code {
  font-size: 0.9em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.muted {
  color: var(--muted);
}

::selection {
  background: var(--p0);
  color: var(--block-ink);
}

html {
  scrollbar-color: var(--line) transparent;
}

.log-lines {
  scrollbar-color: var(--muted) var(--surface);
}

.log-lines li:target {
  background: var(--surface-2);
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip:focus {
  top: 0.5rem;
}

/* The shell: below 60rem a top bar (wordmark, whether updates arrive, the theme switch) over the page, and the pages
   as a bar along the bottom edge, where a thumb reaches them. From 60rem the bar is a sidebar on the frame's tint and
   the page a sheet beside it. Installed as an app, the page runs under the status bar and around a notch
   (`viewport-fit=cover`): the safe-area insets keep it clear of them. */
.top {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: env(safe-area-inset-top, 0) max(var(--gutter), env(safe-area-inset-right, 0)) 0
    max(var(--gutter), env(safe-area-inset-left, 0));
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--frame);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin-right: auto;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.mark svg {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.top nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 4;
  display: flex;
  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  background: var(--frame);
  box-shadow: 0 -1px 0 var(--line);
}

.top nav a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.top nav a:hover {
  text-decoration: underline;
}

.top nav a[aria-current='page'] {
  background: var(--p0);
  color: var(--block-ink);
  font-weight: 700;
}

.connection {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.connection .dot {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--muted);
}

.connection.online {
  color: var(--ink);
}

.connection.online .dot {
  background: var(--accent);
  animation: beat 2s var(--ease) infinite;
}

@keyframes beat {
  50% {
    opacity: 0.35;
  }
}

.theme svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
}

.theme {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.theme:hover {
  background: var(--surface-2);
}

@media (min-width: 60rem) {
  html {
    scroll-padding-top: 0;
  }

  body {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    min-height: 100vh;
  }

  .top {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: calc(0.75rem + env(safe-area-inset-top, 0)) 0.75rem 0.75rem;
  }

  .wordmark {
    margin: 0 0 1rem;
    padding-left: 0.5rem;
  }

  .top nav {
    position: static;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .top nav a {
    flex: none;
    min-height: 2.5rem;
    justify-content: flex-start;
    padding-inline: 0.75rem;
    font-size: 1rem;
  }

  /* The live dot and the theme switch sit at the sidebar's foot on every page, with or without the dot. */
  .top nav + * {
    margin-top: auto;
  }

  .connection {
    padding-left: 0.5rem;
  }

  .theme {
    align-self: flex-start;
  }

  main {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: calc(100vh - 16px);
    margin: 8px 8px 8px 0;
    padding: 2rem max(var(--gutter), calc((100% - 84rem) / 2)) 4rem;
  }

  #notice {
    bottom: var(--gutter);
  }
}

/* Section heads: a title with its numbers to the right. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 1rem;
}

.section-head a {
  font-weight: 500;
}

.figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35rem;
}

.big {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.warning {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--failure-bg);
  color: var(--failure-ink);
}

/* The budget: the slice is the ground, each slot a block sized by its memory cap. */
.bar {
  display: flex;
  gap: var(--gap);
  height: clamp(8rem, 24vh, 13rem);
  background: var(--surface);
}

.block,
.free {
  position: relative;
  flex: var(--size) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(0.45rem, 1vw, 0.9rem);
  overflow: hidden;
  text-decoration: none;
  transition: flex-grow 300ms var(--ease), background-color 200ms;
}

.block {
  color: var(--block-ink);
  background: var(--profile, var(--surface-2));
}

/* A free slot keeps its place in the budget as an outline: reserved, nothing in it. */
.block.idle {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--profile);
}

/* A runner registered and waiting for its job: the block, paler. Its text stays the blocks' ink: on the dark
   theme's paler mix, the theme's light ink falls under 4.5:1. */
.block.starting {
  background: color-mix(in srgb, var(--profile) 55%, var(--bg));
  color: var(--block-ink);
}

.block.mirror,
.block.seed,
.block.shell {
  color: var(--bg);
  flex-basis: 3px;
}

.block.mirror,
.block.shell {
  --profile: var(--ink);
}

/* A seed container works for its profile: the profile's colour, darkened to the mirror's side. */
.block.seed {
  background: color-mix(in srgb, var(--profile) 30%, var(--ink));
}

/* The block's height, moved down by what is not filled: a new sample animates a transform, not the layout. */
.block .fill {
  position: absolute;
  inset: 0;
  transform: translateY(calc((1 - var(--fill)) * 100%));
  background: color-mix(in srgb, var(--block-ink) 14%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--block-ink) 55%, transparent);
  transition: transform 600ms var(--ease);
}

.block > span:not(.fill),
.free > span {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A size never loses its end: in a narrow block it gets smaller, down to a third of the block's width. */
.block .size,
.free .size {
  font-size: min(clamp(1.1rem, 0.6rem + 2.4vw, 2.75rem), 30cqi);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.block .name,
.free .name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.3rem;
}

/* A block too narrow for its labels shows none: its size is in the bar's accessible name and its title. */
.block,
.free {
  container-type: inline-size;
}

/* A block too narrow for its size's full figure shows the shorter one. */
.size .short {
  display: none;
}

@container (max-width: 6rem) {
  .size:has(.short) .full {
    display: none;
  }

  .size .short {
    display: inline;
  }
}

@container (max-width: 2.25rem) {
  .block > span:not(.fill),
  .free > span {
    display: none;
  }
}

.free {
  color: var(--muted);
}

/* Room no runner may take while the host holds it back or the slice is held: hatched. */
.free.closed {
  background: repeating-linear-gradient(-45deg, var(--line) 0 2px, transparent 2px 8px);
}

/* The readout above the bar: the slice's total, what is in use and reserved of CPU, and the selected block's line. */
.budget .figures {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.readout-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
  font-size: 1.0625rem;
}

.readout-facts {
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Room for the widest figure (`1023.99M in use`), so a live figure gaining a digit never moves where the readout
   wraps, and with it the page below. */
.readout-facts li:first-child {
  min-width: 7.5em;
}

.cpu-reserved {
  display: grid;
  flex: 1 1 14rem;
  gap: 0.3rem;
}

.meter {
  display: block;
  height: 6px;
  background: var(--surface-2);
}

.meter::before {
  content: '';
  display: block;
  width: calc(var(--fill) * 100%);
  height: 100%;
  background: var(--cpu);
}

/* The selected block's line floats over the top of the bar, so the readout keeps its height and the bar stays where
   the pointer is. The lines share one grid cell, hidden but for the selected one. */
.budget .figures {
  position: relative;
}

.lens {
  position: absolute;
  inset: 100% 0 auto;
  z-index: 2;
  display: grid;
  margin-top: 0.4rem;
  pointer-events: none;
}

.lens > span {
  grid-area: 1 / 1;
  visibility: hidden;
}

.lens > span.on {
  visibility: visible;
  justify-self: start;
  padding: 0.4rem 0.7rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
}

.lens strong {
  font-weight: 700;
}

/* Linked views: selecting a slot's block, card, job row or repository (hover, focus or tap) outlines the others
   standing for the same thing. Nothing else changes, so every text keeps its contrast. */
:is(.block, .free, .slot, .job-list > li, .repository, .bar-key).linked {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Rows sit 2px apart: their outline goes inside, where the next row can't cover it. */
:is(.job-list > li, .repository).linked {
  outline-offset: -2px;
}

/* The mirror, a seed container and the free remainder are often too thin to label or tap: keys under the bar name
   them and select them. */
.bar-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: var(--gap);
}

.bar-key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
}

.bar-key.mirror .swatch,
.bar-key.shell .swatch { background: var(--ink); }
.bar-key.seed .swatch { background: color-mix(in srgb, var(--profile) 30%, var(--ink)); }
.key-free .swatch { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.key-closed .swatch {
  background: repeating-linear-gradient(-45deg, var(--line) 0 2px, var(--bg) 2px 5px);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Ink, not the accent: an idle block's outline is a profile colour that may be the accent's. */
.block:focus-visible,
.free:focus-visible {
  outline-color: var(--ink);
  outline-offset: -3px;
}

.p0 { --profile: var(--p0); }
.p1 { --profile: var(--p1); }
.p2 { --profile: var(--p2); }
.p3 { --profile: var(--p3); }
.p4 { --profile: var(--p4); }
.p5 { --profile: var(--p5); }
.p-none { --profile: var(--surface-2); }

.swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
  background: var(--profile, var(--muted));
}

/* Slots. */
.slot-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--gap);
}

.slot {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--surface);
  border-top: 6px solid var(--profile);
  min-height: 11rem;
  scroll-margin-top: 1rem;
}

/* An idle slot's card is drawn like its block: an outline in the profile's colour, nothing in it. */
.slot.idle {
  min-height: 0;
  background: transparent;
  border-top: 0;
  padding-top: calc(1rem + 6px);
  box-shadow: inset 0 0 0 2px var(--profile);
}

.slot.starting {
  background: color-mix(in srgb, var(--profile) 18%, var(--surface));
}

.slot:target {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.slot-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.slot-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
}

.slot-caps {
  margin-left: auto;
  color: var(--muted);
}

.slot-idle {
  color: var(--muted);
}

.slot-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.slot-job {
  display: grid;
  min-width: 0;
  text-decoration: none;
}

.elapsed {
  color: var(--muted);
  font-size: 0.9375rem;
  white-space: nowrap;
  min-width: 7.5ch;
  text-align: end;
}

.slot-job .job-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.slot-job:hover .job-name {
  text-decoration: underline;
}

.repo {
  color: var(--muted);
  font-size: 0.875rem;
}

.step {
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-count {
  display: inline-block;
  padding: 0 0.35rem;
  background: var(--running-bg);
  color: var(--running-ink);
  font-weight: 600;
  font-size: 0.8125rem;
}

.slot-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
}

.slot-figures dt,
.facts dt,
.totals dt,
.headline dt {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.slot-figures dd,
.facts dd,
.totals dd,
.headline dd {
  margin: 0;
  font-weight: 600;
}

.sparkline {
  display: block;
  width: 100%;
  height: 2rem;
  margin-top: 0.25rem;
}

/* Charts: the SVG holds shapes only; labels are HTML around it. */
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--gap);
}

.host .charts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.chart-card {
  padding: 1rem;
  background: var(--surface);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.chart-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.reading {
  font-weight: 500;
  color: var(--muted);
  min-width: 15ch;
  text-align: end;
}

.chart {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
}

.chart-plot {
  display: contents;
}

.chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1;
}

.chart-area {
  position: relative;
  height: 9rem;
  border-bottom: 1px solid var(--line);
}

.chart-area svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* A live chart draws a little before its window: cut it at the sides, not the strokes at the top and bottom. */
  clip-path: inset(-0.5rem 0);
}

.chart-x {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
  padding-top: 0.3rem;
}

.grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  /* A live chart's line comes in stretches: round ends join them without a notch. */
  stroke-linecap: round;
}

.line path {
  vector-effect: non-scaling-stroke;
}

/* The group is translucent, so stretches of an area meet without a seam; the line covers their jagged top. */
.area {
  stroke: none;
  opacity: 0.22;
}

.area path {
  shape-rendering: crispEdges;
}

.line.memory { stroke: var(--memory); }
.area.memory { fill: var(--memory); }
.line.cpu { stroke: var(--cpu); }
.area.cpu { fill: var(--cpu); }
.line.run { stroke: var(--memory); }
.line.wait { stroke: var(--wait); }

.limit {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

/* What admission counted against the budget, under the cap the container may use. */
.limit.reserved {
  stroke-dasharray: 2 3;
}

.limit-label {
  position: absolute;
  right: 0;
  top: var(--y);
  /* Above its line, and above as many labels as `--stack` says; chart.rs places them apart. */
  transform: translateY(calc(-115% - var(--stack, 0) * 115%));
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
  padding: 0 0.25rem;
}

.limit-label.below {
  transform: translateY(15%);
}

.bars rect.success { fill: var(--memory); }
.bars rect.failure { fill: var(--failure-ink); }
.bars rect.neutral { fill: var(--muted); }
.bars rect.other { fill: var(--line); }

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend .success { --profile: var(--memory); }
.legend .failure { --profile: var(--failure-ink); }
.legend .neutral { --profile: var(--muted); }
.legend .run { --profile: var(--memory); }
.legend .wait { --profile: var(--wait); }

/* The overview's regions come in reading order, the queue first: what waits and why is read before the rest. A wide
   screen places them in two columns, the machine (budget, slots, the slice's charts) beside the work (the queue, the
   latest jobs, the repositories), a pair to a row, by grid placement: the order the keyboard and a screen reader
   follow stays the narrow screen's. */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.overview h2 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
}

.overview .section-head h2 {
  margin-bottom: 0;
}

@media (min-width: 80rem) {
  .overview {
    grid-template-columns: minmax(0, 1.65fr) minmax(23rem, 1fr);
    gap: clamp(2rem, 3vw, 3rem);
    align-items: start;
  }

  #budget { grid-area: 1 / 1; }
  #slots { grid-area: 2 / 1; }
  #host { grid-area: 3 / 1; }
  #queue { grid-area: 1 / 2; }
  #recent { grid-area: 2 / 2; }
  #repositories { grid-area: 3 / 2; }
}

.repo-list,
.job-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.repository {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}

.repo-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  min-width: 0;
}

.repo-name a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.repo-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.repository button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Pause and resume of every repository: under the rows' buttons, quieter than they are. */
.repo-list .all {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.25rem 1rem 0 0;
}

.repo-list .all .button-quiet {
  background: none;
  color: var(--muted);
  font-weight: 500;
}

.repo-list .all .button-quiet:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.button,
.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.button {
  background: var(--accent);
  color: var(--accent-ink);
}

.button-quiet {
  background: var(--surface-2);
  color: var(--ink);
}

.button:hover {
  background: color-mix(in srgb, var(--accent) 85%, var(--ink));
}

.button-quiet:hover {
  background: var(--line);
}

.button:active,
.button-quiet:active {
  transform: translateY(1px);
}

[aria-busy='true'] {
  cursor: progress;
}

.button-quiet[aria-busy='true'] {
  color: var(--muted);
}

.job-list a {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  text-decoration: none;
}

.job-list .all a {
  display: block;
  background: none;
  color: var(--muted);
  font-weight: 500;
  text-decoration: underline;
}

.job-list a:hover .job-name {
  text-decoration: underline;
}

.job-list .job-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-list .workflow {
  font-weight: 400;
  color: var(--muted);
}

/* A queued job: an outline, as a free slot's card is, since nothing holds it yet. */
.job-list > li.queued a {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.job-list .repo {
  grid-column: 2;
}

.job-list .when {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 0.875rem;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink);
  vertical-align: middle;
}

.badge.success { background: var(--success-bg); color: var(--success-ink); }
.badge.failure { background: var(--failure-bg); color: var(--failure-ink); }
.badge.warn { background: color-mix(in srgb, var(--wait) 16%, var(--surface)); color: var(--wait-ink); }
.badge.running,
.badge.queued { background: var(--running-bg); color: var(--running-ink); }

.badge.running::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  background: currentColor;
  animation: beat 1.6s var(--ease) infinite;
}

/* Health: whether CI keeps up, in four figures. A figure that needs a look takes the colour of what it counts. */
dl.health-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.health-figures > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--surface);
}

.health-figures dt {
  font-size: 0.875rem;
}

.health-figures dd {
  font-size: 1rem;
  letter-spacing: normal;
}

.health-figures .figure-main {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
}

.health-figures a.figure-main:hover {
  text-decoration: underline;
}

.health-figures .figure-of {
  font-weight: 500;
  color: var(--muted);
}

.health-figures .figure-note {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.health-figures .waiting {
  background: color-mix(in srgb, var(--wait) 16%, var(--surface));
}

.health-figures .waiting .figure-main {
  color: var(--wait-ink);
}

.health-figures .failing {
  background: var(--failure-bg);
}

.health-figures .failing,
.health-figures .failing :is(dt, .figure-note) {
  color: var(--failure-ink);
}

/* What the month's job minutes would have cost on GitHub's runners, with its basis: a note under the figures. */
.health-savings {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

/* The longest wait of each hour of the last day: the shape of the bursts, not their numbers. */
.wait-hours {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.wait-hours span {
  flex: 1;
  min-height: 2px;
  height: calc(var(--h) * 100%);
  background: var(--wait);
}

/* The queue: each waiting job, how long it has waited, and why. */
.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.queue {
  container-type: inline-size;
}

/* The reason gets a line of its own under the job; a queue wide enough puts it beside. */
.queue-list a {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.1rem 0.75rem;
  padding: 0.65rem 0.75rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
}

.queue-list .waited {
  grid-row: 1 / span 3;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wait-ink);
}

.queue-list .job-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-list a:hover .job-name {
  text-decoration: underline;
}

.queue-list .workflow {
  font-weight: 400;
  color: var(--muted);
}

.queue-list .repo {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-list .reason {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

@container (min-width: 40rem) {
  .queue-list a {
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: 1rem;
    padding: 0.65rem 1rem;
  }

  .queue-list .waited {
    grid-row: 1 / span 2;
    font-size: 1.25rem;
  }

  .queue-list .reason {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

.reason::before {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--wait);
}

.reason.act::before {
  background: var(--failure-ink);
}

.reason.soon::before {
  background: var(--accent);
}

.queue-list > li.linked a {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* A job's latest runs: a column each, run time stacked on its wait, and its memory peak under them. */
/* A run's column stays a target a thumb can pick (1.75rem, gaps of 4px); past the screen's width the runs scroll
   inside the chart. The scroller runs right to left so it opens at the newest run; the list inside reads left to
   right, oldest first. */
.run-scroll {
  margin: 1.25rem 0 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  direction: rtl;
}

.run-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(var(--runs), minmax(1.75rem, 4.5rem));
  gap: 4px;
  min-width: calc(var(--runs) * 1.75rem + (var(--runs) - 1) * 4px);
}

.run-scale {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.run-scale + .run-scroll {
  margin-top: 0.25rem;
}

.run-bars a {
  display: grid;
  grid-template-rows: 7rem 2.5rem;
  gap: 4px;
  height: 100%;
  padding: 2px;
  text-decoration: none;
}

.run-bars a:hover,
.run-bars .this a {
  background: var(--surface);
}

.run-bars .this a {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.run-time,
.run-peak {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.run-time span,
.run-peak span {
  height: calc(var(--h) * 100%);
}

.run-time .ran { min-height: 2px; background: var(--muted); }
.run-time .ran.success { background: var(--memory); }
.run-time .ran.failure { background: var(--failure-ink); }
.run-time .ran.running { background: var(--cpu); }
.run-time .waited { background: var(--wait); }
.run-peak { border-top: 1px solid var(--line); }
.run-peak span { background: var(--profile, var(--muted)); }

.legend .peak .swatch { background: var(--profile, var(--muted)); }

/* The job page. */
.job-head {
  display: grid;
  gap: 0.5rem;
}

.job-head h1 .badge {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  margin-left: 0.25rem;
}

.crumbs {
  color: var(--muted);
  font-weight: 500;
}

.job-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  color: var(--muted);
}

.job-facts code {
  color: var(--ink);
}

.facts,
.totals,
.headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0;
}

.headline dd {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.totals {
  margin-top: 1rem;
}

.phases {
  display: flex;
  gap: 3px;
  height: 3rem;
  margin-top: 1rem;
}

.phase {
  flex: var(--share) 1 0;
  min-width: 4px;
}

.phase.wait,
.phase-legend .wait { --profile: var(--wait); }
.phase.start,
.phase-legend .start { --profile: var(--cpu); }
.phase.run,
.phase-legend .run { --profile: var(--memory); }
.phase.clean,
.phase-legend .clean { --profile: var(--muted); }

.phase {
  background: var(--profile);
  transition: opacity 150ms var(--ease);
}

/* Pointing at a phase or its legend entry fades the other phases' fills; the legend's text stays as it is. */
.timeline:has(.phase:hover) .phase:not(:hover) { opacity: 0.4; }
.timeline:has(.phase.wait:hover) .phase-legend .wait,
.timeline:has(.phase.start:hover) .phase-legend .start,
.timeline:has(.phase.run:hover) .phase-legend .run,
.timeline:has(.phase.clean:hover) .phase-legend .clean { text-decoration: underline; text-underline-offset: 0.25em; }
.timeline:has(.phase-legend .wait:hover) .phase:not(.wait),
.timeline:has(.phase-legend .start:hover) .phase:not(.start),
.timeline:has(.phase-legend .run:hover) .phase:not(.run),
.timeline:has(.phase-legend .clean:hover) .phase:not(.clean) { opacity: 0.4; }

/* The phase still going on is paler than the phases done, and breathes. */
.phase.ongoing {
  background: color-mix(in srgb, var(--profile) 60%, transparent);
  animation: beat 2.4s var(--ease) infinite;
}

.phase-legend {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.phase-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.figure {
  font-weight: 700;
}

/* A phase that lasts counts up to "59m 59s…" in this box, so the legend never rewraps as it does. */
.figure.ongoing {
  min-width: 7.5ch;
}

.marks {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.marks summary {
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.marks dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

.marks dl div {
  display: contents;
}

.marks dt {
  color: var(--muted);
}

.marks dd {
  margin: 0;
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.step-usage {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms var(--ease);
}

.step-usage.start { left: 0; }
.step-usage.end { right: 0; }

.step-list li.linked .step-usage {
  opacity: 1;
}

.step-list li.linked {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--ink);
}

.step-list li[tabindex] {
  cursor: default;
}

/* A step's stretch of a chart, drawn while the step is hovered or focused. */
/* Its place is in the chart's units: `--from` and `--to` against the chart's `--span`. */
.band {
  --left: calc(var(--from) / var(--span) * 100%);
  --width: calc((var(--to) - var(--from)) / var(--span) * 100%);
  position: absolute;
  inset-block: 0;
  left: var(--left);
  width: max(2px, var(--width));
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: inset 1px 0 0 var(--ink), inset -1px 0 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease);
}

.band.on {
  opacity: 1;
}

.band-label {
  position: absolute;
  top: 0.25rem;
  left: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
  padding: 0 0.25rem;
}

/* A stretch in the right half labels itself to its left. */
.band.end .band-label {
  left: auto;
  right: 0.4rem;
}

.step-list li {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) 5.5rem;
  grid-template-areas: 'name track time';
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
}

.step-name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-time {
  grid-area: time;
  text-align: right;
  font-weight: 600;
}

.step-track {
  grid-area: track;
  position: relative;
  height: 0.9rem;
}

/* Seconds since the job's start, `--from` and `--to`, against the step list's `--span`. */
.step-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) / var(--span) * 100%);
  width: max(3px, calc((var(--to) - var(--from)) / var(--span) * 100%));
  background: var(--profile, var(--muted));
}

.step-list .success { --profile: var(--memory); }
.step-list .failure { --profile: var(--failure-ink); }
.step-list .failure .step-name { color: var(--failure-ink); font-weight: 600; }
.step-list .running { --profile: var(--cpu); }
.step-list .running .step-name { font-weight: 600; }
.step-list .neutral,
.step-list .queued { color: var(--muted); }

.step-list .running .step-bar {
  animation: beat 1.6s var(--ease) infinite;
}

.log-lines {
  margin: 0;
  padding: 0.75rem 0.75rem 0.75rem 4.5rem;
  max-height: 34rem;
  overflow: auto;
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-lines li::marker {
  color: var(--muted);
  font-size: 0.75rem;
}

/* History. */
/* The history's filters: a row of links per filter, the one in force marked as the page in the top bar is. */
.filters {
  display: grid;
  gap: 0.5rem;
}

.filter-group {
  display: flex;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

.filter-name {
  flex: none;
  width: 6.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.filter-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.filter-group a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  background: var(--surface);
  font-weight: 500;
  text-decoration: none;
}

.filter-group a:hover {
  background: var(--surface-2);
}

.filter-group a[aria-current='true'] {
  background: var(--p0);
  color: var(--block-ink);
}

/* The history's charts share a day: a horizontal drag on a touch screen picks days instead of scrolling. */
.trends .charts {
  touch-action: pan-y;
}

.trends .band {
  left: calc(var(--day, 0) * var(--width));
}

.trends .charts:focus-visible {
  outline-offset: 4px;
}

.charts.three {
  margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.table-wrap {
  overflow-x: auto;
}

.job-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
}

.job-table th,
.job-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
}

.job-table thead th {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.job-table tbody tr {
  background: var(--surface);
}

.job-table tbody th a {
  display: grid;
  /* Not minmax(0, …): the cell would shrink below its name, and the name run into the next column. */
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  align-items: center;
  text-decoration: none;
}

.job-table tbody th .swatch {
  grid-row: 1 / span 2;
}

.job-table .job-name {
  font-weight: 600;
}

.job-table a:hover .job-name {
  text-decoration: underline;
}

.job-table .number {
  text-align: right;
}

.job-table abbr {
  text-decoration: none;
}

.pager {
  margin-top: 1rem;
}

/* Caches. */
.page-head {
  display: grid;
  gap: 0.25rem;
  margin-bottom: -1rem;
}

/* A file's path breaks anywhere rather than run off a phone's screen. */
.page-head code {
  overflow-wrap: anywhere;
}

.volume-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: var(--gap);
}

.volume {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--surface);
  border-top: 6px solid var(--profile);
}

.volume-head h2 {
  font-size: 1rem;
}

.volume-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume-name {
  font-size: 0.8125rem;
  color: var(--muted);
}

.volume .chart-area {
  height: 5rem;
}

.volume-action {
  margin-left: auto;
  min-height: 36px;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

@media (pointer: coarse) {
  .volume-action {
    min-height: 44px;
  }
}

.volume-head {
  justify-content: space-between;
}

/* Records of failed jobs: on the caches page, and the command that opens a shell on a job's page. */
.records {
  margin-top: 2.5rem;
}

.record-table td:last-child {
  width: 1%;
}

.record {
  margin-top: 1.5rem;
}

.copy-command {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}

.copy-command code {
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  user-select: all;
}

/* Sizing: per profile, its jobs' peaks on a track as long as its cap, the advice, and a row per job. */
.sizing-profile {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 6px solid var(--profile);
}

.sizing-profile h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.peak-scale {
  position: relative;
  height: 3rem;
  margin: 2rem 0 0.5rem;
  background: var(--surface);
}

.peak-scale .cap {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--to);
  box-shadow: inset 0 0 0 2px var(--profile);
}

.peak-scale .cap span,
.peak-scale .need span {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.peak-scale .cap span {
  right: 0;
  color: var(--muted);
}

.peak-scale .spread {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  min-width: 3px;
  background: var(--profile);
}

.peak-scale .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at);
  width: 2px;
  background: var(--ink);
}

.peak-scale .mark.p95 {
  top: 0.6rem;
  bottom: 0.6rem;
}

.peak-scale .mark.need {
  background: none;
  border-left: 2px dashed var(--ink);
}

.peak-scale .need span {
  top: calc(100% + 0.25rem);
  bottom: auto;
  left: 0.25rem;
}

.peak-scale .need.end span {
  left: auto;
  right: 0.25rem;
}

.scale-keys {
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

.over {
  color: var(--failure-ink);
}

/* Past a limit runnerd acts on by itself: worth a look, not a failure. */
.over-limit {
  color: var(--wait-ink);
}

.advice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-left: 4px solid var(--line);
}

.advice.lower { border-left-color: var(--wait); }
.advice.raise { border-left-color: var(--failure-ink); background: var(--failure-bg); color: var(--failure-ink); }
.advice.keep { border-left-color: var(--memory); }

/* Insights: a card each, its edge in the colour of what it says. */
.insight-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  align-items: start;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-left: 4px solid var(--line);
}

.insight p {
  margin: 0;
}

.insight .sentence {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
}

.insight.warn { border-left-color: var(--wait); }
.insight.bad { border-left-color: var(--failure-ink); }

.empty {
  color: var(--muted);
}

.sizing-table .repo {
  font-size: 0.875rem;
}

.notice-box {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--running-bg);
  color: var(--running-ink);
}

/* The config editor: the file on the left, what it asks of the budget on the right. */
.config-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.editor {
  display: grid;
  gap: 0.5rem;
}

.editor textarea {
  width: 100%;
  min-height: 32rem;
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  resize: vertical;
  tab-size: 2;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.editor-actions p {
  flex: 1 1 18rem;
  font-size: 0.875rem;
}

.config-side {
  display: grid;
  gap: 2.5rem;
}

.check-result {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border-top: 6px solid var(--memory);
}

.check-result.invalid {
  border-top-color: var(--failure-ink);
}

.check-result.unbounded {
  border-top-color: var(--wait);
}

.check-result.invalid h2,
.check-result.invalid .check-message {
  color: var(--failure-ink);
}

.bar-small {
  position: relative;
  height: 6rem;
  background: var(--bg);
}

/* Exact widths: a block's share of the bar is its share of the budget, so the MemoryMax mark lands where it says.
   No gap and no side padding on the blocks, which a narrow block could not shrink below; the labels carry it. */
.bar-small {
  gap: 0;
}

.bar-small > .block,
.bar-small > .free {
  flex: 0 0 calc(var(--size) * 100%);
  padding-inline: 0;
  box-shadow: inset -2px 0 var(--bg);
}

.bar-small > :is(.block, .free) > span {
  padding-inline: 0.45rem;
}

.bar-small .block .size,
.bar-small .free .size {
  font-size: min(1.125rem, 30cqi);
}

/* A narrow block's name wraps rather than losing its end. */
.bar-small .block > .name {
  font-size: 0.8125rem;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.bar:has(.max-mark) {
  margin-top: 1.6rem;
}

.max-mark {
  position: absolute;
  top: -0.4rem;
  bottom: -0.4rem;
  left: var(--at);
  border-left: 3px solid var(--failure-ink);
}

.max-label {
  position: absolute;
  bottom: 100%;
  right: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--failure-ink);
}

.warnings {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
}

.check-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.check-list li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  font-size: 0.9375rem;
}

.check-list .badge {
  justify-self: stretch;
  justify-content: center;
}

.fix {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.65rem;
  background: var(--bg);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Signing in another device: a QR code of a one-time link, dark on white in either theme. */
.devices {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.devices h2 {
  margin: 0;
}

.devices p {
  margin: 0;
}

.devices label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: -0.5rem;
}

.devices select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}

#pairing-code {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.qr {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.qr-code {
  display: block;
  width: min(16rem, 100%);
  height: auto;
}

.qr figcaption {
  font-size: 0.875rem;
}

.qr figcaption code,
.pairing-link code {
  overflow-wrap: anywhere;
}

.pairing-link {
  font-size: 0.875rem;
  max-width: 100%;
}

.pairing-link summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
}

/* Notices and the signed-out page. */
#notice {
  position: fixed;
  right: var(--gutter);
  bottom: calc(3.25rem + env(safe-area-inset-bottom, 0) + 0.75rem);
  max-width: min(28rem, calc(100vw - 2 * var(--gutter)));
  z-index: 5;
}

.toast {
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
  padding: 0.85rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
}

.toast.failed {
  background: var(--failure-bg);
  color: var(--failure-ink);
}

.question {
  display: grid;
  gap: 0.75rem;
}

.toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.button-danger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--failure-ink);
  color: var(--failure-bg);
}

.button-danger:hover {
  background: color-mix(in srgb, var(--failure-ink) 85%, var(--ink));
}

.button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.signed-out {
  max-width: 40rem;
  padding-top: clamp(2rem, 10vh, 6rem);
  display: grid;
  gap: 1rem;
}

@media (max-width: 60rem) {
  .config-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 30rem) {
  h1 {
    font-size: 1.5rem;
  }

  /* Six labels share the width: 12px, inside the page's margin. */
  .top nav {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0));
  }

  .top nav a {
    padding-inline: 0;
    font-size: 0.75rem;
  }
}

@media (max-width: 40rem) {
  .slot {
    min-height: 0;
    padding: 0.75rem 0.85rem;
  }

  /* Narrow blocks keep their labels: less padding and gap, and a name that may wrap. */
  .bar {
    --gap: 4px;
  }

  .block,
  .free {
    padding: 0.45rem 0.4rem;
  }

  .block > span.name,
  .free.closed > .name {
    font-size: 0.8125rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .step-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name time' 'track track';
    gap: 0.3rem 0.75rem;
  }

  .job-table th:nth-child(4),
  .job-table td:nth-child(4),
  .job-table th:nth-child(7),
  .job-table td:nth-child(7) {
    display: none;
  }

  /* A record's fourth column is its Remove button. */
  .record-table td:nth-child(4),
  .record-table th:nth-child(4) {
    display: table-cell;
  }

  /* Its name wraps and its cells pad less, so the Remove button stays in view. */
  .record-table th,
  .record-table td {
    padding-inline: 0.4rem;
  }

  .record-table tbody th {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* A group is one row, its name beside links that scroll sideways, so the jobs start near the first screen. */
  .filter-group {
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
  }

  .filter-name {
    width: 5.25rem;
  }

  .filter-group ul {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
  }

  /* The trends are a summary above the jobs: shorter on a phone, so the jobs start on the second screen. */
  .trends .chart-area {
    height: 5.5rem;
  }

  .filter-group li {
    flex: none;
  }

  /* A job a card: its name and outcome, then when it was queued and its figures, each named. */
  .history-table thead {
    display: none;
  }

  .history-table,
  .history-table tbody {
    display: block;
  }

  .history-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.9rem;
    margin-bottom: 2px;
    padding: 0.6rem 0.75rem;
  }

  .history-table tbody :is(th, td) {
    padding: 0;
    white-space: normal;
  }

  /* Wide enough that the name and the outcome fill the first line, so the figures start the second. */
  .history-table tbody th {
    flex: 1 1 calc(100% - 8rem);
    min-width: 0;
  }

  .history-table tbody td:nth-child(2) {
    margin-left: auto;
  }

  .history-table tbody td:nth-child(n + 3):not(:nth-child(7)) {
    display: block;
    font-size: 0.875rem;
    color: var(--muted);
  }


  .history-table tbody td:nth-child(n + 4)::before {
    content: attr(data-label) ' ';
  }

  /* A repository's waits a card: its name, then each figure named. */
  .waits-table thead {
    display: none;
  }

  .waits-table,
  .waits-table tbody {
    display: block;
  }

  .waits-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-bottom: 2px;
    padding: 0.6rem 0.75rem;
  }

  .waits-table tbody :is(th, td) {
    padding: 0;
    white-space: normal;
    text-align: left;
  }

  .waits-table tbody th {
    flex: 1 1 100%;
  }

  .waits-table tbody td {
    font-size: 0.875rem;
    color: var(--muted);
  }

  .waits-table tbody td::before {
    content: attr(data-label) ' ';
  }

  dl.health-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health-figures > div {
    gap: 0.1rem;
    padding: 0.65rem 0.8rem 0.75rem;
  }

  .health-figures .figure-main {
    font-size: 1.75rem;
  }

  .health-figures .figure-note {
    font-size: 0.8125rem;
  }
}

/* Links that stand on their own get a finger's height on a touch screen; links inside a sentence stay text. */
@media (pointer: coarse) {
  .repo-name a,
  .crumbs a,
  .job-facts a,
  .log .section-head a,
  .section-head > a,
  .filter-group a,
  .job-list .all a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .job-table tbody th a {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Auto sizing: on or off, its rules, and a line per profile on what it does next. */
.auto-plan {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--surface);
}

.auto-plan h2 {
  font-size: 1.25rem;
}

.auto-plan p {
  margin: 0;
  max-width: 75ch;
}

.plan-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.plan-list li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 40rem) {
  .plan-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A job's row keeps what decides its cap: runs, p99, its wait and what it needs. */
  .sizing-table :is(th, td):is(:nth-child(3), :nth-child(6)) {
    display: none;
  }

  .sizing-table tbody th {
    white-space: normal;
  }
}

.plan-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.plan-what {
  display: grid;
  gap: 0.15rem;
}

.plan-what.changes strong {
  color: var(--wait-ink);
}

/* A `cpus` raise auto sizing cannot make, beside what it does next. */
.plan-refused {
  color: var(--failure-ink);
}

.sizing-changes {
  margin: 1rem 0;
}

.sizing-changes h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.sizing-changes ol {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

/* Why the job was admitted and what it reserved: a note under its figures. */
.admission {
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-left: 4px solid var(--profile, var(--muted));
  font-size: 0.9375rem;
}