/* Dark chrome, light map. The app is dark-only because its condition palette
   was tuned against a dark surface; a map is a different problem — road
   colours have to sit on top of somebody else's cartography, and that is
   light. So the panel is dark and the map is not, deliberately. */

:root {
  --ink: #f4f4f5;
  --dim: #a1a1aa;
  --panel: #17171b;
  --line: #2a2a31;
  --accent: #22d3ee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* The browser hides `[hidden]` from its own stylesheet, and any author rule
   that sets `display` beats it — regardless of specificity, because author
   styles outrank user-agent styles. `.fallback` did exactly that, and the
   result was an empty full-screen div sitting on top of the map swallowing
   every drag: the map zoomed and would not pan, with nothing to see. */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; background: var(--panel); color: var(--ink); }

#map { position: absolute; inset: 0; }

#panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 22rem; max-width: 92vw;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 2rem;
  background: rgba(23, 23, 27, 0.94);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-size: 0.875rem;
  line-height: 1.5;
}

#panel header h1 { margin: 0; font-size: 1.15rem; letter-spacing: 0.02em; }
#panel header p { margin: 0.15rem 0 0; color: var(--dim); }

#panel section { margin-top: 1.5rem; }
#panel h2 {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--dim);
  font-weight: 600;
}

.choice { display: block; margin-bottom: 0.5rem; cursor: pointer; }
.choice input { margin-right: 0.5rem; accent-color: var(--accent); }
.choice .title { font-weight: 600; }
.choice .sub { display: block; margin-left: 1.4rem; color: var(--dim); font-size: 0.8rem; }

#legend-items { list-style: none; margin: 0; padding: 0; }
#legend-items li { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
#legend-items .swatch { flex: none; width: 2.5rem; border-radius: 999px; }

.note { color: var(--dim); font-size: 0.8rem; margin: 0.7rem 0 0; }
.credit { color: var(--dim); font-size: 0.72rem; margin-top: 0.8rem; }

#detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; }
#detail dt { color: var(--dim); }
#detail dd { margin: 0; }

#evidence { margin: 0.9rem 0 0; }
#evidence img { width: 100%; border-radius: 6px; display: block; cursor: zoom-in; }
#evidence figcaption { color: var(--dim); font-size: 0.75rem; margin-top: 0.4rem; }

.fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; }

.maplibregl-ctrl-attrib { font-size: 0.7rem; }

/* On a narrow window the panel was 92vw of a 453px viewport — it covered the
   map it exists to explain. Below the breakpoint it becomes a sheet along the
   bottom instead, so the map keeps the top two thirds and stays draggable.
   Found by asking the page what element sits at the middle of the map, which
   is the only way to catch an overlay you cannot see. */
@media (max-width: 40rem) {
  #panel {
    top: auto;
    right: 0;
    width: auto;
    max-width: none;
    max-height: 45vh;
    border-right: none;
    border-top: 1px solid var(--line);
  }
  #map { bottom: 45vh; }
}

/* A provisional finding has to be read before the number beside it is, so it
   is a banner and not a row. Bordered rather than coloured: the two ramps on
   this map already own their hues, and a warning that borrowed one would be
   read as a position on a scale.

   Deliberately not the map line's own near-black. That colour is chosen to
   carry on a light basemap; this panel is dark, and the same value here would
   be a border nobody can see. Same meaning, opposite background. */
.warning {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.7rem;
  border-left: 3px solid #d6d3d1;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.82rem;
  line-height: 1.45;
}

#tier {
  margin-top: 0.75rem;
}

#tier label {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  cursor: pointer;
}