/* post panel — окно новой записи.
   Обёртку .dock-panel[data-panel="post"] создаёт сервер: она несёт
   размер окна, который забирает док, — только его. Раскладку ведёт
   внутренний див .post-panel.

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

.dock-panel[data-panel="post"] {
    --dock-panel-width: 1560px;
}

/* Пустое окно — тихое и маленькое: один зов на фото, без широкой
   пустой описи. Класс вешает panel.js на обёртку, пока кадров нет;
   с первым кадром окно вырастает до полной страницы. */
.dock-panel[data-panel="post"].is-empty {
    --dock-panel-width: 280px;
}

.post-panel {
    --dock-panel-pad: 20px;

    display: flex;
    gap: 24px;
    min-height: 240px;
    padding: var(--dock-panel-pad);
}

/* ===== Кадры (левая часть) =====

   Большой активный кадр над зоной загрузки. Зона живёт своей жизнью:
   пустая — большой зов на всё место, с кадрами — лента миниатюр. */

.post-panel__photo {
    flex: 1 1 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-panel__preview {
    position: relative;
    flex: none;
    min-height: 120px;
    border-radius: 12px;
    overflow: hidden;
}

/* Колодец виден только у заглушки: пока кадр не дорисовался — или на
   его месте стоит RAW-заметка, — колодец обозначает место под снимком.
   Дорисовавшийся кадр говорит сам за себя: бокс кадра обнимает снимок
   вплотную, и подсвечивать за ним нечего. */
.post-panel__preview.is-loading,
.post-panel__preview:has(.post-panel__preview-note:not([hidden])) {
    background: var(--color-scrim-soft);
}

/* Показ разрешаем только снятием hidden: голый display перебил бы
   атрибут, и большой кадр торчал бы даже когда кадров нет. */
.post-panel__preview:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Кадр — своя ширина и своя высота, обе с пределами. Ширина — не
   больше колонки, высота — с потолком: вертикальный кадр во всю
   ширину сделал бы окно выше предела дока (86vh), и окно начинало бы
   листаться. Потолок подобран по левой колонке: паддинги окна
   (по 20px), зазор и лента миниатюр (72px) съедают 124px — на кадр
   остаётся остальное.

   Бокс кадра обнимает снимок вплотную: горизонтальный кадр занимает
   всю ширину колонки, а вертикальный, уперевшись в потолок, сужается
   до своих пропорций и стоит по центру — без полей слева и справа.
   Скругление — на самом снимке: у узкого кадра края контейнера не
   достают до его углов, и скругление окна прошло бы мимо. */
.post-panel__preview-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(86vh - 130px);
    border-radius: 12px;
}

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

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

.post-panel__preview.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;
}

@media (prefers-reduced-motion: reduce) {
    /* Без анимаций блика нет вовсе: заглушка остаётся тихим штампом. */
    .post-panel__preview.is-loading::after {
        display: none;
    }
}

/* Заглушка кадра без картинки: RAW или нераскрываемый формат.
   Раскладка — тоже через :not([hidden]), по той же причине. */
.post-panel__preview-note {
    color: var(--color-text-muted);
}

.post-panel__preview-note:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.post-panel__preview-note b {
    color: var(--color-ink);
    font-size: 20px;
    letter-spacing: 0.08em;
}

.post-panel__preview-note small {
    font-size: 12px;
}

/* Зона кадров. Пока кадров нет — большой зов на всё место слева,
   но не выше предела: опись справа длинная, и flex растянул бы зону
   вслед за окном на весь экран. */

/* Пустое окно: маленький квадратный зов. */

/* С первым кадром зона сама становится лентой: миниатюры выпускаются
   из своего контейнера прямыми ячейками ряда (display: contents),
   а родной значок загрузки доезжает до конца ряда плиткой —
   порядок ряда держит order.

   Высота ленты фиксированная (72px): ряд в одну линию, карточки и
   плитка равны по высоте. Ширина карточки — своя у каждого фото:
   снимок стоит во всю высоту без обрезки и без полей, поэтому
   вертикальный кадр становится узкой карточкой, а панорама — широкой.
   Пределы ширины стоят, чтобы крайние пропорции не съедали весь ряд. */

