/* Shared DMI surfaces and semantic colours for the app and standalone help. */
:root {
  color-scheme: dark;
  --bg: #202428;
  --card: #292e34;
  --inner: #343b43;
  --line: #7f8c9c;
  --line-soft: #424c58;
  --text: #f0f3f7;
  --muted: #c1cbd8;
  --faint: #b2bdcb;
  --blue: #2C5EAA;
  --blue-hi: #a4c5f3;
  --blue-dim: #253b58;
  --blue-hover: #224d8e;
  --blue-glow: rgb(164 197 243 / 24%);
  --on-blue: #fff;
  --amber: #f4c57f;
  --green: #7bd49b;
  --red: #ffaaa7;
  --brand-red: #B71918;
  --header-bg: var(--card);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --card: #fff;
  --inner: #edf1f6;
  --line: #7d8997;
  --line-soft: #d0d8e3;
  --text: #242e3b;
  --muted: #45546a;
  --faint: #536176;
  --blue-hi: #2C5EAA;
  --blue-dim: #e0eafb;
  --blue-glow: rgb(44 94 170 / 20%);
  --amber: #87520c;
  --green: #21733e;
  --red: #9f2426;
}
html { background: var(--bg); }
body { display: flex; flex-direction: column; min-height: 100vh; }
.brand-logo { display: block; height: 2rem; width: auto; margin: .35rem .6rem .35rem 0; }
.brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="light"] .brand-logo-light { display: block; }
.theme-picker {
  display: flex;
  gap: .2rem;
}
.theme-picker button {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: .5rem;
  border: 1px solid transparent;
  border-radius: 50%;
  font: 500 .76rem/1.25 Montserrat, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
}
.theme-icon { display: block; width: 24px; height: 24px; fill: currentColor; }
.theme-picker button:hover { background: var(--inner); color: var(--text); border-color: transparent; }
.theme-picker button[aria-pressed="true"] {
  background: var(--blue-dim);
  color: var(--blue-hi);
}
.header-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
}
.header-icon:hover { background: var(--inner); color: var(--text); }
.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1rem;
  padding: 1rem 1.6rem;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--muted);
  font-size: .78rem;
}
.app-footer a { color: var(--blue-hi); }
.app-version { white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--blue-hi);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .theme-picker button[aria-pressed="true"] { border-color: Highlight; }
}