:root {
  --fg: #1a1a1a;
  --bg: #fafafa;
  --muted: #666;
  --line: #ddd;
  --accent: #0a58c2;
  --hl: #fff7d1;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); }
header { padding: 12px 20px; border-bottom: 1px solid var(--line); background: #fff; display: flex; align-items: baseline; gap: 16px; }
header h1 { margin: 0; font-size: 16px; font-weight: 600; }
header .status { color: var(--muted); font-size: 12px; font-family: var(--mono); }
header .header-actions { margin-left: auto; display: inline-flex; gap: 8px; }
header button { font: inherit; padding: 4px 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
nav { display: flex; border-bottom: 1px solid var(--line); background: #fff; padding: 0 20px; }
nav button { font: inherit; background: none; border: none; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); }
nav button.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
main { padding: 16px 20px; }
.pane { display: none; }
.pane.active { display: block; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { background: #f4f4f4; font-weight: 600; cursor: pointer; user-select: none; }
th.sorted { color: var(--accent); }
tr:hover { background: #fafafa; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.pill { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #eef; color: #225; font-size: 11px; margin-left: 4px; }
.pill.core-active { background: #d4f0d4; color: #0a4a0a; }
.pill.core-lts { background: #ffe8c8; color: #6a4400; }
.pill.core-unsupported { background: #eee; color: #444; }
.pill.core-unknown { background: #e8e8ff; color: #303070; }
.pill.older { background: #eee; color: #444; }
a.ext { color: var(--accent); text-decoration: none; font-size: 12px; margin-left: 6px; }
a.ext:hover { text-decoration: underline; }
input, select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); background: #fff; }
input[type=search] { width: 360px; }
.tree { font-family: var(--mono); font-size: 12.5px; }
.tree details { margin-left: 14px; }
.tree summary { cursor: pointer; padding: 1px 0; list-style: none; }
.tree summary::before { content: "▸ "; color: var(--muted); }
.tree details[open] > summary::before { content: "▾ "; }
.tree .leaf { padding: 1px 0 1px 16px; color: #333; }
.tree .cycle, .tree .dedup { color: var(--muted); font-style: italic; }
.tree .err { color: #b00; }
.tree mark { background: var(--hl); }
.controls { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.reverse-result { margin: 8px 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.reverse-result > summary {
  padding: 8px 12px; cursor: pointer; font-size: 14px; user-select: none;
  list-style: none;
}
.reverse-result > summary::-webkit-details-marker { display: none; }
.reverse-result > summary::before { content: "▸ "; color: var(--muted); display: inline-block; width: 14px; }
.reverse-result[open] > summary::before { content: "▾ "; }
.reverse-result[open] > summary { border-bottom: 1px solid var(--line); }
.reverse-result > .reverse-hit:first-of-type { margin-top: 4px; }
.reverse-result > * { padding-left: 12px; padding-right: 12px; }
.reverse-hit { padding: 6px 0; border-bottom: 1px dotted var(--line); }
.reverse-paths { margin: 4px 0 4px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.7; }
.reverse-path { color: #444; }
.reverse-path .arrow { color: var(--muted); margin: 0 4px; }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.deprecated { color: #b00; }
details.section > summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
tr.group-row { cursor: pointer; }
tr.group-row:hover { background: #f0f0f0; }
tr.group-row td:first-child::before { content: "▸ "; color: var(--muted); display: inline-block; width: 14px; }
tr.group-row.open td:first-child::before { content: "▾ "; }
tr.version-row { background: #fbfbfb; }
tr.version-row td:first-child { padding-left: 28px; color: var(--muted); }
tr.version-row { display: none; }
tr.version-row.visible { display: table-row; }
button.version-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 2px;
}
button.version-link:hover { text-decoration-style: solid; }

/* Inventory-build loading banner — prominent so users don't wonder if it's broken. */
.loading-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; background: #fff8d6; border-bottom: 1px solid #e5d99e;
  font-size: 14px;
}
.loading-banner.hidden { display: none; }
.loading-banner .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid #d8c87a; border-top-color: #6a4400;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
/* Header-inline spinner, used inside #status next to the pill text. */
#status .spinner {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
  opacity: 0.75;
}
/* Header-inline progress bar. Shown while work is in flight; hidden
   when settled. Width grows with the build's done/total. */
#status #status-progress-track {
  display: inline-block;
  width: 80px; height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-left: 8px;
  vertical-align: middle;
}
#status #status-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: currentColor;
  opacity: 0.5;
  transition: width 0.3s ease-out;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-banner .loading-text { flex: 1; min-width: 220px; }
.loading-banner .loading-headline { font-weight: 600; color: #4a3000; }
.loading-banner .loading-detail   { color: #6a4400; font-family: var(--mono); font-size: 12.5px; margin-top: 2px; }
.loading-banner .progress-track {
  flex: 2; max-width: 360px; height: 8px; background: #efe0a3; border-radius: 4px; overflow: hidden;
}
.loading-banner .progress-fill {
  height: 100%; width: 0%; background: #c08a00;
  transition: width 200ms ease-out;
}
.pane.dimmed { opacity: 0.35; pointer-events: none; }

/* Warning/error banners — flagged failures so partial data doesn't pass for clean. */
.alert-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 20px; font-size: 13px; border-bottom: 1px solid;
}
.alert-banner.hidden { display: none; }
.alert-banner.warning { background: #fff5e0; border-color: #f0c074; color: #6a3a00; padding: 6px 20px; font-size: 12.5px; }
.alert-banner.error   { background: #ffe2e2; border-color: #d88080; color: #7a0000; }
.alert-banner .alert-icon { font-size: 18px; line-height: 1; padding-top: 1px; }
.alert-banner .alert-body { flex: 1; }
.alert-banner h4 { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; }
.alert-banner ul { margin: 4px 0 0 16px; padding: 0; }
.alert-banner li { margin: 1px 0; font-family: var(--mono); font-size: 12px; }
.alert-banner button {
  align-self: center; font: inherit; padding: 2px 10px;
  border: 1px solid currentColor; background: transparent; cursor: pointer; color: inherit;
}
.alert-banner.warning details { font-size: 12px; }
.alert-banner.warning details ul { max-height: 200px; overflow-y: auto; }
.row-warn { color: #b06700; font-weight: 600; cursor: help; margin-left: 4px; }

/* Release-freshness coloring. Hover the cell to see the absolute date. */
.rt-fresh   { color: #0a4a0a; }                   /* < 60 days */
.rt-aging   { color: #6a4400; }                   /* 60-180 days */
.rt-stale   { color: #8a3000; font-weight: 600; } /* 180-365 days */
.rt-ancient { color: #8a0000; font-weight: 600; } /* > 1 year */
.rt-unknown { color: var(--muted); font-style: italic; }
.rt-abs { font-size: 10.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; }

/* Dep history (timeline) */
.tl-entry { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.tl-head { margin-bottom: 4px; }
.tl-added   { color: #0a4a0a; font-family: var(--mono); font-size: 12px; padding: 1px 0; }
.tl-removed { color: #8a0000; font-family: var(--mono); font-size: 12px; padding: 1px 0; }
.tl-bumped  { color: #6a4400; font-family: var(--mono); font-size: 12px; padding: 1px 0; }
.tl-skipped { padding: 4px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: #fafafa; border-bottom: 1px solid var(--line); }
.tl-entry-unchanged { background: #fafafa; }
.tl-entry-unchanged .tl-head { color: var(--muted); }
.tl-unchanged { font-family: var(--mono); font-size: 12px; color: var(--muted); font-style: italic; padding: 1px 0; }
.tl-unpublished {
  color: #8a0000; font-family: var(--mono); font-size: 12px; padding: 4px 0;
  background: #ffeaea; border-left: 3px solid #b00; padding-left: 8px; margin: 4px 0;
}
.tl-entry-recon { background: #fffbe6; }
.tl-entry-recon .tl-head { border-left: 3px solid #d4a000; padding-left: 8px; margin-left: -8px; }
.tl-recon {
  font-size: 11.5px; color: #6a4400; background: #fff5d0; padding: 4px 8px;
  margin: 4px 0; border-radius: 3px;
}
details.tl-major-group { margin: 8px 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
details.tl-major-group > summary {
  padding: 8px 12px; cursor: pointer; user-select: none; list-style: none;
  background: #f4f4f4;
}
details.tl-major-group > summary::-webkit-details-marker { display: none; }
details.tl-major-group > summary::before { content: "▸ "; color: var(--muted); display: inline-block; width: 14px; }
details.tl-major-group[open] > summary::before { content: "▾ "; }
details.tl-major-group[open] > summary { border-bottom: 1px solid var(--line); }

/* Threat scan pills */
.pill.threat { background: #ffd4d4; color: #8a0000; font-weight: 600; }
.pill.threat-mal { background: #b00020; color: #fff; font-weight: 600; }

/* Hide the release-line column (header + per-row cell) and its filter
   dropdown for orgs whose RELEASE_LINE_COLUMN.show is false. Toggled by
   applyOrgMatrixMeta() based on the /api/packages response.
   Selector is intentionally scoped to thead and tr.group-row: version-row
   expansions use td:nth-child(3) as a colspan=6 details cell, not as the
   release-line column, and must NOT be hidden. */
#matrix-table.hide-release-line-column thead th:nth-child(3),
#matrix-table.hide-release-line-column tr.group-row > td:nth-child(3) { display: none; }
.hide-release-line-filter { display: none; }