runnerd-web 0.0.8

/* 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;

  --bg: #f8f8f8;
  --surface: #ececec;
  --surface-2: #dedede;
  --line: #c9c9c9;
  --ink: #0a0a0a;
  --muted: #555555;
  --accent: #1f6b3a;
  --accent-ink: #ffffff;
  --memory: #1f6b3a;
  --cpu: #5b3fc4;
  --wait: #9a5b00;
  --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']) {
    --bg: #0d0f0e;
    --surface: #1a1d1b;
    --surface-2: #262a28;
    --line: #3a3f3c;
    --ink: #f2f3f2;
    --muted: #a9b0ac;
    --accent: #8fe0a6;
    --accent-ink: #0a0a0a;
    --memory: #8fe0a6;
    --cpu: #b7a6ff;
    --wait: #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'] {
  --bg: #0d0f0e;
  --surface: #1a1d1b;
  --surface-2: #262a28;
  --line: #3a3f3c;
  --ink: #f2f3f2;
  --muted: #a9b0ac;
  --accent: #8fe0a6;
  --accent-ink: #0a0a0a;
  --memory: #8fe0a6;
  --cpu: #b7a6ff;
  --wait: #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 {
  background: var(--bg);
  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%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--gutter) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
}

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

h1 {
  font-size: 2.25rem;
  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 top bar: wordmark, pages, whether updates arrive, the theme switch. */
.top {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  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 {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
}

.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.65rem;
  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);
}

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

/* 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. */
.block.starting {
  background: color-mix(in srgb, var(--profile) 55%, var(--bg));
  color: var(--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;
}

.block .size,
.free .size {
  font-size: clamp(1.1rem, 0.6rem + 2.4vw, 2.75rem);
  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;
}

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

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

/* The readout above the bar: the slice's total, and the selected block's line beside it. */
.budget .figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin: 0.75rem 0 1rem;
}

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

/* 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 .muted {
  min-width: 8.5em;
}

/* The lines share one grid cell: the readout keeps the height of the longest, whichever is shown. */
.lens {
  display: grid;
  min-height: 1.45em;
  color: var(--muted);
}

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

.lens > span.on {
  visibility: visible;
}

.lens strong {
  color: var(--ink);
}

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

.bar-keys {
  display: none;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: var(--gap);
}

@media (pointer: coarse) {
  .bar-keys {
    display: flex;
  }
}

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

/* 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);
}

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

.limit-label {
  position: absolute;
  right: 0;
  top: var(--y);
  transform: translateY(-115%);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface);
  padding: 0 0.25rem;
}

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

/* Repositories and the latest jobs, side by side. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
}

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

/* The job page. */
.job-head {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
}

.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;
  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 ends in a fading edge, and breathes. */
.phase.ongoing {
  background: linear-gradient(to right, var(--profile) 70%, color-mix(in srgb, var(--profile) 35%, 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 .skipped,
.step-list .pending { 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. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.filters label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

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

.filters a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 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 {
  padding-top: 1rem;
  margin-bottom: -1.5rem;
}

.volume-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 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);
}

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

.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.invalid h2,
.check-result.invalid .check-message {
  color: var(--failure-ink);
}

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

.bar-small .block .size,
.bar-small .free .size {
  font-size: 1.125rem;
}

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

/* Notices and the signed-out page. */
#notice {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  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: 40rem) {
  /* Five pages do not fit a phone's width in one row. */
  .top nav {
    order: 3;
    width: 100%;
    margin-right: 0;
    flex-wrap: wrap;
  }

  .connection {
    margin-left: auto;
  }

  /* 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 > .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;
  }

  .filters label,
  .filters select {
    width: 100%;
  }
}

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

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