/* Dense, flat and monospace on purpose: a developer tool, not a landing page.
   Square corners, 1px borders, a dozen colours, no shadows, no animation. */
:root {
  --bg: #ffffff;
  --panel: #f1f1f1;
  --band: #d6d6d6;
  --bar: #1d1d1d;
  --bar-text: #e8e8e8;
  --border: #b9b9b9;
  --text: #1a1a1a;
  --dim: #6b6b6b;
  --link: #0b4fa8;
  --hit: #fff0a0;
  --ok: #1f7a1f;
  --fail: #b3261e;
  --run: #1a5fb4;
  --cancel: #8a6d00;
  --skip: #888888;
  --queued: #6b6b6b;
  --a30: #1a1a1a;
  --a31: #b3261e;
  --a32: #1f7a1f;
  --a33: #8a6d00;
  --a34: #1a5fb4;
  --a35: #8a2be2;
  --a36: #007a7a;
  --a37: #6b6b6b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --panel: #1d1d1d;
    --band: #2b2b2b;
    --bar: #0a0a0a;
    --bar-text: #dcdcdc;
    --border: #3a3a3a;
    --text: #dcdcdc;
    --dim: #8c8c8c;
    --link: #7ab3ff;
    --hit: #5a4a00;
    --ok: #5fc15f;
    --fail: #ff6b63;
    --run: #62a0ea;
    --cancel: #e5c07b;
    --skip: #8c8c8c;
    --queued: #8c8c8c;
    --a30: #dcdcdc;
    --a31: #ff6b63;
    --a32: #5fc15f;
    --a33: #e5c07b;
    --a34: #62a0ea;
    --a35: #c792ea;
    --a36: #56d4d4;
    --a37: #8c8c8c;
  }
}

* {
  box-sizing: border-box;
  border-radius: 0;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
a {
  color: var(--link);
}
h2 {
  font-size: 14px;
  margin: 0 0 8px;
}
h3 {
  font-size: 13px;
  margin: 14px 0 6px;
}
code,
pre,
.mono {
  font-family: inherit;
}
pre {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 8px;
  overflow: auto;
}
.dim {
  color: var(--dim);
}
.pad {
  padding: 8px 12px;
}
.grow {
  flex: 1;
}
.num {
  text-align: right;
}

/* ---- chrome */
.top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 30px;
  padding: 0 12px;
  background: var(--bar);
  color: var(--bar-text);
}
.top a {
  color: var(--bar-text);
}
.top nav {
  display: flex;
  gap: 12px;
}
.top nav a.on {
  font-weight: bold;
}
.brand img {
  vertical-align: -4px;
  margin-right: 6px;
}
.brand {
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 1px;
}
main {
  padding: 12px 16px;
}
.error {
  background: var(--panel);
  border: 1px solid var(--fail);
  color: var(--fail);
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* ---- forms */
button,
input,
select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 8px;
  margin: 0;
}
button {
  background: var(--panel);
  cursor: pointer;
}
button:hover {
  border-color: var(--text);
}
input:focus,
select:focus,
button:focus-visible {
  outline: 1px solid var(--link);
  outline-offset: 0;
}
input[type=checkbox] {
  padding: 0;
}
.inline {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.stack {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login {
  max-width: 320px;
  margin: 18vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- tables */
table {
  border-collapse: collapse;
}
table.list {
  width: 100%;
}
table.list th {
  text-align: left;
  color: var(--dim);
  font-weight: normal;
  border-bottom: 1px solid var(--border);
  padding: 3px 8px;
}
table.list td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--panel);
  vertical-align: top;
}
table.list tr:hover td {
  background: var(--panel);
}
td.msg {
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo {
  border: 1px solid var(--border);
  padding: 4px 10px 10px;
  margin-bottom: 12px;
}
.chip {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0 5px;
  margin-right: 3px;
}

/* ---- status */
.s-success {
  --c: var(--ok);
}
.s-failed {
  --c: var(--fail);
}
.s-running,
.s-claimed {
  --c: var(--run);
}
.s-cancelled {
  --c: var(--cancel);
}
.s-skipped {
  --c: var(--skip);
}
.s-queued {
  --c: var(--queued);
}
.st,
.glyph,
.chip {
  color: var(--c);
}
.st {
  text-decoration: none;
}

/* ---- run page */
.runpage {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100vh - 30px);
}
.side {
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow: auto;
}
.jobhead {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px 3px;
  font-weight: bold;
}
.jobhead .group {
  color: var(--dim);
  font-weight: normal;
}
.step {
  display: flex;
  gap: 6px;
  padding: 2px 10px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.step:hover {
  background: var(--band);
}
.step .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step .glyph {
  width: 14px;
  text-align: center;
}
.step .dur {
  color: var(--dim);
}
.delta {
  font-size: 11px;
}
.delta.slower {
  color: var(--fail);
}
.delta.faster {
  color: var(--ok);
}
.actions {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.actions .press {
  border-color: var(--run);
}
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.band {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--band);
  border-bottom: 1px solid var(--border);
}
.band .msg {
  font-weight: bold;
  font-size: 14px;
}
.band .src {
  color: var(--dim);
}
.band .right {
  text-align: right;
}
.band .right .sha {
  color: var(--dim);
}
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.tab {
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  padding: 4px 14px;
}
.tab.on {
  background: var(--bg);
  font-weight: bold;
  border-bottom: 1px solid var(--bg);
  margin-bottom: -1px;
}
.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-wrap: wrap;
}
.toolbar input#search {
  width: 26ch;
}
.filters {
  margin-bottom: 8px;
}
.filters input[type=search] {
  width: 34ch;
  max-width: 100%;
}
#more {
  margin: 10px 0;
}
.toolbar label {
  display: flex;
  gap: 4px;
  align-items: center;
}
.help {
  padding: 6px 10px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--dim);
}
.help[hidden] {
  display: none;
}
.logroot {
  flex: 1;
  min-height: 0;
}

