/* ===========================================================================
   geo-explorer.css -- the census-geography figure in chapter 03
   (assets/js/geo-explorer.js). Scoped to .geo.

   Set in the static figures' face (the "URBAN520 LM Roman" subset from
   calc-explorer.css). Nothing here is needed by the PDF build; the LaTeX
   format never loads css.
   =========================================================================== */

.geo {
  margin: 1.1rem 0; text-align: left; color: #000;
  font-family: "URBAN520 LM Roman", "Latin Modern Roman", "Times New Roman", Times, serif;
  font-size: 13px; line-height: 1.25;
}

/* ---- the code: the GEOID whole, then in its five parts ---- */
.geo .geo-code { text-align: center; margin: 0 0 0.3rem; -webkit-user-select: none; user-select: none; }
.geo .geo-full { font-size: 15px; letter-spacing: 0.04em; color: #8a8a96; }
.geo .geo-full .on { color: #32006e; }
.geo .geo-parts {
  display: flex; justify-content: center; gap: 0.6em;
  font-size: 30px; line-height: 1.15; padding-bottom: 34px;   /* room for a label */
}
.geo .geo-p { position: relative; cursor: default; border-bottom: 2px solid transparent; }
.geo .geo-p.on { color: #32006e; border-bottom-color: #32006e; }
.geo .geo-some .geo-p:not(.on) { color: #b9b4c2; }
.geo .geo-lab {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 3px; font-size: 13px; line-height: 1.2; color: #000;
  white-space: nowrap; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 0.12s;
}
.geo .geo-lab .geo-name { display: block; color: #32006e; }
.geo .geo-p.on .geo-lab { opacity: 1; }

/* ---- the three maps ---- */
.geo .geo-bar { display: flex; justify-content: flex-end; gap: 4px; margin: 0 0 4px; }
.geo .geo-bar button {
  font: inherit; font-size: 12px; line-height: 1; min-width: 26px; height: 24px; padding: 0 7px;
  border: 1px solid #ddd8e2; border-radius: 2px; background: #fbfafc; color: #32006e; cursor: pointer;
}
.geo .geo-bar button:hover { background: #efeaf6; }
.geo .geo-maps { display: flex; gap: 6px; }
.geo .geo-panel { flex: 1 1 0; min-width: 0; }
.geo .geo-title { text-align: center; margin: 0 0 3px; }
.geo .geo-title.on { color: #32006e; }
.geo svg.geo-map {
  display: block; width: 100%; height: 260px; box-sizing: border-box;
  border: 1px solid #ddd8e2; background: #ededeb;
  touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none;
}
.geo svg.geo-map:active { cursor: grabbing; }
.geo .geo-tiles image { pointer-events: none; }
.geo .geo-shapes path {
  fill: #32006e; fill-opacity: 0; stroke: #32006e; stroke-opacity: 0.33; stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.geo .geo-shapes path.on { fill-opacity: 0.22; stroke-opacity: 1; stroke-width: 1.6; }
.geo .geo-id { text-align: center; margin: 3px 0 0; }
.geo .geo-attr { text-align: right; margin: 2px 0 0; font-size: 10.5px; color: #8a8a96; }
.geo .geo-attr a { color: inherit; }

/* A phone stacks the maps; a one-finger swipe there scrolls the page. */
@media (max-width: 575.98px) {
  .geo .geo-maps { flex-direction: column; gap: 10px; }
  .geo svg.geo-map { height: 220px; touch-action: pan-y; }
  .geo .geo-parts { font-size: 24px; gap: 0.45em; }
}