:root {
  --bg: #f6f4ef;
  --ink: #2b2b2b;
  --muted: #7a7a7a;
  --ocean: #e4ecf1;
  --land: #c9c9c4;
  --land-hover: #b3b3ad;
  --visited: #3f9b5a;
  --visited-hover: #2f7f47;
  --border: #ffffff;
  --graticule: #d3dde3;
  --panel: #ffffff;
  --line: #e2e0da;
  --heat-1: #cfe8d5;
  --heat-2: #9fd2ac;
  --heat-3: #6bb881;
  --heat-4: #3f9b5a;
  --heat-5: #1f6b3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191b;
    --ink: #e8e6e1;
    --muted: #9a9a9a;
    --ocean: #1f2a31;
    --land: #4a4d50;
    --land-hover: #5d6064;
    --visited: #4fbf70;
    --visited-hover: #6fd38d;
    --border: #17191b;
    --graticule: #2a363e;
    --panel: #22262a;
    --line: #33383d;
    --heat-1: #2c4a35;
    --heat-2: #2f6b42;
    --heat-3: #3f9156;
    --heat-4: #5cb874;
    --heat-5: #9be0ae;
  }
}
:root[data-theme="dark"] {
  --bg: #17191b;
  --ink: #e8e6e1;
  --muted: #9a9a9a;
  --ocean: #1f2a31;
  --land: #4a4d50;
  --land-hover: #5d6064;
  --visited: #4fbf70;
  --visited-hover: #6fd38d;
  --border: #17191b;
  --graticule: #2a363e;
  --panel: #22262a;
  --line: #33383d;
  --heat-1: #2c4a35;
  --heat-2: #2f6b42;
  --heat-3: #3f9156;
  --heat-4: #5cb874;
  --heat-5: #9be0ae;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--visited-hover); }
h1 { font-size: 20px; margin: 0; letter-spacing: 0.02em; }
h2 { font-size: 15px; margin: 0; }
button {
  font: inherit;
  padding: 6px 14px;
  border: 1px solid var(--visited);
  border-radius: 8px;
  background: var(--visited);
  color: #fff;
  cursor: pointer;
}
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.link {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  width: 100%;
}
.flash {
  margin: 8px 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel);
  border-left: 4px solid var(--visited);
}

/* ---------- simple pages: login, password, admin ---------- */

.card {
  max-width: 380px;
  margin: 12vh auto 0;
  padding: 0 16px;
}
.card.wide { max-width: 520px; margin-top: 6vh; }
.card h1 { margin-bottom: 16px; }
.card .flash { margin: 0 0 16px; }
.card form { display: grid; gap: 12px; }
.card label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.users { list-style: none; padding: 0; margin: 0 0 20px; }
.users li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.users small { color: var(--muted); margin-left: 6px; }
.card form.inline { grid-template-columns: 1fr auto; align-items: end; }
.hint { color: var(--muted); font-size: 13px; }

/* ---------- the map page ---------- */

body.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.projection { display: flex; gap: 4px; }
.projection button {
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.projection button[aria-pressed="true"] { background: var(--visited); border-color: var(--visited); color: #fff; }
.account { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.account span { color: var(--muted); }
.account form { margin: 0; }
.account a, .account button.link { color: var(--ink); }

.layout { flex: 1; min-height: 0; display: flex; }
aside {
  width: 260px;
  flex: none;
  overflow-y: auto;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}
#people { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 4px; }
#people button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  text-align: left;
}
#people button:hover { background: var(--panel); }
#people button[aria-current="true"] { background: var(--visited); color: #fff; }
#people .count { opacity: 0.7; font-variant-numeric: tabular-nums; }
#list-title { color: var(--muted); font-weight: 600; margin-bottom: 8px; }
#visits { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
#visits .country-name { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
#visits .country-name span:last-child {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
#visits .flag { width: 24px; font-size: 17px; line-height: 1; flex: none; }
#visits p { margin: 2px 0 0 32px; color: var(--muted); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }

.layout main { position: relative; flex: 1; min-width: 0; }
#map { width: 100%; height: 100%; display: block; touch-action: none; }

#detail {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(340px, calc(100% - 32px));
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
  display: grid;
  gap: 10px;
}
[hidden] { display: none !important; }
#detail h2 { font-size: 17px; padding-right: 24px; }
#detail .close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 4px;
}
#detail .toggle { display: flex; align-items: center; gap: 8px; }
#detail .toggle input { width: auto; accent-color: var(--visited); }
#detail textarea { resize: vertical; }
#detail-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#detail-status { margin: 0; min-height: 1em; font-size: 12px; color: var(--muted); }

.sphere { fill: var(--ocean); }
.graticule { fill: none; stroke: var(--graticule); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.country, .dot {
  fill: var(--land);
  stroke: var(--border);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 120ms;
}
.country:hover, .dot:hover { fill: var(--land-hover); }
.visited { fill: var(--visited); }
.visited:hover { fill: var(--visited-hover); }
.dot { stroke-width: 1; }
.heat-1 { fill: var(--heat-1); }
.heat-2 { fill: var(--heat-2); }
.heat-3 { fill: var(--heat-3); }
.heat-4 { fill: var(--heat-4); }
.heat-5 { fill: var(--heat-5); }
.country[class*="heat-"]:hover, .dot[class*="heat-"]:hover { filter: brightness(0.9); }

#legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0;
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
#legend span { display: flex; align-items: center; gap: 5px; }
#legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--land); }
#legend i.heat-1 { background: var(--heat-1); }
#legend i.heat-2 { background: var(--heat-2); }
#legend i.heat-3 { background: var(--heat-3); }
#legend i.heat-4 { background: var(--heat-4); }
#legend i.heat-5 { background: var(--heat-5); }
#detail-text .visitor { display: block; }
#detail-text .visitor + .visitor { margin-top: 6px; }
#detail-text .visitor strong { margin-right: 6px; }
.selected { stroke: var(--ink); stroke-width: 1.5; }

/* phones: the people become a row of chips, the country list moves out */
@media (max-width: 700px) {
  .layout { flex-direction: column; }
  aside { width: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 16px; }
  #people { display: flex; overflow-x: auto; margin: 0; }
  #people button { gap: 8px; white-space: nowrap; }
  #list-title, #visits { display: none; }
  .projection { order: 3; }
}