:root {
  --bg: #11151a;
  --panel: #1a2029;
  --line: #2b3441;
  --text: #e6ebf2;
  --muted: #8d9aab;
  --accent: #4da3ff;
  --error: #ff6b6b;
}

* { box-sizing: border-box; }

/* Must outrank the `display` on .shell and .gate below. A class selector beats
   the user-agent's [hidden] rule, so without this the sign-in gate and the map
   are both on screen at once and the map is visible to someone who has not
   signed in (it holds no data, but it should not be there at all). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.muted { color: var(--muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }

/* ---- sign-in gate ---------------------------------------------------- */

.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 10;
}

.card {
  width: min(360px, calc(100vw - 32px));
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card h1 { margin: 0; font-size: 20px; }
.card p { margin: 0 0 8px; }
.card label { font-size: 12px; color: var(--muted); margin-top: 8px; }

.card input {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #0e1319;
  color: var(--text);
  font-size: 14px;
}

.card button {
  margin-top: 16px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #06111d;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.card button[disabled] { opacity: 0.6; cursor: default; }
.error { color: var(--error); font-size: 13px; margin: 4px 0 0; }

/* ---- shell ----------------------------------------------------------- */

.shell { height: 100%; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 600; }
/* Keeps what the map actually shows next to the product name, so the topbar
   still answers "what am I looking at" for someone opening it the first time. */
.tagline { font-size: 12px; }
.built { font-size: 12px; }

.link {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.main { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 300px;
  flex: 0 0 300px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.panel { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
            letter-spacing: 0.08em; color: var(--muted); }

.map { flex: 1; min-width: 0; }

/* ---- legend ---------------------------------------------------------- */

.swatch-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.swatch { width: 18px; height: 12px; border-radius: 2px; flex: 0 0 18px; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  cursor: pointer;
}

/* ---- stat tables ----------------------------------------------------- */

.stats { width: 100%; border-collapse: collapse; }
.stats th, .stats td { padding: 3px 0; text-align: left; vertical-align: top; }
.stats th { font-weight: 400; color: var(--muted); font-size: 12px;
            padding-right: 10px; white-space: nowrap; }
.stats td { font-variant-numeric: tabular-nums; }

/* A cell whose value rests on one pass. Flagged wherever a number is shown,
   because the number looks equally authoritative either way. */
.low-confidence { color: #ffca7a; }

@media (max-width: 720px) {
  .main { flex-direction: column; }
  .sidebar { width: auto; flex: 0 0 auto; max-height: 45%; border-right: 0;
             border-bottom: 1px solid var(--line); }
}