:root {
  color-scheme: light dark;
  --control-bg: #f8fafc;
  --control-active: #eef4ff;
  --control-shadow: 0 10px 24px rgba(23, 32, 51, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1020;
    --paper: #111827;
    --text: #edf2ff;
    --muted: #a6b0c3;
    --line: #2b3547;
    --soft-line: #243044;
    --bad: #ff6678;
    --good: #4ade80;
    --warn: #facc15;
    --control-bg: #172033;
    --control-active: #102a55;
    --control-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  }
}

:root[data-theme="dark"] {
  --bg: #0b1020;
  --paper: #111827;
  --text: #edf2ff;
  --muted: #a6b0c3;
  --line: #2b3547;
  --soft-line: #243044;
  --bad: #ff6678;
  --good: #4ade80;
  --warn: #facc15;
  --control-bg: #172033;
  --control-active: #102a55;
  --control-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

:root[data-theme="light"] {
  --control-bg: #f8fafc;
  --control-active: #eef4ff;
  --control-shadow: 0 10px 24px rgba(23, 32, 51, .08);
}

.dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.dashboard-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--soft-line);
  background: var(--control-bg);
  color: var(--text);
  box-shadow: var(--control-shadow);
  padding: 8px 10px;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
}

.language-choice,
.theme-choice {
  cursor: pointer;
}

.language-choice[aria-pressed="true"],
.theme-choice[aria-pressed="true"] {
  border-color: var(--sk);
  background: var(--control-active);
  color: var(--sk);
}

.flag-icon {
  display: inline-block;
  width: 1.25em;
  height: .84em;
  margin-right: .34em;
  vertical-align: -.09em;
  border: 1px solid rgba(0, 0, 0, .18);
  object-fit: cover;
  background: #fff;
}

.dashboard-control .flag-icon {
  margin-right: 0;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] header,
:root[data-theme="dark"] section,
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .compare-switch a,
:root[data-theme="dark"] .verdict-card {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .compare-switch a,
:root[data-theme="dark"] .track {
  background: #172033;
}

:root[data-theme="dark"] .compare-switch a.active {
  background: #102a55;
}

:root[data-theme="dark"] .meaning {
  background: #10203a;
  color: #dce7f8;
  border-color: #27476f;
}

:root[data-theme="dark"] .callout {
  background: #241d0f;
  border-color: #5b4514;
}

:root[data-theme="dark"] .callout h2 {
  color: #f5c96a;
}

:root[data-theme="dark"] .verdict {
  background: linear-gradient(180deg, #10281a, var(--paper));
  border-color: #245c36;
}

:root[data-theme="dark"] .sources {
  background: #17150f;
}

:root[data-theme="dark"] .line-chart {
  background: #101827;
}

:root[data-theme="dark"] strong,
:root[data-theme="dark"] footer strong,
:root[data-theme="dark"] a {
  color: #dbeafe;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) header,
  :root:not([data-theme="light"]) section,
  :root:not([data-theme="light"]) footer,
  :root:not([data-theme="light"]) .pill,
  :root:not([data-theme="light"]) .compare-switch a,
  :root:not([data-theme="light"]) .verdict-card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
  }

  :root:not([data-theme="light"]) .pill,
  :root:not([data-theme="light"]) .compare-switch a,
  :root:not([data-theme="light"]) .track {
    background: #172033;
  }

  :root:not([data-theme="light"]) .compare-switch a.active {
    background: #102a55;
  }

  :root:not([data-theme="light"]) .meaning {
    background: #10203a;
    color: #dce7f8;
    border-color: #27476f;
  }

  :root:not([data-theme="light"]) .callout {
    background: #241d0f;
    border-color: #5b4514;
  }

  :root:not([data-theme="light"]) .callout h2 {
    color: #f5c96a;
  }

  :root:not([data-theme="light"]) .verdict {
    background: linear-gradient(180deg, #10281a, var(--paper));
    border-color: #245c36;
  }

  :root:not([data-theme="light"]) .sources {
    background: #17150f;
  }

  :root:not([data-theme="light"]) .line-chart {
    background: #101827;
  }

  :root:not([data-theme="light"]) strong,
  :root:not([data-theme="light"]) footer strong,
  :root:not([data-theme="light"]) a {
    color: #dbeafe;
  }
}