/* The quality dashboard, in the estate's skin: Albert Sans for everything that is read, Instrument Serif
   for the one sentence that is the verdict, the cream ground and ink of checkitout.app. Outcome colours
   are the only colour on the page: green passed, amber flaky, coral failed, grey skipped. */

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --ink: #0e1116;
  --muted: #4a4f5c;
  --rule: #e8e2d5;
  --rule-strong: #d6cfbf;
  --link: #1e3a8a;
  --spark: #1e3a8a;
  --pass: #047857;
  --pass-soft: #d9f4e7;
  --flaky: #b45309;
  --flaky-soft: #fdecc8;
  --fail: #b83a1f;
  --fail-soft: #ffd9cf;
  --incomplete: #64748b;
  --incomplete-soft: #e2e8f0;
  /* 5.1:1 on --bg. #8a8f9c reads as a quieter grey but lands at 3.2:1, which axe caught in the
     tier table's skipped column: a number nobody can read is not muted, it is missing. Measured
     against --bg rather than --surface, which is the tighter of the two and the one the table sits
     on; the first attempt at #6e7382 cleared white and missed --bg by 0.005. Still the quietest
     tone in the table next to --ink. */
  --skip: #656a79;
  --skip-soft: #e6e6e9;
  --empty: #efeae0;
  --focus: #1e3a8a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121a2b;
    --surface: #182238;
    --ink: #eef0f4;
    --muted: #a9b1c3;
    --rule: #2a3650;
    --rule-strong: #3a4763;
    --link: #a9bdf0;
    --spark: #a9bdf0;
    --pass: #3ddc97;
    --pass-soft: #113626;
    --flaky: #f5b02f;
    --flaky-soft: #3d2c06;
    --fail: #ff8f72;
    --fail-soft: #47190f;
    --incomplete: #94a3b8;
    --incomplete-soft: #1e293b;
    --skip: #8791a5;
    --skip-soft: #26304a;
    --empty: #1c2740;
    --focus: #a9bdf0;
  }
}

:root[data-theme="dark"] {
  --bg: #121a2b;
  --surface: #182238;
  --ink: #eef0f4;
  --muted: #a9b1c3;
  --rule: #2a3650;
  --rule-strong: #3a4763;
  --link: #a9bdf0;
  --spark: #a9bdf0;
  --pass: #3ddc97;
  --pass-soft: #113626;
  --flaky: #f5b02f;
  --flaky-soft: #3d2c06;
  --fail: #ff8f72;
  --fail-soft: #47190f;
  --incomplete: #94a3b8;
  --incomplete-soft: #1e293b;
  --skip: #8791a5;
  --skip-soft: #26304a;
  --empty: #1c2740;
  --focus: #a9bdf0;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  padding: 28px 24px 56px;
  max-width: 1080px;
  margin-inline: auto;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead */
.mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.mast__repo { font-weight: 600; color: var(--ink); text-decoration: none; }
.mast__repo:hover { text-decoration: underline; }
.mast__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.mast__nav a { color: var(--muted); text-decoration: none; }
.mast__nav a:hover { color: var(--ink); text-decoration: underline; }

/* The verdict: one sentence, the largest thing on the page */
.verdict { padding: 44px 0 20px; }
.verdict__text {
  margin: 0;
  max-width: 26ch;
  font: 400 clamp(30px, 4.4vw, 46px)/1.14 "Instrument Serif", Georgia, "Times New Roman", serif;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.verdict__text.is-empty { color: var(--muted); }
.verdict__meta { margin: 14px 0 0; max-width: 70ch; color: var(--muted); }

/* The ribbon: thirty bars, one per run */
.ribbon { padding: 8px 0 12px; }
.ribbon__bars { display: flex; align-items: flex-end; gap: 4px; height: 76px; }
.bar {
  flex: 1 1 0;
  min-width: 6px;
  border-radius: 2px 2px 0 0;
  background: var(--empty);
  transition: opacity 120ms;
}
.bar--pass { background: var(--pass); }
.bar--flaky { background: var(--flaky); }
/* A run that did not finish: grey, because neither green nor red would be true of it. */
.bar--incomplete { background: var(--incomplete); }
.bar--fail { background: var(--fail); }
.bar--empty { height: 8%; }
.ribbon__bars:hover .bar:not(:hover):not(.bar--empty) { opacity: 0.55; }
.ribbon__caption { margin: 10px 0 0; min-height: 1.5em; font-size: 14px; color: var(--muted); }

/* Tiles: one row of figures, divided by rules, no boxes */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tile { display: flex; flex-direction: column; padding: 18px 20px 16px 0; }
.tile + .tile { padding-left: 20px; border-left: 1px solid var(--rule); }
.tile__value { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.tile__label { margin-top: 4px; font-size: 14px; color: var(--muted); }
.spark { display: block; width: 120px; height: 32px; margin-top: auto; padding-top: 10px; color: var(--spark); overflow: visible; box-sizing: content-box; }
.spark--none { font-size: 12px; color: var(--skip); }

.tone-pass { color: var(--pass); }
.tone-flaky { color: var(--flaky); }
.tone-fail { color: var(--fail); }
.tone-skip { color: var(--skip); }

/* Sections and tables */
h2 { margin: 48px 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }
.lede { margin: 0 0 14px; max-width: 72ch; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 3fr 2fr; gap: 0 40px; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 12px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-size: 13px; font-weight: 500; color: var(--muted); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 600; border-bottom: 1px solid var(--rule-strong); }
td .file { display: block; margin-top: 2px; font: 12.5px/1.4 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; color: var(--muted); word-break: break-all; }
.note { margin: 12px 0 0; font-size: 14px; color: var(--muted); max-width: 72ch; }

/* The ten-run strip of one flaky test */
.strip { display: inline-flex; gap: 2px; vertical-align: middle; }
.strip i { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--skip-soft); }
.strip i.pass { background: var(--pass-soft); }
.strip i.flaky { background: var(--flaky); }
.strip i.fail { background: var(--fail); }

/* Reports */
.reports { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; }
.reports li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.reports small { display: block; color: var(--muted); font-size: 13px; }

.foot { margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); max-width: 80ch; }

@media (max-width: 560px) {
  body { padding: 20px 16px 40px; }
  .verdict { padding-top: 32px; }
  .tile { padding-right: 12px; }
  .tile + .tile { padding-left: 12px; }
  .tile__value { font-size: 24px; }
  .ribbon__bars { gap: 2px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }