/* The marks the History playback puts on a map: arrows, heads, pulses, ships, flags, leaders.
   Shared by /history/ and the records map. */
  /* the arrows. Leaflet's SVG renderer takes a className, so the flow is plain CSS. */
  .hm-arc { fill:none; stroke-linecap:round; stroke-dasharray:7 5; animation:hm-flow 1.1s linear infinite; }
  .hm-arc.hm-grow { animation:hm-flow 1.1s linear infinite, hm-in .8s ease-out 1; }
  .hm-voy { fill:none; stroke-linecap:round; stroke-dasharray:1 6; }
  .hm-ship { font-size:20px; line-height:20px; text-shadow:0 0 3px #fff, 0 0 3px #fff; }
  .hm-leader span { display:inline-block; transform:translate(-50%,0); white-space:nowrap; font:600 11px/1.1 var(--font-body, system-ui, sans-serif); padding:1px 5px; border-radius:8px; background:color-mix(in srgb, var(--panel, #fff) 88%, transparent); color:var(--ink, #16222A); border:1px solid var(--rule-strong, #999); }
  .hm-stub { fill:none; stroke-dasharray:2 5; stroke-linecap:round; }
  @keyframes hm-flow { to { stroke-dashoffset:-24; } }
  @keyframes hm-in { from { stroke-opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .hm-arc, .hm-arc.hm-grow { animation:none; stroke-dasharray:none; } }
  .hm-head { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
             border-bottom:11px solid var(--c, #333); transform-origin:50% 60%; }
  .hm-flag img { width:26px; height:auto; border:1px solid rgba(0,0,0,.35); display:block; background:#fff; }
  .hm-pulse { border-radius:50%; border:2px solid var(--c, #333); animation:hm-ping 1.6s ease-out infinite; }
  @keyframes hm-ping { from { transform:scale(.4); opacity:1; } to { transform:scale(1.6); opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .hm-pulse { animation:none; } }

/* A: the bubble where a major movement lands, and its phone twin, a numbered pin. */
.leaflet-popup.hm-bubble .leaflet-popup-content-wrapper { background: var(--panel, #fff); color: var(--ink, #16222A);
  border: 1px solid var(--rule-strong, #bbb); border-radius: 10px; box-shadow: 0 4px 16px rgba(10,20,26,.22); }
.leaflet-popup.hm-bubble .leaflet-popup-tip { background: var(--panel, #fff); border: 1px solid var(--rule-strong, #bbb); }
.leaflet-popup.hm-bubble .leaflet-popup-content { margin: 9px 12px 10px; font: 12.5px/1.45 var(--font-body, system-ui, sans-serif); }
.hm-b b { display: block; font-size: 13.5px; font-weight: 600; margin: 1px 0 3px; }
.hm-b p { margin: 0 0 5px; }
.hm-b-k { font: 600 10.5px/1 var(--font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .05em; }
.hm-b a { font-size: 12px; }
.hm-bubble { animation: hm-pop .35s ease-out 1; }
@keyframes hm-pop { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hm-bubble { animation: none; } }
.hm-num { width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 600 12px/22px var(--font-body, system-ui, sans-serif);
  text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.hm-numb { display: inline-block; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ink, #16222A); color: var(--panel, #fff);
  font: 600 11px/17px var(--font-body, system-ui, sans-serif); text-align: center; margin-right: 6px; font-style: normal; }
/* D: the card that introduces an era while the tour runs. */
.hm-era { position: absolute; z-index: 700; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 28px));
  background: var(--panel, #fff); color: var(--ink, #16222A); border: 1px solid var(--rule-strong, #bbb); border-radius: 12px;
  padding: 14px 16px 14px; box-shadow: 0 8px 28px rgba(10,20,26,.3); animation: hm-pop .4s ease-out 1; }
.hm-era[hidden] { display: none; }
.hm-era-n { font: 600 11px/1 var(--font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.hm-era h2 { margin: 6px 0 4px; font: 700 1.35rem/1.15 var(--font-display, Georgia, serif); }
.hm-era p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.hm-era-m { font-size: 12px; opacity: .8; margin-bottom: 10px; }
.hm-era-go { border: 1px solid var(--accent, #1F5C6B); background: var(--accent, #1F5C6B); color: #fff; border-radius: 8px;
  font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer; }

/* The row that has just arrived in "Under way" flashes in its own colour so the eye finds it. */
.hm-new { animation: hm-flash 2.6s ease-out 1; }
@keyframes hm-flash {
  0%   { background: color-mix(in srgb, var(--c, #888) 55%, transparent); box-shadow: inset 5px 0 0 var(--c, #888); }
  35%  { background: color-mix(in srgb, var(--c, #888) 30%, transparent); }
  100% { background: transparent; box-shadow: inset 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .hm-new { animation: none; } }

/* The detail bubble: one movement, in full. */
.leaflet-popup.hm-detail-pop .leaflet-popup-content { margin: 10px 14px 12px; }
.hm-d b { display: block; font-size: 15px; font-weight: 600; margin: 2px 0 4px; }
.hm-d-what { margin: 0 0 6px; }
.hm-d dl { display: grid; grid-template-columns: 54px 1fr; gap: 3px 8px; margin: 6px 0; font-size: 12px; }
.hm-d dt { opacity: .6; font-weight: 600; }
.hm-d dd { margin: 0; }
.hm-d dd span { opacity: .7; }
.hm-d-flags { display: flex; gap: 6px; align-items: center; }
.hm-d-flag { height: 20px; width: auto; border: 1px solid rgba(0,0,0,.35); background: #fff; }
.hm-d .hm-fine { font-size: 11px; opacity: .7; margin: 4px 0 6px; }

/* The detail card (history-theatre.js openDetail): laid over the map beside its arrow, inside the map always. */
.hm-dpop { position: absolute; z-index: 900; overflow: auto; box-sizing: border-box; padding: 12px 16px 12px 14px;
  background: var(--panel, #fff); color: var(--ink, #16222A); border: 1px solid var(--rule-strong, #bbb);
  border-radius: 12px; box-shadow: 0 6px 22px rgba(10,20,26,.28); font: 12.5px/1.45 var(--font-body, system-ui, sans-serif);
  animation: hm-pop .3s ease-out 1; }
.hm-dpop-x { position: absolute; right: 6px; top: 3px; border: 0; background: none; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: inherit; padding: 2px 6px; }
.hm-dpop-body { padding-right: 14px; }
.hm-d-src { font-size: 10.5px; opacity: .6; font-style: italic; }
.hm-d dd b { display: inline; font-size: inherit; margin: 0; }

/* Gridline labels: small, quiet, readable over either basemap. */
.hm-gl span { display: block; white-space: nowrap; font: 600 10px/1 var(--font-body, system-ui, sans-serif); color: #34454f;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; pointer-events: none; }
.hm-gl-r span { transform: translateX(-100%); padding-right: 8px; }

/* Gridlines and their labels follow the page's ink, so they read on the dark basemap too. */
.hm-gline { stroke: var(--ink, #3d4f5a); }
.hm-gl span { color: var(--ink, #34454f); text-shadow: 0 0 3px var(--panel, #fff), 0 0 3px var(--panel, #fff), 0 0 2px var(--panel, #fff); }

/* Mini flags on the Under way rows. */
.hm-list li button, .ra-th-list li button { display: flex; align-items: center; gap: 8px; }
.hm-rowtxt { flex: 1 1 auto; min-width: 0; }
.hm-rowflags { flex: none; display: flex; flex-direction: column; gap: 2px; width: 24px; }
.hm-mf { display: block; width: 24px; height: 16px; object-fit: cover; border: 1px solid rgba(0,0,0,.35); background: #fff; border-radius: 1px; }
.hm-d-flaglink { display: inline-block; line-height: 0; }
.hm-d-flaglink:hover .hm-d-flag, .hm-d-flaglink:focus-visible .hm-d-flag { outline: 2px solid var(--accent, #1F5C6B); outline-offset: 1px; }

/* Focus on a country: the search box and the strip of flags it flew. */
.hm-ff { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: inherit;
  padding: 2px; border-radius: 3px; opacity: .6; }
.hm-ff img { display: block; width: 26px; height: 17px; object-fit: cover; border: 1px solid rgba(0,0,0,.35); background: #fff; }
.hm-ff small { font: 600 9px/1 var(--font-body, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.hm-ff.cur { opacity: 1; outline: 2px solid var(--accent, #1F5C6B); }
.hm-ff:hover { opacity: 1; }
.hm-focusrow { display: flex; gap: 6px; align-items: center; }
.hm-focusrow input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .8rem; padding: 4px 8px; border: 1px solid var(--rule-strong, #bbb);
  border-radius: 8px; background: var(--panel, #fff); color: var(--ink, #16222A); }
.hm-ffs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; max-height: 62px; overflow: auto; }
.hm-ffs[hidden] { display: none; }

.hm-ffx { flex: 1 0 100%; text-align: left; border: 1px solid var(--rule-strong, #bbb); border-radius: 8px; background: var(--panel, #fff);
  color: var(--ink, #16222A); font: 600 .75rem/1 var(--font-body, system-ui, sans-serif); padding: 5px 9px; cursor: pointer; margin-bottom: 3px; }
.hm-ffx:hover { border-color: var(--accent, #1F5C6B); }

/* Mass mortality: black outlines, a black marker, and the card. */
.hm-mort { stroke: #000; }
.hm-mortbox { display: block; width: 16px; height: 16px; border: 2px solid #000; background: color-mix(in srgb, #000 12%, transparent); box-sizing: border-box; }
.hm-toll { margin: 6px 0; padding: 6px 9px; border-left: 4px solid #000; background: color-mix(in srgb, var(--ink, #000) 7%, transparent); }
.hm-toll span { display: block; font: 600 10.5px/1 var(--font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.hm-toll b { display: block; font-size: 15px; margin: 3px 0 2px; }
.hm-toll small { display: block; font-size: 11px; opacity: .75; line-height: 1.35; }
.hm-d-rec { display: inline-block; margin-top: 6px; font-weight: 600; }
.hm-era-mort { font-weight: 600; opacity: 1; }

/* A mass-mortality row in Under way is black with white text, so it cannot be missed among the arrows. */
.hm-list li button.hm-mortrow, .ra-th-list li button.hm-mortrow { background: #000; color: #fff; border-left-color: #000; border-radius: 3px; }
.hm-list li button.hm-mortrow:hover, .ra-th-list li button.hm-mortrow:hover,
.hm-list li button.hm-mortrow:focus-visible, .ra-th-list li button.hm-mortrow:focus-visible { background: #2a2a2a; }
.hm-mortrow small { color: rgba(255,255,255,.78); opacity: 1; }
.hm-mortrow .hm-mortbox { border-color: #fff; background: rgba(255,255,255,.18); }