/* ===========================================================================
   Where Is Enoch? — Leaflet overrides
   Parchment dossier popups, comic control chrome, bouncing marker keyframes.
   Loaded AFTER leaflet.css so these rules win without !important.
   =========================================================================== */

/* ------------------------- Map surface / tiles ---------------------------- */

.leaflet-container {
  background: #f4e4bc;
  font-family: var(--font-body);
  outline: none;
}

/* Age the tiles so OSM sits inside the newsprint palette */
.leaflet-tile-pane {
  filter: sepia(.55) saturate(.68) contrast(1.06) brightness(1.04);
}

.leaflet-container a { color: var(--blue); }

/* --------------------------- Zoom + controls ------------------------------ */

.leaflet-bar,
.leaflet-control-zoom {
  border: var(--outline);
  box-shadow: var(--shadow-soft);
  border-radius: 0;
  overflow: hidden;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--parchment);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 28px;
  width: 30px;
  height: 30px;
  border-radius: 0;
}
.leaflet-bar a:last-child { border-bottom: none; }
.leaflet-bar a:hover { background: var(--gold); }
.leaflet-bar a.leaflet-disabled { background: var(--paper-dark); color: #8a7b64; }

.leaflet-control-attribution {
  background: rgba(251, 243, 221, .92);
  border: 2px solid var(--ink);
  border-right: none;
  border-bottom: none;
  font-family: var(--font-type);
  font-size: .62rem;
  padding: 2px 6px;
}

/* ------------------------ Custom SVG cartoon pins -------------------------- */

/* Leaflet gives divIcon a white box by default; strip it. */
.enoch-pin {
  background: transparent;
  border: none;
}

.enoch-pin svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(2px 3px 0 rgba(26, 26, 26, .35));
  transform-origin: 50% 100%;
  transition: transform .12s ease-out;
}

.enoch-pin:hover svg,
.enoch-pin:focus-visible svg {
  transform: scale(1.14) translateY(-2px);
}

.enoch-pin__ring { opacity: 0; }

/* The live sighting: bouncing pin + expanding shockwave ring */
.enoch-pin--current svg {
  animation: pin-bounce 1.15s cubic-bezier(.28, .84, .42, 1) infinite;
}
.enoch-pin--current .enoch-pin__ring {
  opacity: 1;
  transform-origin: 50% 82%;
  animation: pin-ring 1.9s ease-out infinite;
}

@keyframes pin-bounce {
  0%   { transform: translateY(0)     scaleY(1); }
  18%  { transform: translateY(-14px) scaleY(1.06); }
  38%  { transform: translateY(0)     scaleY(.9); }
  50%  { transform: translateY(0)     scaleY(1.04); }
  62%  { transform: translateY(-5px)  scaleY(1); }
  80%  { transform: translateY(0)     scaleY(.97); }
  100% { transform: translateY(0)     scaleY(1); }
}

@keyframes pin-ring {
  0%   { transform: scale(.35); opacity: .85; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* A marker briefly highlighted by "Take me there" or a legend click */
.enoch-pin--flash svg {
  animation: pin-flash .45s steps(2) 4;
}

@keyframes pin-flash {
  0%, 100% { filter: drop-shadow(2px 3px 0 rgba(26, 26, 26, .35)); }
  50%      { filter: drop-shadow(0 0 12px var(--gold)) brightness(1.35); }
}

/* --------------------------- Trail polyline ------------------------------- */

.enoch-trail {
  stroke-dasharray: 2 11;
  stroke-linecap: round;
  animation: trail-march 22s linear infinite;
}

@keyframes trail-march {
  to { stroke-dashoffset: -260; }
}

/* ----------------------- Parchment dossier popup --------------------------- */

.leaflet-popup-content-wrapper {
  background: var(--parchment);
  color: var(--ink);
  border: var(--outline);
  border-radius: 0;
  box-shadow: var(--shadow-hard);
  padding: 0;
  /* faint foxing so it reads as aged paper */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(160, 130, 80, .13) 0, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(160, 130, 80, .11) 0, transparent 38%);
}

.leaflet-popup-content {
  margin: 0;
  width: 290px !important;
  line-height: 1.5;
}

.leaflet-popup-tip {
  background: var(--parchment);
  border-right: var(--outline);
  border-bottom: var(--outline);
  box-shadow: none;
}

.leaflet-popup-close-button {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  width: 26px;
  height: 26px;
  padding: 0;
  top: 4px;
  right: 4px;
}
.leaflet-popup-close-button:hover { color: var(--red); background: transparent; }

/* Dossier internals (markup generated in app.js) */

.dossier { padding: .95rem 1.05rem 1rem; }

.dossier__stamp {
  position: absolute;
  top: 8px;
  right: 34px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--red);
  border: 2px solid var(--red);
  padding: .05rem .4rem;
  transform: rotate(-11deg);
  opacity: .8;
}