/* ---- the log */
.logview {
  position: relative;
  height: 100%;
  overflow: auto;
  font-size: 12px;
  outline: none;
}
.logview .spacer {
  width: 1px;
}
.logview .window {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  width: max-content;
}
.row {
  height: 20px;
  line-height: 20px;
  white-space: pre;
  display: flex;
  gap: 8px;
}
.row.job {
  background: var(--band);
  font-weight: bold;
  padding: 0 10px;
  justify-content: space-between;
}
.row.job .group {
  color: var(--dim);
  font-weight: normal;
  margin-left: auto;
  margin-right: 12px;
}
.row.head {
  border-left: 4px solid var(--c);
  background: var(--panel);
  cursor: pointer;
  padding-right: 10px;
}
.row.head .chev {
  width: 12px;
  color: var(--dim);
}
.row.head .dur,
.row.head .count {
  color: var(--dim);
}
.row.head .glyph {
  margin-left: auto;
}
.row.line {
  border-left: 4px solid var(--c);
  padding-right: 8px;
}
.row.line .txt {
  flex: 1;
  min-width: 0;
}
.row.line.system .txt {
  color: var(--dim);
}
.row.line.stderr .txt {
  color: var(--fail);
}
.row .ts {
  width: 5ch;
  text-align: right;
  color: var(--dim);
  cursor: pointer;
  flex: none;
  position: sticky;
  right: 0;
  background: var(--bg);
}
.row.hit .ts {
  background: var(--hit);
}
.row .ts:hover {
  text-decoration: underline;
}
.row.hit {
  background: var(--hit);
}
.row.sel {
  outline: 1px solid var(--link);
  outline-offset: -1px;
}
.ab {
  font-weight: bold;
}
.a30 {
  color: var(--a30);
}
.a31 {
  color: var(--a31);
}
.a32 {
  color: var(--a32);
}
.a33 {
  color: var(--a33);
}
.a34 {
  color: var(--a34);
}
.a35 {
  color: var(--a35);
}
.a36 {
  color: var(--a36);
}
.a37 {
  color: var(--a37);
}
.a90 {
  color: var(--a37);
}
.a91 {
  color: var(--a31);
}
.a92 {
  color: var(--a32);
}
.a93 {
  color: var(--a33);
}
.a94 {
  color: var(--a34);
}
.a95 {
  color: var(--a35);
}
.a96 {
  color: var(--a36);
}
.a97 {
  color: var(--a30);
}

/* ---- timeline and details */
.timeline {
  padding: 10px 12px;
}
.timeline .axis {
  display: flex;
  padding-left: 260px;
  padding-right: 70px;
  margin-bottom: 4px;
}
.trow {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 70px;
  align-items: center;
  height: 20px;
}
.tname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track {
  position: relative;
  height: 12px;
  background: var(--panel);
}
.bar {
  position: absolute;
  top: 1px;
  height: 10px;
  background: var(--c);
}
.tdur {
  text-align: right;
  color: var(--dim);
}
.details {
  padding: 10px 12px;
}
.details th {
  text-align: left;
  color: var(--dim);
  font-weight: normal;
  padding: 1px 16px 1px 0;
  vertical-align: top;
  white-space: nowrap;
}
.details td {
  padding: 1px 0;
  word-break: break-all;
}

