/* gocov design system — tokens + components. No build step; served embedded. */
:root {
  --bg: #f6f8fa; --surface: #ffffff; --surface2: #f6f8fa;
  --border: #d0d7de; --border-soft: #e6e9ed;
  --text: #1f2328; --text-2: #59636e; --text-3: #8b949e;
  --accent: #0e7a9e; --accent-strong: #0b6786; --accent-soft: #e3f2f8;
  --green: #1a7f37; --green-soft: #dafbe1;
  --yellow: #9a6700; --yellow-soft: #fff8c5;
  --red: #cf222e; --red-soft: #ffebe9;
  --nav: #1c2733; --nav-text: #cdd9e5;
  --radius: 8px; --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(31, 35, 40, .08);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --surface: #161b22; --surface2: #1c2128;
    --border: #30363d; --border-soft: #262c34;
    --text: #e6edf3; --text-2: #9198a1; --text-3: #6e7681;
    --accent: #58b7d6; --accent-strong: #7cc7e0; --accent-soft: #12303c;
    --green: #3fb950; --green-soft: #12271c;
    --yellow: #d29922; --yellow-soft: #2e2712;
    --red: #f85149; --red-soft: #331c1e;
    --nav: #010409; --nav-text: #9198a1;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* top navigation */
.nav { background: var(--nav); color: var(--nav-text); display: flex; align-items: center;
  gap: 20px; padding: 0 20px; height: 52px; }
.nav .logo { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 15px; }
.nav .logo .mark { width: 22px; height: 22px; display: block; }
.nav a.item { color: var(--nav-text); font-size: 13.5px; padding: 4px 2px; }
.nav a.item.active { color: #fff; font-weight: 600; }
.nav .spacer { flex: 1; }
.nav .nav-user { color: var(--nav-text); font-size: 13px; }
.nav .nav-logout { margin: 0; }
.nav .nav-logout .btn { background: transparent; color: var(--nav-text); border-color: var(--nav-text);
  padding: 4px 10px; font-size: 12.5px; }
.crumbs { color: var(--text-2); font-size: 13px; margin: 18px 0 6px; }
.crumbs code { font-family: var(--mono); }

/* open-UI notice shown while sign-in is not configured */
.banner { display: flex; align-items: baseline; gap: 12px; padding: 9px 20px; font-size: 13px;
  background: var(--yellow-soft); color: var(--yellow); border-bottom: 1px solid var(--border); }
.banner code { font-family: var(--mono); font-size: 12px; }
.banner-close { margin-left: auto; background: none; border: none; color: inherit;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }

/* login page */
.login { display: flex; justify-content: center; padding: 9vh 0 6vh; }
.login-card { max-width: 400px; width: 100%; padding: 30px 32px 26px; }
.login-mark { display: block; width: 32px; height: 32px; margin-bottom: 18px; }
.login-card h1 { margin: 0 0 6px; font-size: 20px; }
.login-card .sub { margin: 0 0 22px; font-size: 13.5px; }
.login-card .notice { margin: 0 0 18px; }
.providers { display: grid; gap: 8px; }
.btn.provider { width: 100%; justify-content: flex-start; gap: 10px; padding: 10px 13px; font-size: 14px; }
.btn.provider:hover { background: var(--surface2); border-color: var(--text-3); }
.btn.provider .pmark { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid;
  place-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #fff; }
.btn.provider .pmark svg { width: 13px; height: 13px; display: block; fill: currentColor; }
.pmark { background: var(--text-3); }
.pmark-github { background: var(--nav); }
.pmark-bitbucket { background: var(--accent); }
.pmark-gitlab { background: var(--yellow); }
.login-foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft);
  color: var(--text-2); font-size: 12.5px; }
.login-workspaces { margin-top: 18px; }
.notice { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; text-align: left; }
.notice.fail { background: var(--red-soft); color: var(--red); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 8px 20px 48px; }
h1 { font-size: 22px; margin: 14px 0 4px; }
h1 small { color: var(--text-2); font-weight: 400; font-size: 14px; }
h2 { font-size: 16px; margin: 26px 0 10px; }
.sub { color: var(--text-2); margin: 0 0 18px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow-x: auto; }
/* prose cards (workspace settings, onboarding): padded content, stacked
   with breathing room */
.card.pad { padding: 2px 20px 18px; margin-bottom: 16px; }
.card.pad h2:first-child { margin-top: 20px; }

/* stat summary row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 22px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.stat .k { color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 13px; font-weight: 400; color: var(--text-2); }
.stat .v.chips { font-size: 15px; padding-top: 6px; }

/* tables */
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; color: var(--text-2); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--border); }
td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td code, .mono { font-family: var(--mono); font-size: 12.5px; }
/* Profile paths can be arbitrarily long with no natural break points
   (CI temp dirs, nuget caches); let them wrap anywhere so the table
   never forces the card wider than the page. The path column keeps a
   floor so narrow screens scroll the card instead of crushing the
   path into a one-character-per-line strip. The floor is scoped to
   path cells — other first columns (commit SHA, repo slug, workspace)
   are short and were being padded to 220px for no reason, pushing the
   table wider than the card and making it scroll sideways. */
