/* draganddrop — зона для перетаскивания снимков.

   Высота фиксированная: миниатюры не должны растягивать зону
   и поджимать поле текста сверху. */

.dd {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 120px;
    padding: 12px 16px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    /* В покое — подложка в 15% акцента и обводка тем же акцентом,
       но разведённым: граница состояния должна читаться, пока её
       не тронули, и не спорить с содержимым.
       15% — самая слабая ступень акцентной подложки: у кнопки это
       наведение, у зоны — покой. Следующая ступень — 25%. */
    --fill: var(--color-accent-subtle);
    --ring-color: var(--color-border);

    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--motion-control-duration, 220ms) var(--motion-ease, ease), background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Наведение: подложка и обводка обе полегче перетаскивания,
   но обводка уже льётся акцентом целиком. */
.dd:hover {
    --fill: var(--color-accent-soft);
    --ring-color: var(--color-accent);
}

/* Тихая зона: акцента в ней нет ни в покое, ни на наведении — ни
   подложки, ни обводки. Место ничем не выдаёт себя: сквозь зону видно
   то, что под ней, — у шапки профиля это её собственный фон. Зона
   не зовёт снимок и не обводит его рамкой, пока в неё не тащат файл:
   о снимке говорит только размытие со значком (см. upload).
   Нужна там, где зона занимает много места и должна молчать, —
   фото шапки и круг аватарки на странице профиля.

   Вес :where() — ноль, поэтому правило гасит наведение, но не спорит
   с перетаскиванием: у него вес тот же, а стоит оно ниже. */
.dd[data-dd-quiet="1"],
.dd:where([data-dd-quiet="1"]):hover {
    --fill: transparent;
    --ring-color: transparent;
}

/* У зоны с пометкой upload наведение показывает не рамку, а размытие:
   снимка ещё нет, и мылим то, что лежит за зоной, — вместе со значком
   загрузки. Ни подложки, ни обводки тут нет: полоска акцента по краям
   спорила бы со значком. */
.dd[data-dd-upload="1"]:not(.is-loaded):hover {
    --fill: transparent;
    --ring-color: transparent;
}

/* Перетаскивание: самая сильная подложка (25%) и сплошная обводка. */
.dd.is-dragover {
    --fill: var(--color-accent-soft);
    --ring-color: var(--color-accent);
}

/* Достигнут предел: дальше добавлять нечего. Обводка возвращается
   к покойной. */
.dd.is-full {
    --ring-color: var(--color-border);
    cursor: default;
}

/* Пустая зона с пометкой upload: снимка ещё нет, и размывать в самой
   зоне нечего — значит, мылим то, что лежит за ней, и показываем
   значок загрузки. Это и есть зов зоны; подсказку она прячет, потому
   что место у неё большое и знак в нём говорит сам.
   Плёнка выходит за рамку зоны и повторяет её форму: у круга это
   круг, без квадратных углов, а у полосы — её верхние скругления. */
.dd[data-dd-upload="1"]:not(.is-loaded):not(.is-booting):hover::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-dark) 40%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

/* Мягкий зов на наведении — без тёмной плёнки: место не гасится, а
   мылит его хозяин. Так зовут снимок большие места — фото шапки и круг
   аватарки: плёнка накрыла бы и рисунок, и то, что за зоной, а им
   довольно того же размытия, каким снимок отвечает на корзину
   (см. modules/shell/main.css). Здесь остаётся один значок. */
.dd[data-dd-soft="1"][data-dd-upload="1"]:not(.is-loaded):hover::before {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Значок встаёт по центру зоны. Место ему владелец вправе сузить,
   сдвинув край (inset + auto-поля): у шапки профиля он показывает
   не всю зону, а светлую часть — центр зоны пришёлся бы на полосу. */
.dd[data-dd-upload="1"]:not(.is-loaded):not(.is-booting):hover::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 32px;
    height: 32px;
    margin: auto;
    background-color: var(--color-accent);
    /* Не тень зоны, а контраст значка поверх чужого снимка. */
    filter: var(--shadow-icon);
    -webkit-mask: url("/svg/upload.svg") center / contain no-repeat;
    mask: url("/svg/upload.svg") center / contain no-repeat;
    pointer-events: none;
}

/* Занятая зона правимого рода: на наведении значок правки — клик
   открывает правку кадра (см. pictureeditor), поэтому корзина тут
   не нужна (см. ниже). Кадру с разметки (boot) правка пока нечаего
   открывать: снимок ещё не встал. */
