/* Plain CSS only. Tailwind component classes live in the inline
   <style type="text/tailwindcss"> block in index.html, because the Play CDN
   does not compile linked stylesheets. */

.maplibregl-ctrl-attrib,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left { display: none !important; }
.maplibregl-canvas { outline: none; }

/* Compare handle: a full-height bar with a grip in the middle. The handle is
   the only thing over the map that takes pointer events; the "today" map
   underneath it is pointer-events: none so the base map keeps panning. */
#compare-handle { width: 0; cursor: ew-resize; touch-action: none; }
.compare-line {
  position: absolute; inset: 0 auto 0 -1px; width: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
}
.compare-grip {
  position: absolute; top: 88%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: #fff; color: #1c1917;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.1);
  transition: transform 120ms;
}
#compare-handle.dragging .compare-grip { transform: translate(-50%, -50%) scale(1.08); }
/* A wider invisible hit area so the 2 px line is easy to grab. */
#compare-handle::before { content: ''; position: absolute; inset: 0 -14px; }
.compare-tag {
  position: absolute; top: 0.75rem; padding: 5px 14px; border-radius: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  color: #fff; background: rgb(28 25 23 / 0.8); backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  pointer-events: none;
}
.compare-tag-left  { right: 12px; }
.compare-tag-right { left: 12px; }

/* Scale bar: the ruler line next to the distance label. */
.scale-bar {
  display: inline-block; height: 7px; width: 40px;
  border: 1px solid #57534e; border-top: 0;
  transition: width 120ms ease-out;
}

#results li[aria-selected="true"] { background: #f5f5f4; }

/* ── memories ────────────────────────────────────────────────────────
   Pins are HTML in #memories-layer, positioned by memories.js with a
   translate() from map.project(). Each element anchors itself with margins
   so the translate lands on the geographic point. */
#memories-layer > * {
  position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
  /* memories.js sets --x/--y from map.project(). The hover scale lives in the
     same transform on purpose: the separate `scale` property composes with
     `transform`, which multiplies the translate too and sends the pin flying
     away from the cursor. */
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));
}

.mem-pin {
  width: 36px; height: 36px; margin: -44px 0 0 -18px;      /* anchor: bottom-centre, above the tail */
  border-radius: 50%; background: #fff; color: #78350f;
  box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgb(0 0 0 / 0.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: visible;
  transition: box-shadow 120ms;
}
.mem-pin::after {                                           /* the tail */
  content: ''; position: absolute; left: 50%; bottom: -7px;
  width: 10px; height: 10px; margin-left: -5px;
  background: #fff; transform: rotate(45deg);
  box-shadow: 2px 2px 3px rgb(0 0 0 / 0.25);
  z-index: -1;
}
.mem-pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mem-pin svg { width: 18px; height: 18px; }
.mem-pin:hover, .mem-pin.is-open { --s: 1.12; box-shadow: 0 0 0 2.5px #f59e0b, 0 3px 8px rgb(0 0 0 / 0.5); z-index: 1; }

.mem-cluster {
  min-width: 36px; height: 36px; padding: 0 8px; margin: -18px 0 0 -18px;   /* anchor: centre */
  border-radius: 999px; background: #1c1917; color: #fff;
  font: 600 13px/36px Inter, system-ui, sans-serif;
  box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgb(0 0 0 / 0.45);
  cursor: pointer;
}
.mem-cluster:hover { --s: 1.08; }

.mem-draft {
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgb(0 0 0 / 0.5);
  pointer-events: none !important;
}
.mem-draft::before {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid #f59e0b; opacity: 0.7;
  animation: mem-pulse 1.4s ease-out infinite;
}
@keyframes mem-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }

/* honeypot: present in the form, invisible to people */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
/* the form's type picker */
.type-opt { display: none; }
.type-opt + span {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 6px; border-radius: 10px; border: 1px solid #d6d3d1;
  font-size: 12px; font-weight: 600; color: #57534e; cursor: pointer; text-align: center;
  transition: border-color 120ms, background 120ms;
}
.type-opt + span svg { width: 20px; height: 20px; color: var(--c); }
.type-opt + span:hover { background: #fafaf9; }
.type-opt:checked + span { border-color: #1c1917; background: #fafaf9; color: #1c1917; box-shadow: inset 0 0 0 1px #1c1917; }

/* ── mobile ──────────────────────────────────────────────────────────
   Collapsed, the Imagery panel keeps its full 17rem even when it shows
   nothing but a title, which on a 390 px screen sits on top of the search
   box. Shrink it to the icon so the top row fits. */
@media (max-width: 639px) {
  /* The search is collapsed behind the magnifier here, so the top controls are
     a single row and the tags sit just under it: 0.75rem inset + 2.75rem button
     + the same 0.5rem the bar uses between its own controls. Opening the search
     adds a second row, so they drop back below it. */
  .compare-tag { top: 4rem; }
  body.search-open .compare-tag { top: 7.5rem; }
  #imagery-panel.is-collapsed { width: auto; }
  #imagery-panel.is-collapsed #panel-title { display: none; }
  #imagery-panel.is-collapsed #panel-toggle { gap: 0.25rem; }
}

/* Touch targets. iOS HIG and Material both want ~44px; the panel rows were
   32px and the map buttons 40px. Scoped to coarse pointers so the desktop
   layout is untouched. */
@media (pointer: coarse) {
  .seg { min-height: 44px; }
  [role="switch"] { min-height: 44px; }
  /* button.mapbtn, not .mapbtn: @apply h-10 lands in the Tailwind layer, which
     the CDN injects after this file, so a bare class selector loses the tie. */
  button.mapbtn { height: 44px; width: 44px; }
  #panel-toggle { min-height: 48px; }
  #search { padding-top: 6px; padding-bottom: 6px; }
  .type-opt + span { min-height: 44px; }
  /* Memory pins are the main thing to tap on the map. The margin anchors the
     pin's tail on the geographic point, so it has to grow with the pin:
     left = -width/2, top = -(height + 8px tail). */
  .mem-pin { width: 44px; height: 44px; margin: -52px 0 0 -22px; }
  .mem-pin svg { width: 22px; height: 22px; }
}

/* ── brand: "Cyprimento" + (i) ───────────────────────────────────────
   Hovering anywhere on the pill opens the card. The card is inside #brand
   and its padding-top bridges the gap, so the hover survives the move
   down into it. A click/tap on the (i) pins it via aria-expanded. */
#brand:hover #brand-pop,
#brand:has(:focus-visible) #brand-pop,
#brand:has(#brand-info[aria-expanded="true"]) #brand-pop { display: block; }
/* No hover on touch: only a tap opens the card. */
@media (hover: none) {
  #brand:hover #brand-pop { display: none; }
  #brand:has(#brand-info[aria-expanded="true"]) #brand-pop { display: block; }
}

/* ── measure ─────────────────────────────────────────────────────────
   Screen-space polyline redrawn from map.project() on every move, so it
   sits above both halves of the compare split like the memory pins. */
#measure-line {
  fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  paint-order: stroke; filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.7));
}
#measure-points circle { fill: #fff; stroke: #f59e0b; stroke-width: 3; }
.measure-tag {
  position: absolute; left: 0; top: 0; transform: translate(var(--x), var(--y)) translate(12px, -50%);
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; background: rgb(28 25 23 / 0.85); box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
}