td code, td .mono, td.mono { overflow-wrap: anywhere; }
td.path { min-width: 220px; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; }
.empty { color: var(--text-2); padding: 28px; text-align: center; }

/* coverage bar */
.cov { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.cov .track { flex: 1; display: block; height: 8px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.cov .fill { display: block; height: 100%; border-radius: 4px; }
.cov .pct { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; min-width: 48px; text-align: right; }
.fill.good { background: var(--green); } .fill.warn { background: var(--yellow); } .fill.bad { background: var(--red); }
.pct.good { color: var(--green); } .pct.warn { color: var(--yellow); } .pct.bad { color: var(--red); }

/* trend chart */
.trend-card { margin-bottom: 14px; padding: 8px 6px 2px; }
.trend { display: block; width: 100%; height: auto; }
.trend .line { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.trend .grid { stroke: var(--border-soft); stroke-dasharray: 3 4; }
.trend .pt { fill: var(--accent); }
.trend .pt.fail { fill: var(--red); }
.trend a:hover .pt { stroke: var(--accent-strong); stroke-width: 3; }
.trend a:hover .pt.fail { stroke: var(--red); }
.trend .lbl { fill: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.trend .cur { fill: var(--text); font-weight: 600; font-size: 12px; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 2px 10px; line-height: 18px;
  white-space: nowrap; }
.chip.pass { background: var(--green-soft); color: var(--green); }
.chip.fail { background: var(--red-soft); color: var(--red); }
.chip.info { background: var(--accent-soft); color: var(--accent); }
.chip.plain { background: var(--surface2); color: var(--text-2); border: 1px solid var(--border-soft); }
.delta { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); } .delta.flat { color: var(--text-3); }

/* controls */
.toolbar { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.toolbar .spacer { flex: 1; }
.input, select.input { background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 12px; font-size: 13.5px; min-width: 220px; }
select.input { min-width: 160px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13.5px;
  font-weight: 550; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; }
.pagination .btn { padding: 5px 11px; font-size: 12.5px; }
.pagination .btn[disabled] { opacity: .45; cursor: default; }

/* badge embed box */
.badgebox { display: flex; align-items: center; gap: 12px; background: var(--surface2);
  border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; }

/* uncovered ranges */
.uncov { font-family: var(--mono); font-size: 12px; color: var(--red); }

.htmx-request { opacity: .55; transition: opacity .15s; }

/* source view */
.code { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; }
.codeline { display: grid; grid-template-columns: 52px 44px 1fr; }
.codeline .ln { text-align: right; padding-right: 12px; color: var(--text-3); user-select: none; }
.codeline .hits { text-align: right; padding-right: 10px; font-size: 11px; color: var(--text-3); }
.codeline pre { margin: 0; padding: 0 14px 0 10px; white-space: pre; }
.codeline.hit { background: color-mix(in srgb, var(--green) 9%, transparent); box-shadow: inset 3px 0 var(--green); }
.codeline.hit .hits { color: var(--green); font-weight: 600; }
.codeline.miss { background: color-mix(in srgb, var(--red) 10%, transparent); box-shadow: inset 3px 0 var(--red); }
.codeline.miss .hits { color: var(--red); font-weight: 700; }

/* narrow screens */
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cov { min-width: 120px; }
  .badgebox { flex-wrap: wrap; }
}