/* ---- narrow screens: a table row becomes a few short lines */
@media (max-width: 880px) {
  table.runs thead {
    display: none;
  }
  table.runs,
  table.runs tbody {
    display: block;
  }
  table.runs tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 2px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  table.runs td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  table.runs tr:hover td {
    background: none;
  }
  table.runs .c-status {
    grid-area: 1 / 1;
  }
  table.runs .c-pipes {
    grid-area: 1 / 2 / 2 / 4;
    min-width: 0;
  }
  table.runs .c-took {
    grid-area: 1 / 4;
  }
  table.runs .c-msg {
    grid-area: 2 / 1 / 3 / 5;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table.runs .c-repo {
    grid-area: 3 / 1;
  }
  table.runs .c-ref {
    grid-area: 3 / 2;
  }
  table.runs .c-trigger {
    grid-area: 3 / 3;
  }
  table.runs .c-when {
    grid-area: 3 / 4;
    text-align: right;
    white-space: nowrap;
  }
  table.runs .c-took {
    white-space: nowrap;
  }
  table.runs .c-ref {
    overflow-wrap: anywhere;
  }
  table.runs .chip {
    display: inline-block;
    margin-bottom: 2px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  table.pipes,
  table.pipes tbody {
    display: block;
  }
  table.pipes tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  table.pipes td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  table.pipes tr:hover td {
    background: none;
  }
  table.pipes .c-entry {
    grid-area: 1 / 1 / 2 / 3;
  }
  table.pipes .c-name {
    grid-area: 2 / 1;
  }
  table.pipes .c-group {
    grid-area: 2 / 2;
    white-space: nowrap;
  }
  table.pipes .c-triggers {
    grid-area: 3 / 1 / 4 / 3;
  }
  table.pipes .c-run {
    grid-area: 1 / 3 / 4 / 4;
    align-self: center;
  }
  .repo {
    padding: 4px 10px 10px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 800px) {
  .runpage {
    grid-template-columns: 1fr;
    height: auto;
  }
  .side {
    max-height: 30dvh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .panel {
    height: 75dvh;
    min-height: 320px;
  }
  .runpage > .main {
    display: contents;
  }
  .runpage .band {
    order: 1;
  }
  .runpage .side {
    order: 2;
  }
  .runpage .tabs {
    order: 3;
  }
  .runpage .panel {
    order: 4;
  }
}

/* ---- phones */
@media (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
  main {
    padding: 10px 12px;
  }
  button,
  input,
  select {
    font-size: 16px;
    min-height: 36px;
    padding: 4px 10px;
  }
  input[type=checkbox] {
    min-height: 0;
    width: 18px;
    height: 18px;
  }
  .top {
    height: auto;
    min-height: 40px;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 4px 12px;
  }
  .top a {
    white-space: nowrap;
    padding: 6px 0;
  }
  .top nav {
    gap: 10px;
  }
  .top .grow {
    display: none;
  }
  .top #signout {
    margin-left: auto;
  }
  .brand img {
    vertical-align: -4px;
  }
  .inline {
    gap: 8px;
  }
  .inline input,
  .inline select {
    flex: 1 1 100%;
    min-width: 0;
  }
  .inline button {
    flex: 1 1 auto;
  }
  .filters input[type=search] {
    width: auto;
  }
  .login {
    margin-top: 10vh;
    max-width: none;
  }

  .band {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
  }
  .band .right {
    text-align: left;
    display: flex;
    gap: 10px;
  }
  .tabs .tab {
    flex: 1;
    padding: 8px 6px;
  }
  .toolbar {
    gap: 6px 8px;
  }
  .toolbar button {
    min-height: 32px;
    font-size: 14px;
    padding: 2px 10px;
  }
  .toolbar label {
    font-size: 14px;
  }
  .toolbar input#search {
    flex: 1 1 100%;
    width: auto;
  }
  .toolbar .grow {
    display: none;
  }
  .step {
    padding: 6px 10px;
  }
  .actions button {
    flex: 1 1 auto;
  }
  .timeline {
    padding: 8px;
  }
  .timeline .axis {
    padding-left: 110px;
    padding-right: 52px;
  }
  .trow {
    grid-template-columns: 110px minmax(0, 1fr) 52px;
    height: 24px;
  }
  .details {
    padding: 8px;
  }
  .details th {
    padding-right: 10px;
  }
}