/* The historical map of a history: TravelogueStudio's step 4 and the
   website's history page.  See historymap.js. */
.hmap { --hm-ink: #1f2a33; --hm-soft: #5b6670; --hm-rule: #d9d3c7; --hm-accent: #a3341f;
  --hm-blue: #105f94; margin: 1.25rem 0 2rem; font-family: inherit; color: var(--hm-ink); }
.hmap h3, .hmap .hm-title { margin: 0 0 .25rem; }
.hmap .hm-help { margin: 0 0 .75rem; color: var(--hm-soft); font-size: .9rem; }
.hm-periods { display: flex; gap: .4rem; overflow-x: auto; padding: 0 0 .5rem; margin: 0;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.hm-periods button { flex: none; font: inherit; font-size: .8rem; line-height: 1.2;
  padding: .45rem .7rem; border: 1px solid var(--hm-rule); border-radius: 999px;
  background: #fff; color: var(--hm-ink); cursor: pointer; min-height: 2.25rem; }
.hm-periods button small { display: block; color: var(--hm-soft); font-size: .7rem; }
.hm-periods button[aria-pressed="true"] { background: var(--hm-ink); color: #fff; border-color: var(--hm-ink); }
.hm-periods button[aria-pressed="true"] small { color: #d7dde2; }
.hm-status { margin: .25rem 0 .5rem; font-size: .8rem; color: var(--hm-soft); }
.hm-map { height: clamp(280px, 52vh, 480px); border: 1px solid var(--hm-rule); border-radius: 8px;
  background: #e8eff5; overflow: hidden; }
.hm-key { margin: .5rem 0 0; font-size: .78rem; color: var(--hm-soft); }
.hm-failed { margin: .5rem 0; padding: .6rem .8rem; border-left: 3px solid var(--hm-accent);
  background: #fff8f3; font-size: .9rem; }
.hm-pin { display: flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; }
.hm-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--hm-accent);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); flex: none; }
.hm-pin.abroad .hm-dot { background: #7b858d; }
.hm-label { font-size: .72rem; font-weight: 600; color: var(--hm-ink); background: rgba(255,255,255,.88);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap; display: none; }
.hm-pin:hover .hm-label, .hm-pin:focus-visible .hm-label, .hm-pin.on .hm-label { display: inline; }
.hm-pin.on .hm-dot { background: var(--hm-blue); transform: scale(1.35); }
.hm-pin:focus-visible { outline: 2px solid var(--hm-blue); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 900px) { .hmap.hm-wide-labels .hm-label { display: inline; } }
.hm-card p { margin: 0 0 .4rem; font-size: .85rem; line-height: 1.4; }
.hm-card .hm-names { font-size: .92rem; }
.hm-card .hm-n { font-style: normal; }
.hm-card em.hm-n { font-style: italic; }
.hm-era { font-size: .7rem; color: var(--hm-soft); }
.hm-card .hm-links a { display: inline-block; margin-right: .5rem; font-weight: 600; color: var(--hm-blue); }
.hmap .maplibregl-popup-content { padding: .7rem .8rem; border-radius: 8px; font-family: inherit; }
.hm-places { margin-top: .75rem; }
.hm-places summary { cursor: pointer; font-size: .9rem; font-weight: 600; padding: .4rem 0; }
.hm-list { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 1.5rem; }
.hm-list li { break-inside: avoid; padding: .45rem .3rem; border-top: 1px solid var(--hm-rule);
  font-size: .85rem; line-height: 1.35; cursor: pointer; }
.hm-list li.on { background: #eef4f8; }
.hm-list .hm-n { font-weight: 600; }
.hm-list em { font-style: italic; }
.hm-list .hm-era { margin-right: .3rem; }
.hm-list .hm-note { display: block; color: var(--hm-soft); }
.hm-list a { font-size: .8rem; margin-right: .4rem; }
button.hm-name { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-decoration: underline dotted rgba(16,95,148,.6); text-underline-offset: .2em;
  display: inline; }
button.hm-name:hover, button.hm-name:focus-visible { color: var(--hm-blue); text-decoration-style: solid; }
@media (max-width: 600px) {
  .hm-list { columns: 1; }
  .hm-map { height: 62vh; min-height: 260px; }
}