.dossier__cat {
  display: inline-block;
  font-family: var(--font-type);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--dossier-colour, #1a1a1a);
  border: 2px solid var(--ink);
  padding: .1rem .45rem;
  margin-bottom: .45rem;
}

.dossier__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.05;
  margin: 0 0 .15rem;
  letter-spacing: .02em;
}

.dossier__area {
  font-family: var(--font-type);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 2px dashed var(--ink-soft);
}

.dossier__quote {
  font-family: var(--font-type);
  font-size: .84rem;
  font-style: italic;
  margin: 0 0 .65rem;
  padding-left: .6rem;
  border-left: 4px solid var(--gold);
}

.dossier__body {
  font-size: .78rem;
  margin: 0 0 .7rem;
  color: var(--ink-soft);
}

.dossier__rows {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .6rem;
  font-size: .74rem;
}
.dossier__rows dt {
  font-family: var(--font-type);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .64rem;
  color: var(--ink-soft);
  align-self: center;
}
.dossier__rows dd { margin: 0; font-weight: 700; }

.dossier__live {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .05em;
  color: var(--parchment);
  background: var(--red);
  border: 2px solid var(--ink);
  padding: .15rem .55rem;
  display: inline-block;
  animation: live-blink 1.4s steps(2) infinite;
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .58; }
}

/* Tooltips on hover */
.leaflet-tooltip.enoch-tip {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-type);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .5rem;
}
.leaflet-tooltip.enoch-tip::before { display: none; }

/* ------------------------------ Responsive -------------------------------- */

@media (max-width: 620px) {
  .leaflet-popup-content { width: 232px !important; }
  .dossier { padding: .8rem .85rem .85rem; }
  .dossier__name { font-size: 1.2rem; }
  .dossier__stamp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .enoch-pin--current svg,
  .enoch-pin--current .enoch-pin__ring,
  .enoch-pin--flash svg,
  .enoch-trail,
  .dossier__live {
    animation: none;
  }
  .enoch-pin--current .enoch-pin__ring { opacity: .5; }
}

/* ===========================================================================
   v1.1 — sourced mentions inside the dossier popup
   =========================================================================== */

.dossier__srctitle {
  font-family: var(--font-type);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  margin: .8rem 0 .35rem;
  padding-bottom: .2rem;
  border-bottom: 2px solid var(--ink);
}

.dossier__sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  max-height: 168px;
  overflow-y: auto;
}

.src {
  border-left: 3px solid var(--dossier-colour, #1a1a1a);
  padding-left: .5rem;
}

.src__meta {
  display: flex;
  gap: .4rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.src__outlet {
  font-family: var(--font-type);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 700;
  color: var(--red);
}

.src__when {
  font-family: var(--font-type);
  font-size: .56rem;
  color: var(--ink-soft);
}

.src__headline {
  display: block;
  font-size: .74rem;
  line-height: 1.35;
  margin-top: .1rem;
}
.src__headline a { color: var(--ink); text-underline-offset: 2px; }
.src__headline a:hover { color: var(--blue); }

.dossier__nosource {
  font-family: var(--font-type);
  font-size: .68rem;
  color: var(--ink-soft);
  margin: 0;
  padding: .4rem .5rem;
  border: 2px dashed var(--ink-soft);
}

.dossier__caveat {
  font-family: var(--font-type);
  font-size: .58rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: .7rem 0 0;
  padding-top: .45rem;
  border-top: 1px dashed var(--ink-soft);
}

.dossier__stamp { letter-spacing: .1em; }