/* anchor-props.css — Anchor Property / critical-lot markers for the Richmond GIS map.
   All selectors are prefixed .anchor-* / #anchor-* so nothing here collides with
   the inline app styles in index.html. */

/* ── Teardrop pin (rendered as an ol.Overlay element) ───────────────────── */
.anchor-pin {
  /* Zero-size ANCHOR POINT. ol.Overlay writes `transform: translate(...)` to this
     element every pan/zoom frame to glue it to the parcel coordinate. A 0x0 box
     lands exactly on the point whether ol applies 'bottom-center' (-50%/-100% of
     0 = 0) or falls back to 'top-left'. The visible pin is the absolutely-
     positioned child below, whose TIP sits on this point. .anchor-pin must NOT
     carry its own transform/transition/will-change. */
  position: absolute;
  width: 0;
  height: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Inner wrapper that scales with zoom. transform-origin is the tip (bottom
   center), so shrinking the pin keeps the tip glued to the lot while the head
   pulls in toward it — instead of a fixed 57px pin towering over a parcel
   that's only a few pixels wide when zoomed out. --anchor-scale is set per
   marker from the map zoom; it lives here (not on .anchor-pin) so it never
   collides with the translate ol.Overlay writes to position the marker. */
.anchor-pin__body {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-left: -23px;                 /* -(head width / 2): centre the tip on the anchor point */
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(var(--anchor-scale, 1));
  transform-origin: center bottom;    /* the tip apex — stays on the point at any zoom scale */
  transition: transform .12s ease;
}

.anchor-pin__head {
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;            /* white border ring around the photo circle */
  border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .45);
  overflow: hidden;
  transform-origin: center bottom;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.anchor-pin:hover .anchor-pin__head { transform: scale(1.08); }
.anchor-pin.is-active .anchor-pin__head {
  transform: scale(1.1);
  border-color: #ffd23f;       /* gold ring when this anchor is in focus */
  box-shadow: 0 0 0 3px rgba(255, 210, 63, .35), 0 2px 8px rgba(0, 0, 0, .5);
}
.anchor-pin__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #13202e;   /* fallback behind a missing/transparent image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* No-image fallback: a small map-pin glyph */
.anchor-pin__img.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6fb6e6;
  font-size: 20px;
  font-weight: 700;
}
.anchor-pin__tip {
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 13px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}
.anchor-pin.is-active .anchor-pin__tip { border-top-color: #ffd23f; }

.anchor-pin__label {
  /* Absolute + out of flow: a label in normal flow would add to the element's
     height, and bottom-center anchoring would then push the tip up off the lot.
     Floating it above the head keeps the tip exactly on the coordinate. */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  max-width: 130px;
  padding: 1px 7px;
  font: 600 11px/1.3 var(--font, Charter, Georgia, serif);
  color: #eaf3fb;
  background: rgba(11, 22, 34, .82);
  border: 1px solid rgba(120, 180, 220, .35);
  border-radius: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ── Toolbar toggle button (matches .btn-toggle in index.html) ──────────── */
#anchor-props-btn.is-on {
  background: rgba(47, 182, 230, .22);
  border-color: rgba(47, 182, 230, .65);
  color: #eaf6fd;
}

/* ── Editor panel ───────────────────────────────────────────────────────── */
/* Docked to the LEFT edge, vertically centred, so it never collides with the
   parcel-detail dock / layers control on the right (the centre-left band is
   clear: top-left has zoom + the selection chip, bottom-left has search). */
.anchor-panel {
  position: fixed;
  top: 50%;
  left: 60px;                 /* just right of the .pmt-cluster icon buttons */
  transform: translateY(-50%);
  z-index: 8500;
  width: 312px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  color: #e7eff7;
  font: 13px/1.45 var(--font, Charter, Georgia, serif);
  background: rgba(13, 24, 36, .94);
  border: 1px solid rgba(120, 180, 220, .28);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.anchor-panel[hidden] { display: none; }

.anchor-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(120, 180, 220, .2);
  background: rgba(20, 34, 50, .7);
}
.anchor-panel__title {
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.anchor-panel__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9fb6cc;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 6px;
}
.anchor-panel__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.anchor-panel__body {
  padding: 12px 13px;
  overflow-y: auto;
}

.anchor-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.anchor-panel__row label { color: #cfe0ef; }

.anchor-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
}
.anchor-toggle-label input { accent-color: #2fb6e6; width: 15px; height: 15px; }

.anchor-panel__hr {
  border: 0;
  border-top: 1px solid rgba(120, 180, 220, .18);
  margin: 12px 0;
}

.anchor-panel__hint {
  color: #8ba2b8;
  font-size: 12px;
  margin: 0 0 4px;
}
.anchor-panel__parcel {
  font-weight: 700;
  color: #7fd0f5;
  font-variant-numeric: tabular-nums;
}

.anchor-field { margin-bottom: 11px; }
.anchor-field > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8ba2b8;
  margin-bottom: 4px;
}
.anchor-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  color: #eaf3fb;
  background: rgba(8, 16, 26, .8);
  border: 1px solid rgba(120, 180, 220, .3);
  border-radius: 7px;
  font: inherit;
}
.anchor-field input[type="text"]:focus {
  outline: none;
  border-color: #2fb6e6;
  box-shadow: 0 0 0 2px rgba(47, 182, 230, .25);
}