.dd[data-dd-edit="1"].is-loaded:not(.is-booting):hover::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 32px;
    height: 32px;
    margin: auto;
    background-color: var(--color-accent);
    filter: var(--shadow-icon);
    -webkit-mask: url("/svg/edit.svg") center / contain no-repeat;
    mask: url("/svg/edit.svg") center / contain no-repeat;
    pointer-events: none;
}

/* Подсказка зоны — значок загрузки, а не слова: он говорит то же самое
   и на любом языке. Место ему — в центре зоны, а краска та же, что
   у подсказок и города: это зов, а не содержимое. */
.dd__hint {
    width: 32px;
    height: 32px;
    background-color: var(--color-text-muted);
    -webkit-mask: url("/svg/upload.svg") center / contain no-repeat;
    mask: url("/svg/upload.svg") center / contain no-repeat;
}

/* У зоны с пометкой upload значок свой — на наведении, поверх размытия
   (см. ниже). Её подсказка молчит всегда. */
.dd[data-dd-upload="1"] .dd__hint {
    display: none;
}

/* Как только добавлен снимок, подсказка убирается. */
.dd.is-loaded .dd__hint {
    display: none;
}

/* Превью лежат поверх зоны. Абсолютное позиционирование нужно,
   чтобы добавление снимков не меняло высоту зоны; inset оставляет
   рамку и фон зоны видимыми по краям. */
.dd__previews {
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.dd__previews:empty {
    display: none;
}

/* Миниатюра: контейнер .thumb-hoverable, здесь только размер и колодец
   под снимком. Размытие и корзина на наведении — общий приём в
   modules/shell/main.css: он же у снимков профиля. */
.dd__thumb.thumb-hoverable {
    width: 120px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    /* Колодец под миниатюрой: тёмный и глубже утопленного поля —
       снимок лежит в ямке, а не на подложке. */
    background: var(--color-scrim-soft);
}

/* Заглушка снимка: пока кадр не дорисовался, он невидим, а в
   миниатюре стоит штамп сайта и ходит блик загрузки — тот же, что
   у карточек (см. postcard.css). Голый кадр на ходу рисует чёрный
   лист с подписью alt — тот самый чёрный экран с надписью, что
   мелькал при загрузке снимков; невидимый до полной загрузки кадр
   его не допускает. Сломанный кадр (is-failed) блику не подлежит:
   штамп остаётся, снимок не показывается вовсе. */
.dd__thumb.is-loading img,
.dd__thumb.is-failed img {
    visibility: hidden;
}

.dd__thumb.is-loading::before,
.dd__thumb.is-failed::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/svg/logo.svg") center / 24px 24px no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

.dd__thumb.is-loading::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(
        135deg,
        transparent 40%,
        var(--color-shine) 46%,
        var(--color-shine) 54%,
        transparent 60%
    );
    animation: postcard-shine 1.6s linear infinite;
    pointer-events: none;
}

/* Круг и полоса: заглушку ведёт хозяин зоны — у круга знак профиля
   (profile.svg, см. profile.css), у шапки рисунок пустой части. Штамп
   и блик миниатюре не нужны: два знака в одном месте дублировали бы
   друг друга, а два слоя света — спорили бы. */
.dd[data-dd-variant="circle"] .dd__thumb.is-loading::before,
.dd[data-dd-variant="circle"] .dd__thumb.is-failed::before,
.dd[data-dd-variant="circle"] .dd__thumb.is-loading::after,
.dd[data-dd-variant="cover"] .dd__thumb.is-loading::before,
.dd[data-dd-variant="cover"] .dd__thumb.is-failed::before,
.dd[data-dd-variant="cover"] .dd__thumb.is-loading::after {
    content: none;
}

/* Одиночный снимок: форма задаётся владельцем — круг под аватарку
   или полоса под фото шапки. Снимок лежит во всю зону, а не
   миниатюрой, поэтому поле зоны ему не нужно. */
.dd[data-dd-variant="circle"],
.dd[data-dd-variant="cover"] {
    padding: 0;
}

.dd[data-dd-variant="circle"] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

.dd[data-dd-variant="cover"] {
    width: 512px;
    height: 160px;
    border-radius: 15px;
}

.dd[data-dd-variant="circle"] .dd__previews,
.dd[data-dd-variant="cover"] .dd__previews {
    inset: 0;
}

/* Снимок во всю зону: форму обрезает сама зона, поэтому у миниатюры
   ни своего радиуса, ни колодца. */
.dd[data-dd-variant="circle"] .dd__thumb.thumb-hoverable,
.dd[data-dd-variant="cover"] .dd__thumb.thumb-hoverable {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none;
}

/* Занятая зона — это сам снимок: подложка и обводка тут лишние, они
   обвели бы фотографию рамкой. Пустая зона их показывает — по ним
   и видно, куда класть снимок. */
