/* Layout: full-bleed globe; masthead + legend float top-left, country panel docks right (bottom sheet on phones). */
:root {
  color-scheme: dark;
  --space: #070b12;
  --ink: #e9edf2;
  --muted: #8d98a8;
  --glass: rgba(12, 18, 28, 0.92);
  --line: rgba(160, 180, 205, 0.16);
  --l0: #3f9e6e;
  --l1: #e6c84a;
  --l2: #ef8f3a;
  --l3: #e2533b;
  --l4: #c3173a;
  --home: #5b6f8c;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Source Sans 3', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--space);
  color: var(--ink);
  font: 15px/1.5 var(--body);
  overflow: hidden;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--l1); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#globe { position: fixed; inset: 0; }

.masthead {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  z-index: 2;
}
h1 {
  margin: 0;
  font: 700 2.1rem/1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.sub { margin: -6px 0 0; color: var(--muted); font-size: 0.9rem; }

.legend {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  display: grid;
  gap: 1px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.legend li {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  line-height: 1.5;
}
.legend .swatch { width: 9px; height: 9px; border-radius: 2px; }
.legend .count { font: 400 0.68rem var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 6px; }

.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.lv0 { background: var(--l0); } .lv1 { background: var(--l1); } .lv2 { background: var(--l2); }
.lv3 { background: var(--l3); } .lv4 { background: var(--l4); } .lvh { background: var(--home); }

.search input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  color: var(--ink);
  font: inherit;
}
.results {
  list-style: none;
  margin: -6px 0 0;
  padding: 4px;
  max-height: 40vh;
  overflow-y: auto;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.results button {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.results button:hover, .results button:focus-visible { background: var(--line); }

.panel {
  position: fixed;
  top: calc(24px + var(--key-h, 80px) + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px));
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.panel[hidden] { display: none; }
.panel-body { overflow-y: auto; padding: 20px 22px 22px; min-height: 0; }
.close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.close:hover { color: var(--ink); background: var(--line); }

.panel h2 { margin: 0 36px 10px 0; font: 700 1.9rem/1.05 var(--display); text-transform: uppercase; text-wrap: balance; }
.verdict {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--line);
  font-weight: 600;
}
.verdict .swatch { margin-top: 4px; }
.meta { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; }
.meta time { font-family: var(--mono); font-size: 0.8rem; }
.change { margin: 12px 0 0; font-size: 0.9rem; }
.areas { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
.areas h3 { margin: 14px 0 4px; font: 600 1.05rem/1.2 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.areas p { margin: 6px 0; font-size: 0.92rem; }
.areas ul { margin: 4px 0 8px; padding-left: 20px; font-size: 0.92rem; }
.shown { margin-top: 14px; }
.shown h3 { margin: 0 0 6px; font: 600 1.05rem/1.2 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.shown ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.shown li { display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--line); font-size: 0.82rem; }
.shown .swatch { width: 9px; height: 9px; border-radius: 50%; }
.shown p { margin: 8px 0 0; color: var(--muted); font-size: 0.8rem; }
.cta {
  display: inline-block;
  margin-top: 18px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--space);
  font-weight: 600;
  text-decoration: none;
}
.cta:hover { background: #fff; }

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--glass);
  border-top: 2px solid var(--l1);
  color: var(--ink);
  font-size: 0.85rem;
  z-index: 4;
}
.foot strong { color: var(--l1); }
#stamp, .built { font-weight: 600; white-space: nowrap; }
.foot-more {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.about {
  width: min(480px, calc(100vw - 32px));
  padding: 24px 26px 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--l1);
  border-radius: 10px;
  background: #0d141f;
  color: var(--ink);
  font-size: 0.98rem;
}
.about::backdrop { background: rgba(3, 6, 10, 0.7); }
.about h2 { margin: 0 0 12px; font: 700 1.7rem/1.1 var(--display); text-transform: uppercase; }
.about p { margin: 0 0 12px; }
.about a { color: var(--ink); }
.about form { margin: 18px 0 0; }
.about-ok {
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--space);
  font: 600 1rem var(--body);
  cursor: pointer;
}
.about-ok:hover { background: #fff; }

/* globe.gl tooltip */
.tip { font: 14px/1.35 var(--body); background: var(--glass); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-width: 260px; }
.tip strong { display: flex; gap: 8px; align-items: center; font: 600 1.1rem var(--display); text-transform: uppercase; }
.tip span.l { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 700px) {
  h1 { font-size: 1.6rem; }
  .sub { display: none; }
  .masthead { width: calc(100vw - 32px - 150px); }
  .legend { padding: 4px 6px; }
  .legend li { font-size: 0.66rem; }
  .panel { top: auto; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 58vh; }
  .foot { font-size: 0.75rem; }
  .panel { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}