/* Research evidence layer — desktop: draggable polaroids; mobile: static grid.
   Shared by initiation memo and field notes with researchLayerPartial. */

.researchLayer {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  overflow: hidden;
}

.researchPolaroid {
  position: absolute;
  width: clamp(150px, 16vw, 245px);
  padding: 10px 10px 34px 10px;
  background: #f2f2ed;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.26);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r));
  transition: box-shadow 160ms ease, filter 160ms ease;
}

html:not(.mode-invert) .researchPolaroid {
  background: #e9e9e2;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.researchPolaroid.is-dragging {
  cursor: grabbing;
  z-index: 999;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.researchPolaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.researchPolaroid.is-wide img {
  aspect-ratio: 5 / 3.4;
}

.researchPolaroid.is-detail img {
  aspect-ratio: 4 / 5.4;
}

.researchPolaroid figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

.researchPolaroid figcaption span:last-child {
  color: rgba(0, 0, 0, 0.46);
}

.researchLayerGuide {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 121;
  pointer-events: none;
  color: var(--dim);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.74;
}

@media (max-width: 1180px) {
  .researchLayer {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 560px;
    margin: 36px auto 0 auto;
    padding: 0 clamp(16px, 4vw, 24px) 48px clamp(16px, 4vw, 24px);
    pointer-events: auto;
    overflow: hidden;
  }

  .researchPolaroid,
  .researchPolaroid.is-wide,
  .researchPolaroid.is-detail {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 5px 5px 20px 5px;
    transform: none !important;
    cursor: default;
    touch-action: auto;
    pointer-events: auto;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .researchPolaroid img,
  .researchPolaroid.is-wide img,
  .researchPolaroid.is-detail img {
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(0, 0, 0, 0.14);
  }

  .researchPolaroid figcaption {
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: 7px;
  }

  .researchLayerGuide {
    display: none;
  }
}

@media (max-width: 420px) {
  .researchLayer {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .researchPolaroid figcaption {
    font-size: 6px;
    gap: 4px;
  }
}