/* ==========================================================================
   Historical Maps Timeline — extra map controls:
   toast messages, geolocation button + user dot, fullscreen button.
   ========================================================================== */

/* ---- Map toast notification ---- */
.hmt-timeline-wrapper .hmt-map-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hmt-panel-h) + 16px);
  transform: translateX(-50%);
  z-index: 700;
  background: var(--hmt-ink);
  color: #fff;
  font: 600 12.5px/1.35 "Archivo", sans-serif;
  padding: 9px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(22, 36, 46, .35);
  max-width: 80%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.hmt-timeline-wrapper .hmt-map-toast.hmt-show { opacity: 1; }

/* ---- Geolocation control ---- */
.hmt-timeline-wrapper .locate-ctl a.locate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--hmt-ink);
  background: #fff;
  text-decoration: none;
}

.hmt-timeline-wrapper .locate-ctl a.locate-btn:hover {
  background: #f4f8fb;
  color: var(--hmt-head);
}

.hmt-timeline-wrapper .locate-ctl a.locate-btn svg {
  width: 18px;
  height: 18px;
}

.hmt-timeline-wrapper .locate-ctl.tracking a.locate-btn {
  background: var(--hmt-vermilion);
  color: #fff;
}

.hmt-timeline-wrapper .locate-ctl.locating a.locate-btn svg {
  animation: hmt-spin 1s linear infinite;  /* keyframes live in base.css */
}

/* ---- User location dot ---- */
.hmt-timeline-wrapper .user-divicon { background: transparent; border: 0; }

.hmt-timeline-wrapper .user-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hmt-vermilion);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(22, 36, 46, .5);
}

.hmt-timeline-wrapper .user-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid var(--hmt-vermilion);
  transform: translate(-50%, -50%);
  animation: hmt-userpulse 2.1s ease-out infinite;
}

@keyframes hmt-userpulse {
  0%   { width: 10px; height: 10px; opacity: .7; }
  100% { width: 48px; height: 48px; opacity: 0;  }
}

/* ---- Fullscreen button ---- */
.hmt-timeline-wrapper .hmt-fs-btn {
  position: absolute;
  bottom: calc(var(--hmt-panel-h) + 14px);
  right: 14px;
  z-index: 640;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 2px solid rgba(22, 36, 46, .18);
  border-radius: 4px;
  background: #fff;
  color: var(--hmt-ink);
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(22, 36, 46, .2);
  transition: background .15s, color .15s;
}

.hmt-timeline-wrapper .hmt-fs-btn:hover {
  background: var(--hmt-head);
  color: #fff;
  border-color: var(--hmt-head);
}

.hmt-timeline-wrapper .hmt-fs-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hmt-timeline-wrapper .user-dot::after { animation: none; }
  .hmt-timeline-wrapper .locate-ctl.locating a.locate-btn svg { animation: none; }
}