/* Design tokens, matching fynnbachmann.com: white, thin dividers, Roboto, rust accent */
:root {
  --bg: #fff;
  --text: #000;
  --text-light: #828282;
  --accent: #8c3e1d;
  --divider: rgba(0, 0, 0, 0.1);
  --font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.leaflet-container { font-family: var(--font); }

/* ── Header (like the site's navbar) ─────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  z-index: 1000;
}

header h1 { font-size: 1.25rem; font-weight: 300; white-space: nowrap; }
header h1 b { font-weight: 700; color: var(--accent); }

#repoLink { display: flex; margin-right: -6px; }
#repoLink:hover { opacity: 0.6; }

#status { margin-left: auto; font-size: 0.8rem; color: var(--text-light); }

/* Buttons are outlined; the active legend mode is filled with the accent color */
header button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 11px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
header button:hover { color: var(--accent); border-color: var(--accent); z-index: 1; }
header button.is-active,
header button.is-active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  z-index: 1;
}

.legend-modes { display: flex; }
.legend-modes button { border-radius: 0; margin-left: -1px; }
.legend-modes button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.legend-modes button:last-child { border-radius: 0 6px 6px 0; }

.header-actions { display: flex; gap: 6px; }

/* ── Map ─────────────────────────────────────────────────────────────────── */
#map { flex: 1; }

/* ── City panel (Leaflet control, top right) ─────────────────────────────── */
.city-panel {
  min-width: 220px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 3px;
}

.city-panel strong { display: block; font-size: 0.9rem; margin-bottom: 6px; }

.city-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.city-row input { cursor: pointer; accent-color: var(--accent); }
.city-row.is-ref .city-name { font-weight: 700; }

.city-name { flex: 1; }
.city-area { font-variant-numeric: tabular-nums; color: var(--text-light); white-space: nowrap; }
.city-empty { color: var(--text-light); font-size: 0.8rem; padding: 4px 0; }
.panel-hint { font-size: 0.72rem; color: var(--text-light); margin-top: 6px; }

/* Copy controls: − count + ; hidden except for + while there is a single instance */
.copies { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.copies button {
  width: 18px;
  height: 18px;
  font: inherit;
  line-height: 1;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.copies button:hover { color: var(--accent); border-color: var(--accent); }
.copies .count { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-light); }
.copies.single .count, .copies.single button[data-delta="-1"] { visibility: hidden; }

/* Color swatch is a native color input — clicking it opens the picker */
input.swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  flex-shrink: 0;
}
input.swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.swatch::-webkit-color-swatch,
input.swatch::-moz-color-swatch { border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px; }

#addCityForm { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--divider); }

#addCityInput {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  outline: none;
}
#addCityInput:focus { border-color: var(--accent); }
#addCityInput:disabled { background: #f0f0f0; color: var(--text-light); }