/* Перетаскивание на ленту: подложка возвращается, чтобы было видно,
   куда упадёт кадр. */

/* Карточки ленты — миниатюры — во всю высоту ряда (stretch), ширина
   своя у каждого фото (см. выше): снимок во всю высоту, карточка
   обнимает его вплотную. Плитка загрузки держит прежний квадрат
   96×72. Рамка выбора — снаружи, вплотную к краю карточки
   (offset: 0): зазор читался как «пустота между фото и рамкой».
   Минимум ширины — чтобы карточка едущего снимка (когда размеры ещё
   неизвестны) не схлопывалась в щель, максимум — чтобы панорама не
   съедала весь ряд. */

/* Лента полная: плитка перестаёт звать — краски покоя, не наведения. */

/* Миниатюра в окне записи — кнопка выбора, а не карточка удаления.
   Общий приём «размытие с корзиной на весь снимок» (main.css) здесь
   вредит: наведение превращало всё фото в кнопку «убрать», и клик
   по миниатюре удалял кадр вместо переключения. Поэтому у миниатюр
   окна: снимок не размывается, корзина — маленький значок в углу,
   а клик по самому снимку выбирает кадр (перехват в panel.js).
   Снимок стоит во всю высоту ряда, а ширину берёт свою: карточка
   обнимает кадр вплотную — ни обрезки, ни полей. Обрезка достаётся
   только двум случаям: панораме, упёршейся в предел ширины карточки,
   и совсем узкому кадру ниже минимума — минимум стоит, чтобы карточка
   едущего снимка (когда размеры ещё неизвестны) не схлопывалась
   в щель. */

/* ===== Опись (правая часть) =====

   Столбец, у низа которого ждёт кнопка публикации: auto-поле уводит
   действия вниз, как бы ни выросла опись. */

/* Опись в два столбика: слева — слова (название, описание, город,
   теги, дата), справа — кадр (RAW, сетап, параметры съёмки).
   Показ — через :not([hidden]): display перебил бы атрибут, и опись
   торчала бы в пустом окне. */
.post-panel__info {
    flex: 1 1 45%;
    min-width: 0;
}

.post-panel__info:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.post-panel__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 12px;
    align-items: start;
}

/* Обычный столбик — сам по себе слово: показывается только с
   описью (инфо уже снята с hidden), никакого своего hidden не имеет. */
.post-panel__col {
    min-width: 0;
}

.post-panel__col:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Столбик кадра — свой ритм, погуще. Показ — через :not([hidden]):
   у него настоящий атрибут hidden, пока кадров нет. */
.post-panel__col--frame:not([hidden]) {
    gap: 10px;
}

.post-panel__frame-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.post-panel__frame-title {
    font-size: 13px;
    font-weight: 600;
}

/* Метка «это RAW» у кадра, загруженного RAW-файлом. */
.post-panel__frame-mark {
    padding: 2px 8px;
    border-radius: 9px;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-size: 11px;
}

/* Второстепенные кнопки окна: тихая плашка, на наведении — акцент. */
/* «Ко всем кадрам» жмётся к правому краю головы кадра. */
.post-panel__frame-head .post-panel__ghost {
    margin-left: auto;
}

/* Приложенный RAW: имя файла в тихой плашке с крестиком. Крестик —
   бабловый: он красится в цвет плашки через currentColor, но у бабла
   он спрятан до правки, поэтому здесь показываем принудительно. */
