/* ==========================================================================
   Historical Maps Timeline — base: brand tokens, wrapper, loader, map canvas.
   All rules are prefixed with .hmt-timeline-wrapper to avoid conflicts with
   the WordPress theme. Loaded first; the other hmt css files use the tokens
   defined here.
   ========================================================================== */

.hmt-timeline-wrapper {
  /* Brand tokens */
  --hmt-paper:       #e4ebf1;
  --hmt-paper-2:     #d5e0ea;
  --hmt-paper-edge:  #c2d2df;
  --hmt-ink:         #16242e;
  --hmt-ink-soft:    #566570;
  --hmt-head:        #1e5a7d;
  --hmt-line:        rgba(22, 36, 46, .16);
  --hmt-vermilion:   #e5402a;
  --kdr:             #1e5a7d;
  --pgs:             #16242e;
  --tma:             #e5402a;
  --hist:            #8a5a2b;  /* the single-sheet historical maps */
  --hmt-shadow:      0 -8px 30px rgba(22, 36, 46, .16);
  --hmt-panel-h:     260px;   /* height of the bottom timeline panel */

  position: relative;
  width: 100%;
  /* height is set by JS autosize or inline style */
  overflow: hidden;
  background: #cfdae3;
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--hmt-ink);
}

.hmt-timeline-wrapper *,
.hmt-timeline-wrapper *::before,
.hmt-timeline-wrapper *::after {
  box-sizing: border-box;
}

/* ---- Loader overlay ---- */
.hmt-timeline-wrapper .hmt-loader {
  position: absolute;
  inset: 0;
  background: rgba(207, 218, 227, 0.92);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: auto;
}

.hmt-timeline-wrapper .hmt-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hmt-timeline-wrapper .hmt-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(30, 90, 125, 0.18);
  border-top-color: var(--hmt-head);
  animation: hmt-spin 0.75s linear infinite;
}

/* Also used by the locate button in map-controls.css */
@keyframes hmt-spin {
  to { transform: rotate(360deg); }
}

/* ---- Map canvas ---- */
.hmt-timeline-wrapper .hmt-map {
  position: absolute;
  inset: 0 0 var(--hmt-panel-h) 0;
  background: #e8e6df;
  z-index: 1;
}

.hmt-timeline-wrapper .leaflet-container {
  background: #e8e6df;
  font-family: "Archivo", system-ui, sans-serif;
}

.hmt-timeline-wrapper .leaflet-control-attribution {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 10px;
  background: rgba(230, 223, 202, .82);
}

/* ---- Fullscreen mode: fill the entire screen ---- */
.hmt-timeline-wrapper:fullscreen,
.hmt-timeline-wrapper:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
}