:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --border: #d0d7de;
  --header-bg: #006aa7; /* Swedish blue */
  --header-text: #ffffff;
  --row-alt: #f4f7fa;
  --muted: #57606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --text: #e6e6e6;
    --border: #30363d;
    --header-bg: #004b7a;
    --row-alt: #1b1f24;
    --muted: #9da7b1;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  text-align: left;
}

th {
  background: var(--header-bg);
  color: var(--header-text);
}

tbody tr:nth-child(even) {
  background: var(--row-alt);
}

h1 {
  margin-top: 0;
}

h2 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.lead {
  margin-top: 0;
}

.number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tbody th {
  font-weight: normal;
  background: none;
  color: inherit;
}

.source {
  color: var(--muted);
  font-size: 0.85rem;
}

/* A note under the municipal table, e.g. on company cars. */
.note {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--header-bg);
  background: var(--row-alt);
  font-size: 0.9rem;
}

.note p {
  margin: 0;
}

.note p + p {
  margin-top: 0.25rem;
}

/* The explanations under each table, collapsed until opened. */
.about {
  margin-top: 0.75rem;
}

.about summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}

.about .source {
  margin-top: 0.5rem;
}

/* Checkboxes for the optional columns, which start hidden. */
.column-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0;
  padding: 0;
  border: 0;
  font-size: 0.9rem;
}

.column-toggles legend {
  float: left;
  margin-right: 0.25rem;
  padding: 0;
  color: var(--muted);
}

.column-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.hide-2 tr > :nth-child(2),
.hide-3 tr > :nth-child(3),
.hide-4 tr > :nth-child(4),
.hide-5 tr > :nth-child(5),
.hide-6 tr > :nth-child(6),
.hide-7 tr > :nth-child(7),
.hide-8 tr > :nth-child(8),
.hide-9 tr > :nth-child(9),
.hide-10 tr > :nth-child(10) {
  display: none;
}

/* The national table has six columns: headings wrap and, on narrow screens,
   the table scrolls sideways with the year kept in view. */
.scroll {
  overflow-x: auto;
}

.scroll th,
.scroll td {
  padding: 0.5rem 0.75rem;
}

.scroll td {
  white-space: nowrap;
}

.scroll th:first-child {
  position: sticky;
  left: 0;
}

.scroll tbody th {
  background: var(--bg);
}

.scroll tbody tr:nth-child(even) th {
  background: var(--row-alt);
}

@media (max-width: 30rem) {
  th,
  td {
    padding: 0.5rem;
  }

  table {
    font-size: 0.9rem;
  }
}

.pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0;
}

.picker {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.picker select,
.picker input {
  max-width: 20rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.missing {
  color: var(--muted);
}

/* The asterisk on estimated figures. */
td abbr[title] {
  text-decoration: none;
  cursor: help;
}

/* The highest number in each column. */
td.highest {
  font-weight: 700;
}