/* Кадри предмета (packages/ui/frames.js): позначка виду кадру поверх світлини і
   стрічка мініатюр під великою рамкою. Рамку (position: relative, співвідношення
   сторін) дає зона — позначка лише сідає в її правий верхній кут: лівий зайнятий
   бейджем наявності, правий нижній — підписом джерела. */
.ui-frame-mark {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  padding: .16rem .45rem; border-radius: var(--radius-sm);
  background: rgba(var(--green-rgb), .9); color: var(--on-dark);
  font: 700 .64rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase;
  pointer-events: none;
}
.ui-frame-mark[hidden] { display: none; }

.ui-frames { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ui-frame {
  position: relative; width: 72px; aspect-ratio: 4 / 3; padding: 2px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ui-frame .ui-frame-mark { top: 2px; right: 2px; padding: 0 .25rem; font-size: .5rem; }
.ui-frame:hover, .ui-frame[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.ui-frame:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (pointer: coarse) { .ui-frame { width: 88px; } }
@media (prefers-reduced-motion: reduce) { .ui-frame { transition: none; } }