:root {
  color-scheme: light;
  --paper: #f5f2eb;
  --ink: #1c1b19;
  --muted: #6e6a62;
  --faint: #a8a398;
  --rule: #d8d3c8;
  --bar: #bdb7ab;
  --accent: #9e2a1f; /* only for critical severity and the urgent share */
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.5 var(--serif);
}

main {
  width: min(1080px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 56px 0 64px;
}

h1, h2, h3, p { margin: 0; }

a {
  color: inherit;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
}

.source, h3, .legend, table { font-family: var(--mono); }
.source, h3 { font-size: 0.75rem; color: var(--muted); }

/* masthead: one number carries the page */
.masthead { padding-bottom: 40px; border-bottom: 2px solid var(--ink); }

h1 {
  margin-top: 20px;
  max-width: 16ch;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#total-cves { font-weight: 600; }
.dek { margin-top: 20px; max-width: 44ch; font-size: 1.2rem; color: #3c3a36; }
#status { margin-top: 12px; font: 0.8rem var(--mono); color: var(--accent); }
#status:empty { display: none; }

/* sections: a narrow rail for the point, the evidence beside it */
.section {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 20px 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}

/* wide tables scroll sideways inside their own column on small screens */
.section > div, .trio > div { min-width: 0; overflow-x: auto; }

h2 { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.takeaway { margin-top: 10px; font-size: 1rem; color: var(--muted); }
h3 { margin-bottom: 6px; font-weight: 500; }

/* this section has three tables, so they get the full width under the heading */
.section.wide .trio { grid-column: 1 / -1; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 32px; }

footer { padding-top: 28px; font-size: 0.85rem; color: var(--muted); }
footer p + p { margin-top: 8px; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }

th, td {
  padding: 6px 12px 6px 0;
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}

th { font-weight: 400; color: var(--muted); border-bottom-color: var(--ink); }
td.name { white-space: normal; font-family: var(--serif); font-size: 0.95rem; }

/* severity: one hue, stepped down by weight and tone instead of a rainbow */
.sev-critical { color: var(--accent); font-weight: 500; }
.sev-high { font-weight: 500; }
.sev-medium { color: #4a4741; }
.sev-low, .sev-na { color: var(--faint); }

/* a number with a thin bar after it */
.bar-cell { display: grid; grid-template-columns: 4.5ch 1fr; align-items: center; gap: 10px; min-width: 120px; }
.track { height: 6px; }
.bar { display: block; height: 100%; background: var(--ink); opacity: 0.55; }

/* domain x severity heatmap, one red ramp on paper */
.heatmap th, .heatmap td { text-align: right; padding-right: 10px; }
.heatmap th:first-child, .heatmap td:first-child { text-align: left; }
.heatmap td.heat { background: color-mix(in srgb, var(--accent) calc(var(--heat) * 85%), transparent); }
.heatmap td.hot { color: var(--paper); }

/* annual trend column chart */
.legend { margin-bottom: 14px; font-size: 0.72rem; color: var(--muted); }
.key { display: inline-block; width: 9px; height: 9px; margin: 0 6px 0 16px; }
.key:first-child { margin-left: 0; }
.key-all, .trend-bar { background: var(--bar); }
.key-urgent, .trend-urgent { background: var(--accent); }

.trend {
  display: flex;
  gap: 4px;
  height: 230px;
  padding: 0 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ink);
}

.trend-col { flex: 1; min-width: 22px; display: flex; flex-direction: column; }
.trend-track { flex: 1; display: flex; align-items: flex-end; padding-top: 18px; }
.trend-bar { position: relative; width: 100%; min-height: 1px; }
.trend-urgent { position: absolute; left: 0; right: 0; bottom: 0; }

.trend-value, .trend-year { text-align: center; font-family: var(--mono); color: var(--muted); }
.trend-value { position: absolute; bottom: 100%; left: -4px; right: -4px; margin-bottom: 3px; font-size: 0.62rem; }
.trend-year { margin: 6px 0 4px; font-size: 0.6rem; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  main { padding-top: 36px; }
  .section { grid-template-columns: minmax(0, 1fr); }
}