/*
 * Hercules QA results.
 *
 * Palette and type are the corporate tokens from packages/ui (copied, not imported): Graphik
 * 400/600/900, the ink ladder, purple for structure, green/red only for pass/fail. This page is
 * dark-only — a results board, not a client surface — and Graphik has no 700 cut, so weights
 * below are 400, 600 or 900.
 */

@font-face {
  font-family: "Graphik";
  src: url("brand/fonts/graphik-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("brand/fonts/graphik-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("brand/fonts/graphik-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #08080A;
  --surface: #101216;
  --raised: #16191F;
  --sunken: #000000;
  --chrome: #1F2429;
  --overlay: rgba(0, 0, 0, .72);

  --line: #2E3238;
  --line-strong: #676767;
  --line-subtle: #1F2429;

  --text: #FFFFFF;
  --dim: #C5C5C5;
  --muted: #9B9B9B;
  --on-accent: #FFFFFF;

  --accent: #A768FF;
  --accent-solid: #8127FF;
  --accent-wash: #190C2C;
  --focus: #BA88FF;

  --pos: #2FC08A;  --pos-wash: #0E2A22;
  --neg: #FF5C6C;  --neg-wash: #33161C;
  --warn: #F5A524; --warn-wash: #2E2210;
  --info: #4FB6E8; --info-wash: #0F2733;

  --s2: 4px; --s3: 6px; --s4: 8px; --s5: 12px;
  --s6: 16px; --s7: 20px; --s8: 24px; --s9: 32px; --s10: 40px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;

  --ui: "Graphik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --elev-1: 0 0 0 1px var(--line);
  --elev-2: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, .45);
  --elev-3: 0 0 0 1px var(--line), 0 24px 64px rgba(0, 0, 0, .60);

  --fast: 140ms cubic-bezier(.2, 0, .38, .9);
  --max: 1280px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
b, strong, th, h1, h2, h3, h4 { font-weight: 600; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--text);
  font: 400 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* ── Header ──────────────────────────────────────────────────────────────── */

.top {
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s7) var(--s8) var(--s6);
  display: grid;
  gap: var(--s6);
}
.brand-row {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
.mark {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--accent-solid);
  color: var(--on-accent);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.mark svg { width: 16px; height: 16px; display: block; }
.product {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}
.subject {
  margin: 0;
  color: var(--dim);
  font-size: 14px;
  font-weight: 400;
  flex: 1 1 16rem;
  min-width: 0;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--raised);
  color: var(--muted);
  border: 1px solid var(--line);
}
.status-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-chip.passed { background: var(--pos-wash); color: var(--pos); border-color: transparent; }
.status-chip.failed { background: var(--neg-wash); color: var(--neg); border-color: transparent; }
.status-chip.empty { background: var(--raised); color: var(--muted); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s8);
  margin: 0;
}
.meta div { display: grid; gap: 1px; }
.meta dt {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.meta dd.sha { font-family: var(--mono); font-size: 12px; color: var(--text); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.tablist-wrap {
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tablist {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s8);
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
}
.tab {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  padding: var(--s5) var(--s5);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 13px;
  white-space: nowrap;
  transition: color var(--fast), border-color var(--fast);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab .count {
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.tab[aria-selected="true"] .count { color: var(--dim); }
.tab.has-fail .count { color: var(--neg); }

/* ── Body ────────────────────────────────────────────────────────────────── */

main {
  flex: 1 1 auto;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: var(--s8);
}
.panel { display: grid; gap: var(--s8); }
.panel[hidden] { display: none; }

.banner {
  padding: var(--s6) var(--s7);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--elev-1);
  color: var(--dim);
  font-size: 13px;
}
.banner.empty { background: var(--raised); color: var(--muted); }
.banner.failed { background: var(--neg-wash); color: var(--neg); }
.banner.passed { background: var(--pos-wash); color: var(--pos); }

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
}
@media (max-width: 800px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tile {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  padding: var(--s6);
  display: grid;
  gap: var(--s2);
  min-width: 0;
}
.tile .k {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile .v {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tile.pos .v { color: var(--pos); }
.tile.neg .v { color: var(--neg); }
.tile .m { font-size: 11px; color: var(--muted); }

.card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.card > header {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.card > header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--dim);
}
.card .body { padding: var(--s6); }
.card .body.flush { padding: 0; }

.group {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.group > summary,
.group-head {
  list-style: none;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--fast);
}
.group[open] > summary::before { transform: rotate(45deg); }
.group-title { flex: 1 1 auto; }
.group-meta { color: var(--muted); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--raised);
  color: var(--dim);
}
.badge.passed { background: var(--pos-wash); color: var(--pos); }
.badge.failed { background: var(--neg-wash); color: var(--neg); }
.badge.skipped { background: var(--warn-wash); color: var(--warn); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  text-align: left;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: 8px var(--s6);
  border-bottom: 1px solid var(--line-subtle);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--raised); }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
td.file { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
td.name { font-weight: 400; }

.empty {
  padding: var(--s9);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Failures ────────────────────────────────────────────────────────────── */

.fail-list { display: grid; gap: var(--s5); }
.fail-card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  padding: var(--s6) var(--s7);
  display: grid;
  gap: var(--s4);
  border-left: 3px solid var(--neg);
}
.fail-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.fail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  font-size: 12px;
  color: var(--muted);
}
.fail-meta .file { font-family: var(--mono); color: var(--dim); }
.error, .stack {
  margin: 0;
  padding: var(--s5);
  background: var(--sunken);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
  color: var(--dim);
  max-height: 16rem;
}
.error { color: var(--neg); }

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.surface-layout {
  display: grid;
  gap: var(--s8);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s5);
}
.shot {
  appearance: none;
  border: 0;
  padding: 0;
  background: var(--sunken);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--elev-1);
  text-align: left;
  display: grid;
  min-width: 0;
}
.shot:hover { box-shadow: 0 0 0 1px var(--accent); }
.shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--sunken);
}
.shot figcaption, .shot .cap {
  padding: var(--s4) var(--s5);
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

dialog.lightbox {
  border: 0;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  max-width: min(1100px, calc(100vw - 32px));
  width: 1100px;
}
dialog.lightbox::backdrop { background: var(--overlay); }
.lightbox-inner { display: grid; }
.lightbox-inner img {
  width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  background: var(--sunken);
}
.lightbox-bar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-top: 1px solid var(--line);
}
.lightbox-bar .cap { flex: 1 1 auto; color: var(--dim); font-size: 13px; }
.lightbox-bar button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
.lightbox-bar button:hover { border-color: var(--line-strong); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .top-inner, .tablist, main { padding-left: var(--s6); padding-right: var(--s6); }
}

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