/* RPA · Field notes. A contact-sheet strip: mixed heights on a common baseline, mono numbering.
   Native horizontal scroll first; the motion lane may add dragging (.is-dragging on the root). */

.rpa-field-notes {
  --_inset: 0px;
  --_u: clamp(11.5rem, 7rem + 15vw, 19rem); /* one height unit; shapes below are multiples of it */
  --_rule: var(--rpa-c-rule, var(--rpa-rule));
  --_accent: var(--rpa-c-accent, var(--rpa-petrol));
  width: 100%;
  min-width: 0;
}
.rpa-field-notes--bleed {
  --_inset: max(var(--rpa-gutter), calc((100% - var(--rpa-shell)) / 2 + var(--rpa-gutter)));
}

.rpa-field-notes__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--_inset);
  -webkit-overflow-scrolling: touch;
  padding-block-end: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--_accent) transparent;
}
.rpa-field-notes__viewport:focus-visible { outline-offset: -2px; }
.rpa-field-notes.is-dragging .rpa-field-notes__viewport { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.rpa-field-notes__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0 var(--_inset);
}
.rpa-field-notes__item { flex: none; scroll-snap-align: start; }
.rpa-field-notes__figure { margin: 0; }

.rpa-field-notes__item--a { --_h: calc(var(--_u) * 1.34); }
.rpa-field-notes__item--b { --_h: calc(var(--_u) * 0.92); }
.rpa-field-notes__item--c { --_h: calc(var(--_u) * 1.16); }
.rpa-field-notes__item--d { --_h: calc(var(--_u) * 0.8); }
.rpa-field-notes__item--e { --_h: calc(var(--_u) * 1.05); }

/* Height is fixed per shape; width follows each photograph's own proportions (from its width/height attributes). */
.rpa-field-notes .rpa-field-notes__image > img {
  display: block;
  height: var(--_h);
  width: auto;
  max-width: min(84vw, 38rem);
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.rpa-field-notes--mono .rpa-field-notes__image > img {
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-field-notes--mono .rpa-field-notes__item:hover .rpa-field-notes__image > img,
.rpa-field-notes--mono .rpa-field-notes__item:active .rpa-field-notes__image > img { filter: none; }

/* While the strip is being dragged nothing flips to colour under the passing cursor. */
.rpa-field-notes--mono.is-dragging .rpa-field-notes__item .rpa-field-notes__image > img {
  filter: grayscale(1) contrast(1.05);
  transition: none;
}

.rpa-field-notes__caption.rpa-field-notes__caption {
  display: flex;
  gap: 0.9em;
  max-width: 34ch;
  padding-block-start: 0.7rem;
  border-block-start: 0;
}
.rpa-field-notes__num { flex: none; }

.rpa-field-notes__hint {
  display: flex;
  justify-content: flex-end;
  gap: 0.6em;
  margin: 0.5rem 0 0;
  padding-inline: var(--_inset);
}
/* Touch screens read "Swipe", not "Scroll or drag". */
.rpa-field-notes .rpa-hint-touch { display: none; }
@media (pointer: coarse) {
  .rpa-field-notes .rpa-has-touch-hint .rpa-hint-fine { display: none; }
  .rpa-field-notes .rpa-has-touch-hint .rpa-hint-touch { display: inline; }
}
.rpa-field-notes--empty { padding: 2rem; border: 1px dashed var(--_rule); }

@media (prefers-reduced-motion: reduce) {
  .rpa-field-notes--mono .rpa-field-notes__image > img { transition: none; }
}