/* Image picker + live square preview */
.anchor-image-pick {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.anchor-preview {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: rgba(8, 16, 26, .8) center/cover no-repeat;
  border: 1px solid rgba(120, 180, 220, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5d748a;
  font-size: 11px;
  text-align: center;
  overflow: hidden;
}
.anchor-image-pick__col { flex: 1; min-width: 0; }
.anchor-image-pick__col p { margin: 0 0 7px; color: #8ba2b8; font-size: 11.5px; }

.anchor-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font: 600 12.5px/1 var(--font, Charter, Georgia, serif);
  color: #eaf3fb;
  background: rgba(47, 182, 230, .18);
  border: 1px solid rgba(47, 182, 230, .55);
  border-radius: 8px;
  cursor: pointer;
}
.anchor-btn:hover { background: rgba(47, 182, 230, .3); }
.anchor-btn:disabled { opacity: .5; cursor: not-allowed; }
.anchor-btn--primary {
  width: 100%;
  background: #1f9fd1;
  border-color: #1f9fd1;
  color: #06131d;
  margin-top: 4px;
}
.anchor-btn--primary:hover { background: #2fb6e6; }
.anchor-btn--danger {
  background: rgba(214, 69, 69, .16);
  border-color: rgba(214, 69, 69, .55);
  color: #ffc9c9;
}
.anchor-btn--danger:hover { background: rgba(214, 69, 69, .3); }
.anchor-btn--ghost {
  background: transparent;
  border-color: rgba(120, 180, 220, .35);
  color: #cfe0ef;
}
.anchor-btn--ghost:hover { background: rgba(255, 255, 255, .06); }

.anchor-actions { display: flex; gap: 8px; margin-top: 4px; }
.anchor-actions .anchor-btn { flex: 1; }

.anchor-existing {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 9px;
  border-radius: 9px;
  background: rgba(8, 16, 26, .55);
  border: 1px solid rgba(120, 180, 220, .18);
  margin-bottom: 11px;
}
.anchor-existing__thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #13202e center/cover no-repeat;
  border: 2px solid #fff;
}
.anchor-existing__meta { min-width: 0; }
.anchor-existing__meta b { display: block; color: #eaf3fb; }
.anchor-existing__meta small { color: #8ba2b8; }

.anchor-count {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(120, 180, 220, .15);
  color: #8ba2b8;
  font-size: 11.5px;
}

input.anchor-file-hidden { display: none; }