.dd[data-dd-variant="circle"].is-loaded,
.dd[data-dd-variant="cover"].is-loaded {
    border-width: 0;
    background: none;
}

/* Перетаскивание поверх готового снимка: показать его можно только
   поверх фотографии — подложка спрятана за ней, а обводки у занятой
   зоны нет. */
.dd[data-dd-variant="circle"].is-loaded.is-dragover::after,
.dd[data-dd-variant="cover"].is-loaded.is-dragover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--color-accent);
    pointer-events: none;
}

/* У правимого рода корзина не нужна: клик по снимку открывает правку
   кадра (см. pictureeditor), и удаление живёт кнопкой в её панели. */
.dd[data-dd-edit="1"] .thumb-remove {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .dd {
        transition: none;
    }

    /* Без анимаций блика нет вовсе: заглушка остаётся тихим штампом. */
    .dd__thumb.is-loading::after {
        display: none;
    }
}

/* Public contextual variant. */
.dd[data-dd-layout="filmstrip"]:not(.is-loaded) {
    flex: 1;
    height: auto;
    min-height: 200px;
    max-height: 320px;
}
.dd[data-dd-layout="filmstrip"].is-loaded {
    --thumb-h: 72px;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    height: var(--thumb-h);
    padding: 0;
    border: 0;
    background: none;
    /* Край зоны не режет ленту: наружной кайме выбранного кадра
       нужно выходить за карточку (offset), а резать её — это и есть
       та самая «полоска справа от фото», огрызок обводки в зазоре. */
    overflow: visible;
}
.dd[data-dd-layout="filmstrip"].is-loaded.is-dragover {
    border-radius: 12px;
    background: var(--color-accent-soft);
}
.dd[data-dd-layout="filmstrip"].is-loaded .dd__previews {
    display: contents;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb.thumb-hoverable {
    box-sizing: border-box;
    width: auto;
    min-width: 48px;
    max-width: 192px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb.is-active {
    outline: 2px solid var(--color-border);
    outline-offset: 0;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb.is-active {
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
}
.dd[data-dd-layout="filmstrip"].is-loaded .dd__hint {
    order: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 96px;
    height: 100%;
    border: 1.5px solid transparent;
    border-radius: 10px;
    --fill: var(--color-accent-subtle);
    --ring-color: var(--color-border);
    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    -webkit-mask: none;
    mask: none;
    transition: border-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}
.dd[data-dd-layout="filmstrip"].is-loaded .dd__hint:hover {
    --fill: var(--color-accent-soft);
    --ring-color: var(--color-accent);
}
.dd[data-dd-layout="filmstrip"].is-loaded .dd__hint::after {
    content: "";
    width: 24px;
    height: 24px;
    background-color: var(--color-text-muted);
    -webkit-mask: url("/svg/upload.svg") center / contain no-repeat;
    mask: url("/svg/upload.svg") center / contain no-repeat;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}
.dd[data-dd-layout="filmstrip"].is-full .dd__hint,
.dd[data-dd-layout="filmstrip"].is-full .dd__hint:hover {
    --fill: var(--color-accent-subtle);
    --ring-color: var(--color-border);
}
.dd[data-dd-layout="filmstrip"] .dd__thumb.thumb-hoverable > img {
    display: block;
    height: 100%;
    width: auto;
    min-width: 48px;
    max-width: 100%;
    object-fit: cover;
    filter: none;
    transform: none;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb.thumb-hoverable:hover > img {
    filter: none;
    transform: none;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb .thumb-remove {
    inset: auto;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-dark) 78%, transparent);
    color: var(--color-danger);
    opacity: 0;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb:hover .thumb-remove,
.dd[data-dd-layout="filmstrip"] .dd__thumb .thumb-remove:focus-visible {
    opacity: 1;
}
.dd[data-dd-layout="filmstrip"] .dd__thumb .thumb-remove svg {
    width: 12px;
    height: 12px;
    filter: none;
}
.dd[data-dd-layout="filmstrip"]:not(.is-loaded) { min-height: 220px; max-height: none; }

/* Keep removal above the RAW loading overlay, including touch screens. */
.dd[data-dd-layout="filmstrip"] .dd__thumb.is-loading .thumb-remove,
.dd[data-dd-layout="filmstrip"] .dd__thumb[data-photo-stage] .thumb-remove { z-index:5; opacity:1; pointer-events:auto; }

/* RAW processing is separate from the image loading lifecycle. */
.dd[data-dd="post"] .dd__thumb.is-rendering-raw > .thumb-remove {
    display: grid;
    position: absolute;
    inset: 2px 2px auto auto;
    width: 24px;
    height: 24px;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}