.post-panel__raw {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.post-panel__rawfile {
    min-width: 0;
    max-width: 100%;
    padding: 3px 6px 3px 10px;
    border-radius: 15px;
    background: var(--color-surface-inset);
    font-size: 12px;
}

.post-panel__rawfile:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post-panel__rawfile-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Строки «сетап» и «теги»: баблы теми же классами, что в профиле. */
.post-panel__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-panel__row-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-panel__label {
    color: var(--color-text-muted);
    font-size: 12px;
}

.post-panel__bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Метаданные — один параметр на строку, подпись слева. */
.post-panel__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-panel__meta-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.post-panel__meta .inputfield {
    min-width: 0;
}

.post-panel__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

/* Ошибка публикации: строка перед кнопкой. Правило с :not([hidden]):
   скрытие элементов окна — только через разметку. */
.post-panel__status:not([hidden]) {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    font-size: 12px;
    color: var(--color-danger);
}

/* Совсем узкое окно: столбики друг под другом — два по 60px
   не читаются, а один широкий читается. */
@media (max-width: 560px) {
    .post-panel__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

.post-panel__city {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.post-panel__city::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: var(--color-text-muted);
    -webkit-mask: url("/svg/map.svg") center / contain no-repeat;
    mask: url("/svg/map.svg") center / contain no-repeat;
}

.post-panel__city .inputfield {
    min-width: 0;
}

.post-panel [data-dd-thumb][draggable="true"] { cursor: grab; }
.post-panel [data-dd-thumb].is-dragging { opacity: .45; cursor: grabbing; }
.post-panel [data-dd-thumb].is-drop-target { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Теги и сетап следуют тому же ряду баблов, что в профиле. */
.post-panel__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}
.post-panel__bubbles { flex: 0 1 auto; min-width: 0; gap: 8px; }
.post-panel__bubbles > .bubble {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    white-space: normal;
    padding-top: 4px;
    padding-bottom: 4px;
}
.post-panel__bubbles [data-bubble-text] { white-space: normal; overflow-wrap: anywhere; }
.post-panel__row .plusbutton { --pb-size: 30px; --pb-plus: 14px; }

.post-panel__row:has(.post-panel__bubbles:empty) > .plusbutton { display: grid; }
.post-panel__row:has([data-post-setup])::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 7px;
    background: var(--color-text-muted);
    mask: url("/svg/devices.svg") center / contain no-repeat;
}
.post-panel__description { min-width: 0; overflow-wrap: anywhere; }


.post-panel__row > .iconbutton { --ib-size: 30px; --ib-icon: 16px; border-radius: 10px; }
.post-panel__row > .post-panel__bubbles:empty { display: none; }
.post-panel__row > .post-panel__bubbles { max-width: calc(100% - 76px); }


/* Значения метаданных — текст в покое, компактное поле в правке. */
.post-panel__meta .inputfield[data-variant="inline"] .inputfield__input {
    max-width: 100%;
    padding: 6px 8px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.post-panel__meta .inputfield[data-variant="inline"] .inputfield__input:disabled {
    padding: 0 3px 2px 0;
    background: none;
    border-color: transparent;
    color: var(--color-text-secondary);
    -webkit-text-fill-color: var(--color-text-secondary);
    opacity: 1;
}
.post-panel__meta .inputfield__field { min-width: 16px; }
.post-panel__meta .inputfield__row { min-height: 30px; }
.post-panel__meta .inputfield__edit { margin-left: 0; }

.post-panel__row:has([data-post-tags])::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 7px;
    background: var(--color-text-muted);
    mask: url("/svg/tag.svg") center / contain no-repeat;
}
.post-panel [data-text="post-about"][hidden],
.post-panel__description[hidden] { display: none; }
.post-panel__description { cursor: text; }
.post-panel__preview > .post-panel__raw {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0;
    background: none;
}

.post-panel [data-post-raw-add],
.post-panel [data-post-raw-add]:focus-visible {
    border: 0;
    outline: none;
    box-shadow: none;
}

.post-panel [data-post-raw-add] {
    background: var(--color-surface-inset);
    color: var(--color-ink);
}
.post-panel [data-post-raw-add]:hover {
    background: var(--color-accent);
    color: var(--color-accent-fg);
}

/* Ширина колонки ограничена реальной шириной кадра при потолке высоты. */
.post-panel:has(.post-panel__preview:not([hidden])) > .post-panel__photo {
    flex: 0 1 auto;
    width: min(55%, calc((86vh - 130px) * var(--post-photo-ratio, 1.5)));
}
.post-panel__preview:not([hidden]) { justify-content: flex-start; }

.post-panel__actions { gap: 8px; }

.dock-panel[data-panel="post"].is-delete-confirm { --dock-panel-width: 400px; }
.is-delete-confirm > .post-panel { min-height: 0; display: block; }
.is-delete-confirm .post-panel > :not(.post-panel__delete-confirm) { display: none; }
.post-panel__delete-confirm:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.post-panel__delete-confirm p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }
.post-panel__delete-confirm [role="alert"] { color: var(--color-danger); }

