/* Heritage world map (web/heritage/map.js). Shared by the Hub and the public website. */
.hmap { --hm-sea: #eef4f9; --hm-land: #dde5ec; --hm-edge: #ffffff; --hm-ink: #14233d; --hm-muted: #4d6076; --hm-mine: #a3302a; }
.hmap-wrap { position: relative; background: var(--hm-sea); border-radius: 16px; overflow: hidden; }
.hmap svg { display: block; width: 100%; height: auto; }
.hmap-sea { fill: var(--hm-sea); }
.hmap-land { fill: var(--hm-land); stroke: var(--hm-edge); stroke-width: .5; transition: fill .15s; }
.hmap-land.on { cursor: pointer; }
.hmap-land.on:hover, .hmap-land.on:focus, .hmap-dot:hover { stroke: var(--hm-ink); stroke-width: 1; outline: none; }
.hmap-land.mine, .hmap-dot.mine { stroke: var(--hm-mine); stroke-width: 1.4; }
.hmap-land.mine:not(.on) { fill: #f3d9d6; }
.hmap-dot { fill: var(--hm-mine); stroke: #fff; stroke-width: 1; cursor: pointer; }
.hmap-tip { position: absolute; z-index: 2; pointer-events: none; background: #fff; color: var(--hm-ink); border-radius: 10px; padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(20, 35, 61, .18); font-size: 13.5px; line-height: 1.3; min-width: 120px; }
.hmap-tip b { display: block; }
.hmap-tip span { display: block; color: var(--hm-muted); }
.hmap-tip .hmap-you { color: var(--hm-mine); font-weight: 600; }
.hmap-foot { margin-top: 14px; }
.hmap-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hmap-stats div { background: #fff; border: 1px solid #dfe6ee; border-radius: 14px; padding: 8px 16px; }
.hmap-stats b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.1; color: var(--hm-ink); }
.hmap-stats span { font-size: 13px; color: var(--hm-muted); font-weight: 600; }
.hmap-list { list-style: none; margin: 0; padding: 0; columns: 3 180px; column-gap: 18px; font-size: 14.5px; }
.hmap-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; break-inside: avoid; color: var(--hm-ink); }
.hmap-list .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.hmap-list em { margin-left: auto; font-style: normal; color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hmap-empty { color: var(--hm-muted); }

/* country picker (web/heritage/picker.js) */
.hpick { display: grid; gap: 8px; }
.hpick-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.hpick-chip { font: inherit; font-size: 13.5px; font-weight: 600; border: 0; background: #e2f2e8; color: #1d6b45; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.hpick-chip span { font-weight: 700; margin-left: 2px; }
.hpick-none { color: #4d6076; font-size: 13.5px; }
.hpick-q { font: inherit; font-size: 15px; border: 1px solid #c9d4e0; border-radius: 10px; padding: 8px 10px; width: 100%; background: #fff; color: #14233d; }
.hpick-list { max-height: 220px; overflow-y: auto; border: 1px solid #dfe6ee; border-radius: 10px; padding: 4px; background: #fff;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-content: start; }
.hpick-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: #14233d; }
.hpick-row:hover { background: #f2f5f9; }
.hpick-row.on { background: #e2f2e8; font-weight: 600; }
.hpick-row input { width: 17px; height: 17px; accent-color: #1d6b45; margin: 0; }
.hpick-max { font-size: 13.5px; color: #9f2d20; }