.graph-tabs a { text-decoration: none; }

.covid-dashboard {
  position: relative;
  left: 50%;
  width: calc(100vw - 2rem);
  max-width: none;
  transform: translateX(-50%);
  margin: 1.5rem 0 0.5rem;
}

.covid-chart {
  padding: 1rem 1rem 0.5rem;
  border: 2px solid var(--color-sketch);
  border-radius: 18px 12px 20px 14px / 14px 20px 12px 18px;
  background: color-mix(in srgb, var(--color-ink) 4%, var(--color-paper));
}

#graph { height: auto; margin: 0.75rem 0 0.25rem; }
#graph-canvas { width: 100%; height: 360px; display: block; }

.covid-table-wrap {
  overflow: auto;
  max-height: min(70vh, 42rem);
  margin-top: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
  -webkit-overflow-scrolling: touch;
}

.covid-table-wrap table {
  display: table;
  width: max-content;
  min-width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.covid-table-wrap th,
.covid-table-wrap td {
  white-space: nowrap;
}

.covid-table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.covid-table-wrap th {
  background: var(--color-paper);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.covid-table-wrap th:first-child,
.covid-table-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-paper);
}

.covid-table-wrap thead th:first-child { z-index: 4; }

#tooltip {
  z-index: 20;
  background: var(--color-paper);
  position: absolute;
  border: 2px solid var(--color-sketch);
  border-radius: 10px 14px 8px 12px / 12px 8px 14px 10px;
  padding: 0.55rem 0.7rem;
  box-shadow: 4px 8px 18px rgb(22 21 19 / 0.16);
}