.post-editor-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.post-editor-backdrop { position: absolute; inset: 0; background: var(--color-scrim); backdrop-filter: blur(6px); opacity: 0; transition: opacity .32s ease; }
.post-editor-overlay.is-open .post-editor-backdrop { opacity: 1; }
.post-editor-overlay > .post-editor-window {
    position: relative; width: min(var(--dock-panel-width, 1560px), 90vw);
    max-height: 86vh; overflow: auto; border: 1px solid var(--color-border);
    border-radius: var(--window-radius); background: var(--color-panel); box-shadow: var(--shadow-window); outline: none;
}
body:has(.post-editor-overlay) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .post-editor-backdrop { transition: none; } }

.post-panel__row > .plusbutton { display: grid; }

.post-panel__bubbles > .bubble { position: relative; }
.post-panel [data-post-setup-profile] { min-height: 30px; padding: 4px 12px; border-radius: 15px; line-height: 1.35; }
.post-panel__bubbles .bubble.is-editing { padding-right: 24px; }
@media (hover: none) {
    .post-panel__bubbles .bubble[data-variant="dismissible"] { padding-right: 28px; }
    .post-panel__bubbles .bubble[data-variant="dismissible"] .bubble__remove { opacity: 1; filter: none; pointer-events: auto; }
}

.post-panel__row:has([data-post-setup] > .bubble) > [data-post-setup-profile] { display: none; }

.post-editor-overlay:not(.is-open) .post-editor-backdrop { transition-duration: 240ms; }

.post-panel .post-panel__lock { --ib-size: 30px; --ib-icon: 16px; display: grid; opacity: 1; color: var(--color-ink); border-radius: 50%; }
.post-panel .post-panel__lock[aria-checked="true"] { color: var(--color-accent-fg); background: var(--color-accent); }

.post-panel__description-field { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.post-panel__description-field::before {
    content: ""; flex: none; width: 16px; height: 16px; margin-top: 15px;
    background: var(--color-text-muted); mask: url("/svg/text.svg") center / contain no-repeat;
}
.post-panel__description-field > .text { flex: 1; min-width: 0; }

/* Компактный штамп загрузки в ленте миниатюр. */
html .post-panel [data-dd-thumb][data-photo-stage] > .media__loader > img.media__stamp {
    width: 24px;
    height: 24px;
}

.post-panel__rawfile {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    padding: 4px 6px 4px 10px;
    border-radius: 9px;
    line-height: 1.3;
}

.post-panel__row:has([data-post-users])::before {
    content:""; flex:none; width:16px; height:16px; margin-top:7px;
    background:var(--color-text-muted);
    mask:url("/svg/users-collaboration.svg") center / contain no-repeat;
}

.post-panel__user-prefix { flex:none; pointer-events:none; }

.post-panel .post-panel__lock[hidden] { display:none; }

.post-panel__delete-confirm p { text-align:center; }

.post-panel__info { position:relative; }
.post-panel__info > .tooltip { position:absolute; right:0; top:8px; z-index:2; }
.post-panel__set, .post-panel__description-field { margin-right:34px; }

.post-panel__rawfile { position:relative; }
@media(hover:none) {
    .post-panel__rawfile { padding-right:26px; }
    .post-panel__rawfile .bubble__remove { opacity:1; filter:none; pointer-events:auto; }
}

.post-panel__raw-control { position:relative; padding:0; min-height:0; background:transparent; border-radius:9px; max-width:100%; }
.post-panel__raw-control[hidden] { display:none; }
.post-panel__raw-control:not(.is-attached) > .bubble__remove { display:none; }
.post-panel__raw-control.is-attached > .cb { background:var(--color-accent); color:var(--color-accent-fg); }
.post-panel__raw-control [data-post-raw-name] { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(hover:none) { .post-panel__raw-control.is-attached > .cb { padding-right:28px; } .post-panel__raw-control.is-attached > .bubble__remove { opacity:1;filter:none;pointer-events:auto; } }