/* Окно кадрирования фото (ui/crop.js) в «Каталоге пластинок»: квадратная сцена на матовом
   чёрном, рамка кадра — белый волосок, всё вне рамки притушено, под рамкой — номер
   в каталоге, на место которого встанет фото. Ползунок масштаба — волосок с белой
   полосой-меткой. Оболочка окна (.sheet) — из app.css. */

/* Сторона сцены: во всю ширину листа, но не выше половины экрана — подвал с «Сохранить»
   остаётся виден без прокрутки и на iPhone SE. */
.sheet-crop { --crop-side: min(100%, 44dvh, 26rem); }
.sheet-crop .crop-body { justify-items: center; gap: var(--space-2); padding-bottom: var(--space-3); }
.sheet-crop .crop-body > * { width: var(--crop-side); }

/* Сцена: снимок двигают внутри неё; жесты браузера (прокрутка, масштаб страницы) отключены. */
.crop-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink-raised);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.crop-stage.is-dragging { cursor: grabbing; }
.crop-stage:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* Окно открыто касанием или мышью: фокус на сцене (чтобы стрелки сразу работали), но кольцо —
   только после первой клавиши (ui/crop.js снимает класс). */
.crop-stage.is-pointer:focus-visible { outline: none; }

.crop-img {
  position: absolute; left: 0; top: 0;
  display: block; max-width: none;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}

/* Рамка кадра. Притушенное поле вокруг — контур рамки толщиной во весь экран (его обрезает
   сцена), а не тень: теней в мире нет. */
.crop-frame {
  position: absolute; inset: 8%;
  border: 1px solid var(--paper);
  outline: 100vmax solid rgba(11, 11, 11, 0.72);
  pointer-events: none;
}
.crop-catno {
  position: absolute; left: -1px; top: calc(100% + 0.375rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.625rem; line-height: 1; letter-spacing: 0.04em;
  color: var(--paper); white-space: nowrap;
}

.crop-hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .crop-hint-touch { display: none; }
  .crop-hint-mouse { display: inline; }
}

/* Масштаб: «−» · ползунок · «+». */
.crop-zoom { display: flex; align-items: center; gap: var(--space-1); }
.crop-zoom .btn-icon { color: var(--paper); }
.crop-zoom .btn-icon:disabled { color: var(--line); cursor: default; }
.crop-zoom-label { flex: 1 1 auto; min-width: 0; }

.crop-zoom input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-height: var(--control-h);
  margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  --track: linear-gradient(to right, var(--paper) var(--p, 0%), var(--line) var(--p, 0%));
}
.crop-zoom input[type="range"]:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.crop-zoom input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--track); border: 0; }
.crop-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 0.5rem; height: 1.25rem; margin-top: calc(0.5px - 0.625rem);
  border: 0; border-radius: 0; background: var(--paper);
}
.crop-zoom input[type="range"]::-moz-range-track { height: 1px; background: var(--line); border: 0; }
.crop-zoom input[type="range"]::-moz-range-progress { height: 1px; background: var(--paper); }
.crop-zoom input[type="range"]::-moz-range-thumb {
  width: 0.5rem; height: 1.25rem;
  border: 0; border-radius: 0; background: var(--paper);
}
.crop-zoom input[type="range"]:disabled { cursor: default; }
.crop-zoom input[type="range"]:disabled::-webkit-slider-thumb { background: var(--line); }
.crop-zoom input[type="range"]:disabled::-moz-range-thumb { background: var(--line); }

@media (pointer: coarse) {
  .crop-zoom input[type="range"]::-webkit-slider-thumb { width: 0.75rem; height: 1.75rem; margin-top: calc(0.5px - 0.875rem); }
  .crop-zoom input[type="range"]::-moz-range-thumb { width: 0.75rem; height: 1.75rem; }
}

/* Ошибки: в окне — над подвалом, с кнопкой «Загрузить без кадра»; до окна — под кнопкой
   «Загрузить фото» во всю ширину строки. */
.crop-error { display: grid; justify-items: start; gap: var(--space-2); }
.crop-error[hidden] { display: none; }
.profile-photo-actions .crop-form-error { flex-basis: 100%; }