:root {
  color-scheme: light dark;
  --fg: #3a3a08;
  --bg: #dde37f;
  --band: #a7ae2a;
  --field: #dde37f;
}

/* data-theme is set by the night mode button and overrides the system preference */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fg: #e4ea96;
  --bg: #1d1f08;
  --band: #4f5414;
  --field: #2a2d0c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg: #e4ea96;
    --bg: #1d1f08;
    --band: #4f5414;
    --field: #2a2d0c;
  }
}

body {
  margin: 0;
  padding: 16px;
  font-family: system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.wheel {
  color: var(--fg);
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.wheel > circle,
.wheel > line.ring,
.wheel .badge {
  stroke: var(--fg);
  stroke-width: 3;
}

.wheel .band {
  fill: var(--band);
}

.wheel .field,
.wheel .badge {
  fill: var(--field);
}

.wheel .badge {
  stroke-width: 2.5;
}

.wheel .anchor {
  fill: #fff;
  stroke-width: 1.5;
}

svg text {
  fill: var(--fg);
  text-anchor: middle;
  dominant-baseline: central;
}

.error {
  color: #c0392b;
}

/* Asset SVGs carry black ink; follow the theme */
.wheel svg [fill="#000000"] {
  fill: currentColor;
}

.wheel svg [stroke="#000000"] {
  stroke: currentColor;
}

.place {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.results button {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--field);
  border: 1px solid var(--band);
  padding: 4px 8px;
  cursor: pointer;
}

.results button:hover,
.results button:focus-visible {
  background: var(--band);
}

.search {
  display: flex;
  gap: 4px;
}