/* newpost — карточка нового поста.

   Квадратная ячейка ленты профиля: стоит первой и с места не уходит,
   посты ложатся справа от неё и переносятся на следующие строки.

   Нажатие само ничего не открывает: карточка сообщает о нём событием
   np:action, и заводить окно поста решает тот, кто её вставил.

   Размер задаёт место, где карточка стоит: в сетке она растягивается
   на ширину колонки, высоту ведёт aspect-ratio. Скругление — общий
   калибр с постами (--post-radius из main.css): карточка и посты
   в одной сетке должны быть одной формы.

   Фон — тёмный, как у страницы: карточка утоплена в панель, как пустой
   круг аватарки, а акцент несут обводка, плюс и подпись. Под курсором
   в тёмный подмешивается чуть акцента — рецепт тот же, из которого
   собрана сама панель, только вместо белого там акцент.

       --np-radius  скругление ячейки; по умолчанию — общий калибр
       --np-plus    сторона плюса */

.newpost {
    --np-radius: var(--post-radius, 16px);
    --np-plus: 42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--color-selected);
    border-radius: var(--np-radius);
    background-color: var(--color-dark);
    color: var(--color-accent);
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease), border-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Зов — обводка густеет, в фон подмешивается чуть акцента, плюс
   растёт: карточка зовёт не переездом, а знаком. Подпись при этом
   наливается до полного акцента: в покое она приглушена, под курсором
   — само действие. */
.newpost:hover {
    background-color: color-mix(in srgb, var(--color-dark) 94%, var(--color-accent));
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.newpost:hover .newpost__plus {
    transform: scale(1.08);
}

.newpost:hover .newpost__caption {
    color: var(--color-accent);
}

/* Нажатие — акцента в фоне чуть больше, обводка гуще: карточка
   вдавливается, и место нажатия читается даже без движения курсора. */
.newpost:active {
    background-color: color-mix(in srgb, var(--color-dark) 88%, var(--color-accent));
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* Фокус — обводка акцентом: та же краска, что у других обводок сайта. */
.newpost:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Плюс — фигура из двух полос, а не иконка из svg: он растёт вместе
   с карточкой и красится currentColor, той же краской, что и всё
   остальное на акценте (см. plusbutton). */
.newpost__plus {
    position: relative;
    width: var(--np-plus);
    height: var(--np-plus);
    transition: transform 0.2s ease;
}

.newpost__plus::before,
.newpost__plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

/* Толщина — восьмая часть стороны, как у плюса plusbutton: фигура
   остаётся тонкой при любом размере карточки. */
.newpost__plus::before {
    width: 100%;
    height: calc(var(--np-plus) * 0.125);
}

.newpost__plus::after {
    width: calc(var(--np-plus) * 0.125);
    height: 100%;
}

/* Подпись под плюсом — приглушённый акцент: это приглашение, а не
   заголовок. Пустая надпись места не занимает: карточку можно
   поставить и без слов. */
.newpost__caption {
    font-size: 13px;
    line-height: 1.35;
    color: color-mix(in srgb, var(--color-accent) 72%, transparent);
    transition: color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

.newpost__caption:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .newpost,
    .newpost__plus,
    .newpost__caption {
        transition: none;
    }
}