/* pictureeditor — правка кадра снимка.

   Сама зона — модуль draganddrop (modules/draganddrop): его форма,
   подложка, обводка, выбор файла и корзина. Здесь только правка:
   пока снимок двигают, он лежит в зоне как есть, размеры и сдвиг
   считает скрипт, а форма зоны обрезает лишнее — поэтому в кадре
   видно ровно то, что сохранится. */

.picture-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Кадр правки: то, что уйдёт в готовый снимок. Он совпадает с зоной —
   в покое и в правке это одно и то же место, поэтому снимок после
   сохранения встаёт ровно туда, где его двигали. Владелец вправе
   задать своё место, если кадру нужны другие границы.

   Сам кадр ничего не рисует — по нему считают сдвиг и масштаб,
   а в правке он остаётся чистым, когда всё вокруг гаснет и мылится. */
.picture-editor__frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ===== Правка кадра =====

   Курсор — рука: снимок тянут, колесо и ползунок приближают. */

.picture-editor.is-cropping .dd {
    cursor: grab;
    touch-action: none;
}

.picture-editor.is-dragging .dd {
    cursor: grabbing;
}

/* Снимок в правке позиционируется от кадра, а не течёт по разметке.
   Наведение его не размывает и не приближает: общий приём снимков
   (.thumb-hoverable) здесь выключен — мы двигаем кадр, а не убираем
   фото. */
.picture-editor.is-cropping .dd__previews img {
    position: absolute;
    max-width: none;
    object-fit: fill;
    filter: none;
    transform: none;
}

/* В правке снимок виден всегда: правка открывается только после
   загрузки кадра, а задержка заглушки (HOLD, см. dd.js) гасит класс
   is-loading позже — прятать уже готовый кадр было бы нельзя. */
.picture-editor.is-cropping .dd__thumb.is-loading img {
    visibility: visible;
}

/* Корзина во время правки не нужна: снимок ещё не сохранён. */
.picture-editor.is-cropping .thumb-remove {
    display: none;
}

/* Значки зоны в правке молчат: иначе на наведении значок правки
   встал бы поверх снимка, который двигают, — а место занято самим
   кадром. */
.picture-editor.is-cropping .dd::after {
    display: none;
}

/* ===== Слой правки =====

   Лежит поверх всей страницы, но ничего на ней не рисует: страница
   в правке остаётся как есть, и снимок виден в ней же. Слой держит
   две вещи — заслонки вокруг кадра и плашку с масштабом и кнопками.
   Место просвета ставит скрипт: --pe-x и --pe-y — его левый верхний
   угол, --pe-r и --pe-b — правый нижний, --pe-cx — середина кадра
   по ширине. */
.picture-editor__crop {
    position: fixed;
    inset: 0;
    /* Выше дока (100), ниже интро (200). */
    z-index: 105;
    pointer-events: none;
}

.picture-editor__crop[hidden] {
    display: none;
}

/* Заслонка — полоса вокруг кадра. Краски у неё нет: гаснуть странице
   незачем, правят снимок, а не её. Работа у заслонки другая — держать
   клики: мимо кадра они не долетают до страницы, иначе правку кадра
   перебил бы карандаш соседнего поля. */
.picture-editor__guard {
    position: absolute;
    pointer-events: auto;
}

.picture-editor__guard[data-pe-guard="top"] {
    top: 0;
    left: 0;
    right: 0;
    height: var(--pe-y);
}

.picture-editor__guard[data-pe-guard="bottom"] {
    top: var(--pe-b);
    left: 0;
    right: 0;
    bottom: 0;
}

.picture-editor__guard[data-pe-guard="left"] {
    top: var(--pe-y);
    left: 0;
    width: var(--pe-x);
    height: calc(var(--pe-b) - var(--pe-y));
}

.picture-editor__guard[data-pe-guard="right"] {
    top: var(--pe-y);
    left: var(--pe-r);
    right: 0;
    height: calc(var(--pe-b) - var(--pe-y));
}

/* Плашка с масштабом и кнопками: под кадром, по его середине. Нет
   места под кадром — встаёт над ним, класс is-above ставит скрипт.
   Краски и тень — как у окна: плашка должна читаться окном, а не
   полосой настроек. */
.picture-editor__plate {
    --fill: var(--color-panel);
    --ring-color: var(--color-border);

    position: absolute;
    top: calc(var(--pe-b) + 14px);
    left: var(--pe-cx);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    pointer-events: auto;
    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: var(--shadow-window);
}

.picture-editor__crop.is-above .picture-editor__plate {
    top: auto;
    bottom: calc(100% - var(--pe-y) + 14px);
}

.picture-editor__zoom {
    width: 200px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Кнопки правки мельче обычных: полоса не должна спорить с кадром. */
.picture-editor__crop-button {
    --ib-size: 26px;
    --ib-icon: 14px;

    border-radius: 9px;
}

/* Кнопки сохранённого снимка скрыты, пока правят свежий файл: класс
   задаёт display, поэтому атрибут hidden нужно повторить явно. */
.picture-editor__crop-button[hidden] {
    display: none;
}

.picture-editor__crop-button svg {
    display: block;
    width: var(--ib-icon);
    height: var(--ib-icon);
}