/* ============================================================
   ghMap — the Ontario subscriber map. Tokens only, both moods.
   The relief takes the full width; the region strip sits beneath
   it. The hover label sits directly above its marker, clamped
   inside the map box so it can never leave it.
   ============================================================ */

/* The host stays the query container: the piece measures itself against the
   HOST's width, not the viewport's — the Porch mounts it in a card, and a
   viewport media query would read the wrong width there. */
.gh-map-host{
  container-type:inline-size;
  container-name:ghmap;
}

/* One column at every width (Danielle 2026-09-03): the map was too small
   sharing a row with the region list. */
.gh-map-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  align-items:start;
}

/* the one Sample badge, when there is no card title row to hang it in */
.gh-map__top{display:flex;justify-content:flex-end;margin-bottom:8px}

/* The sample sentence, kept for aria-describedby. It is the badge's tooltip
   on screen, so it must not paint — but display:none would take it out of
   the accessibility tree with it. */
.gh-map__note{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- the picture ---------- */
.gh-map{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-sunk);
  box-shadow:var(--shadow-xs);
}
/* height follows width, so the relief is never letterboxed or cropped */
.gh-map>img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
/* Warms the relief to the room. */
.gh-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 52%,var(--panel-bg));
  opacity:.72;
  pointer-events:none;
}

/* ---------- markers ---------- */
.gh-map__marker{
  position:absolute;
  z-index:2;
  left:var(--m-left);
  top:var(--m-top);
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  transform:translate(-50%,-50%);
  cursor:pointer;
}
.gh-map__dot{
  display:block;
  width:16px;
  height:16px;
  border:3px solid var(--surface);
  border-radius:var(--radius-pill);
  background:var(--terra);
  box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.gh-map__marker.is-sample .gh-map__dot{
  background:var(--surface);
  border-color:var(--terra);
  box-shadow:none;
}
.gh-map__marker:hover .gh-map__dot,
.gh-map__marker.on .gh-map__dot{
  transform:scale(1.28);
  box-shadow:0 0 0 6px var(--glow),var(--shadow-sm);
}
.gh-map__marker:focus-visible{
  outline:2px solid var(--terra);
  outline-offset:2px;
}

/* ---------- the hover label, directly above its marker ---------- */
/* JS sets left/top from the marker's own rect and clamps both inside the map
   box; the transform does the centring and the lift. */
.gh-map__popover{
  position:absolute;
  z-index:4;
  left:0;
  top:0;
  transform:translate(-50%,-100%);
  display:flex;
  align-items:center;
  gap:6px;
  max-width:calc(100% - 20px);
  padding:5px 10px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:var(--surface);
  color:var(--fg);
  box-shadow:var(--shadow-sm);
  font-size:12.5px;
  line-height:1.3;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* the pointer, under the label — and over it once the label flips below */
.gh-map__popover::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  width:0;
  height:0;
  margin-left:-5px;
  border:5px solid transparent;
  border-top-color:var(--border-strong);
}
.gh-map__popover.below{transform:translate(-50%,0)}
.gh-map__popover.below::after{
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:var(--border-strong);
}
/* The rule above sets display:flex, which beats the user agent's
   [hidden]{display:none}. Without this the closed label paints as a thin
   rounded bar over the map — it looked like a scrollbar. */
.gh-map__popover[hidden]{display:none}
.gh-map__popover .t{font-weight:700;color:var(--fg)}
.gh-map__popover .sep{color:var(--fg-subtle)}
.gh-map__popover .v{color:var(--fg-muted)}
.gh-map__popover .s{
  color:var(--fg-subtle);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
/* 44px of touch target without a 44px-tall label: the negative margins let
   the button overhang the label's padding, so its own rect stays 44 square. */
.gh-map__close{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  margin:-7px -9px -7px 2px;
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--fg-muted);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.gh-map__close:hover{background:var(--bg-sunk);color:var(--fg)}

/* ---------- the region strip, beneath the map ---------- */
/* One row of small figures — name over count, the same shape as the garden's
   three stats. It wraps rather than shrinking a tile under its touch target. */
.gh-map__ledger{min-width:0}
.gh-map__ledger ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.gh-map__ledger li{flex:1 1 0;min-width:76px;display:flex}
.gh-map__ledger li>button,
.gh-map__ledger li.is-flat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:100%;
  min-height:56px;
  padding:8px 6px;
  border:0;
  border-radius:var(--radius-lg);
  background:var(--brand-50);
  color:var(--fg);
  font:inherit;
  text-align:center;
}
.gh-map__ledger li>button{cursor:pointer;transition:background .16s var(--ease)}
.gh-map__ledger li>button:hover,
.gh-map__ledger li>button.on,
.gh-map__ledger li>button:focus-visible{background:var(--brand-100)}
.gh-map__ledger li>button:focus-visible{outline:2px solid var(--terra);outline-offset:-2px}
.gh-map__ledger .k{
  min-width:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--fg-subtle);
  white-space:normal;
  overflow-wrap:anywhere;
}
.gh-map__ledger .v{
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:600;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--num);
}
.gh-map__ledger .n{font-size:9.5px;color:var(--fg-subtle)}
.gh-map__ledger li.is-quiet>.k,
.gh-map__ledger li.is-quiet>.v{color:var(--fg-muted)}
.gh-map__ledger li.is-flat{background:var(--bg-sunk)}
.gh-map__foot{
  margin:10px 0 0;
  color:var(--fg-muted);
  font-size:12px;
  line-height:1.5;
}
.gh-map__foot strong{color:var(--fg)}

@media (prefers-reduced-motion:reduce){
  .gh-map__dot{transition:none}
  .gh-map__marker:hover .gh-map__dot,
  .gh-map__marker.on .gh-map__dot{transform:none}
}

/* optional heading above the ledger (the Porch passes "Top regions") */
.gh-map__lt{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin:2px 8px 8px}