/* Цвет рубрики: свой оттенок на каждую из семи — в ряду пилюль формы они стоят
   рядом, и на общих токенах четыре совпали бы попарно. На body, не на :root:
   тёмный набор темы висит там же, иначе производные молча берут светлые. */
body {
    --nf-rubric-cracked: var(--danger);
    --nf-rubric-removed: var(--accent);
    --nf-rubric-activation: var(--link-color);
    /* Не --warning-border: #D2A146 на белой плите даёт 2.6 к фону. */
    --nf-rubric-update: #b78322;
    --nf-rubric-release: var(--rate-down);
    --nf-rubric-drm: var(--notice-accent);
    --nf-rubric-site: var(--text-secondary);
}

/* Оттенки из макета: ближайшие тёмные токены (#60a5fa, #aea6ff, #bcaaa4)
   в одном ряду расходятся между собой хуже. */
html.dark body {
    --nf-rubric-activation: #7cb7e8;
    --nf-rubric-update: var(--warning-border);
    --nf-rubric-release: #8f85ff;
    --nf-rubric-drm: #c0a08f;
}

.nf-block--empty {display: none;}

/* Контур вместо заливки — общее у всех иконок; размер и толщина у каждой свои. */
.nf-block svg,
.nf-modal svg {fill: none; stroke: currentColor;}

.nf-head {font: 700 15px/1.2 Roboto, sans-serif; color: var(--text-heading); margin: 0 0 14px;}
.nf-head__button {display: flex; width: 100%; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;}
.nf-head__button:focus-visible {outline: 2px solid currentColor; outline-offset: 2px;}
.nf-head svg {width: 15px; height: 15px; flex: none; stroke-width: 2;}

/* Шкала уходит в поле плиты: желоб под точки съедал бы ширину строки. */
.nf-list {list-style: none; margin: 0 0 0 -10px; padding: 0;}

.nf-item {position: relative; padding: 0 0 16px 26px;}
.nf-item:last-child {padding-bottom: 2px;}
.nf-item::before {content: ""; position: absolute; left: 7px; top: 15px; bottom: 0; width: 1px; background: var(--border-medium);}
.nf-item:last-child::before {display: none;}

.nf-dot {position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-card); box-shadow: 0 0 0 1px var(--border-medium); color: var(--nf-color);}
.nf-dot svg {width: 9px; height: 9px; stroke-width: 2;}

.nf-open {display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit;}
/* Высота в точку: иначе тег висит выше её центра. */
.nf-tag {display: flex; align-items: center; min-height: 15px; font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--nf-color);}
.nf-caption {display: block; margin: 6px 0 5px; font: 400 14px/1.35 Roboto, sans-serif; color: var(--text-main);}
.nf-date {display: block; font: 400 11px/1 Roboto, sans-serif; color: var(--text-secondary);}

/* ---- окно: лента и форма ---- */

/* Окно одно на оба вида: форма отдельным <dialog> клала вторую подложку
   поверх первой. */
.nf-modal {
    /* showModal() запирает клики, но не прокрутку: у края она уходит странице. */
    overscroll-behavior: contain;
    /* Сброс `* {margin: 0}` из styles.css убивает центрирование <dialog>. */
    margin: auto;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

/* На тёмном кромку окна держит кант, а не тень. */
html.dark .nf-modal {border-color: var(--border-strong);}

.nf-modal::backdrop {background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}

/* Прокручивается только лента: шапка вынесена из потока прокрутки. Высота
   жёсткая, не max-height: от содержимого окно прыгало между открытиями.
   Ширина 620px держит строку около 65 знаков — при 680px доходило до 80,
   до потолка читаемого диапазона. */
.nf-modal {display: flex; flex-direction: column; width: min(620px, 94vw); max-width: 620px; height: min(780px, 86vh); padding: 0; overflow: hidden; border-radius: var(--radius-xl);}
/* Любой авторский display перебивает UA-правило dialog:not([open]): без этой
   строки закрытое окно остаётся на экране и вдобавок перехватывает клики. */
.nf-modal:not([open]) {display: none;}

/* Хвост ленты гаснет у нижней кромки, иначе строка обрывается на канте. */
.nf-modal::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; pointer-events: none; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: linear-gradient(180deg, transparent, var(--bg-card));}

.nf-modal__head {position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 20px 13px; border-bottom: 1px solid var(--border-light);}
html.dark .nf-modal__head {border-bottom-color: var(--border-strong);}
/* Общая колонка заголовка и того, что стоит при нём. */
.nf-modal__titles {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.nf-modal__head h2 {min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; font: 700 17px/1.2 Roboto, sans-serif; color: var(--text-heading);}
.nf-modal__head h2 svg {width: 17px; height: 17px; flex: none; stroke-width: 2;}
.nf-modal__tools {display: flex; align-items: center; gap: 6px; flex: none;}

/* Вид кнопки возврата общий с крестиком. */
.nf-modal__close,
.nf-modal__back {width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast);}
.nf-modal__close svg {width: 12px; height: 12px; stroke-width: 3;}
.nf-modal__back svg {width: 15px; height: 15px; stroke-width: 2.5; transform: rotate(180deg);}
.nf-modal__close:hover,
.nf-modal__back:hover {background: var(--bg-secondary); color: var(--text-heading);}
/* В ленте возвращаться некуда. Свой display обязателен: [hidden] из UA-стилей
   проигрывает любому авторскому — то же место ниже у ленты, формы и кнопок. */
.nf-modal__back {display: none;}

.nf-modal__sub {font: 400 12px/1.2 Roboto, sans-serif; color: var(--text-secondary);}
.nf-modal__badge {flex: none; padding: 2px 7px; border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-secondary); font: 700 10px/1.35 Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.05em;}
.nf-modal__badge--draft {background: var(--warn-soft-bg); color: var(--warn-soft-ink);}

/* Нижнее поле больше верхнего: под ним градиент кромки. scroll-padding-top
   повторяет верхнее — иначе scrollIntoView() ставит карточку вплотную к шапке
   и срезает её подсветку. */
.nf-modal__body {flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px 20px 26px; scroll-padding-top: 14px; overflow-y: auto; overscroll-behavior: contain;}
/* [hidden] проигрывает авторскому display. */
.nf-modal__body > [hidden] {display: none;}
.nf-modal__body[hidden] {display: none;}
.nf-modal__body > .nf-para {margin: 0;}

/* ---- фильтр по рубрикам ---- */

/* Своя строка в шапке: рядом с заголовком влезало бы штуки две. Уезжает вбок,
   а не переносится — иначе высота шапки плавала бы от числа рубрик. Отрицательные
   поля тянут полосу до краёв плиты, поэтому ширина задаётся вместе с ними; снизу
   отступа нет вовсе — черта выбранной вкладки садится на кромку шапки. */
.nf-filter {flex: 0 0 calc(100% + 40px); display: flex; gap: 18px; margin: 1px -20px -14px; padding: 2px 20px 0; overflow-x: auto; scrollbar-width: none;}
.nf-filter::-webkit-scrollbar {display: none;}
/* Подсказка о прокрутке. У одной рубрики полосы нет — гасить нечего. */
.nf-modal__head:has(.nf-filter)::after {content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 30px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg-card));}

/* Вкладка, а не плашка: выбор держит черта. В покое цвет рубрики вполсилы —
   рубрика узнаётся, но полоса не пестрит. Значение по умолчанию нужно пилюле
   «Все»: остальным его ставит скрипт. */
.nf-chip {--nf-color: var(--text-main); flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: none; color: color-mix(in srgb, var(--nf-color) 50%, var(--text-secondary)); white-space: nowrap; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast);}
/* Тот же шрифт, что у тега в карточке: вкладка и есть тег. */
.nf-chip__label {font: 500 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;}
/* «Все» — не ключ, моноширинным быть нечему. */
.nf-chip--all .nf-chip__label {font: 500 13px/1 Roboto, sans-serif;}
.nf-chip__n {font: 400 11px/1 Roboto, sans-serif; opacity: .65;}
/* Вес прибавляет только выбор, и перебить шорткат font можно лишь отдельно. */
.nf-chip:hover,
.nf-chip[aria-pressed="true"] {color: var(--nf-color); border-bottom-color: var(--nf-color);}
.nf-chip[aria-pressed="true"] .nf-chip__label {font-weight: 700;}
.nf-chip:focus-visible {outline: 2px solid var(--nf-color); outline-offset: -2px;}
/* «Все» — не рубрика, цвета у неё нет: подпись и черта нейтральные. */
.nf-chip--all:hover,
.nf-chip--all[aria-pressed="true"] {color: var(--text-heading); border-bottom-color: var(--text-heading);}

/* ---- запись ---- */

/* Колонки под иконку рубрики нет: она отнимала у текста 47px и оставляла
   пустоту во всю высоту — рубрику называет тег своим цветом. */
.nf-full {position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 13px; padding: 13px 15px 15px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--bg-tertiary);}

.nf-full__head {grid-column: 1; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; min-height: 22px;}
.nf-full__label {font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--nf-color);}
.nf-full .nf-date {font: 400 12px/1.2 Roboto, sans-serif; color: var(--text-secondary);}
html.dark .nf-full .nf-date {color: var(--zinc-400);}

.nf-full__ctl {grid-column: 2; grid-row: 1;}
/* Набор под чтение: глобальные 0.015em разгоняют строку в 15px, а text-wrap:
   pretty не оставляет в конце абзаца одинокого слова. */
.nf-full__body {grid-column: 1 / -1; grid-row: 2; margin-top: 5px; font: 400 15px/1.72 Roboto, sans-serif; letter-spacing: 0.005em; text-wrap: pretty; color: var(--text-main);}
.nf-full__body > :last-child {margin-bottom: 0;}

.nf-para {margin: 0 0 12px;}
.nf-note {color: var(--text-secondary); font-size: 13px;}

/* Вид общий с полем правки: оно показывает результат разметки. Цвет один
   на обе темы и НЕ цвет рубрики — в «Denuvo взломана» все блоки стали бы
   красными; от подложки под блоком тонировка тоже не зависит. */
.nf-quote,
.nf-editor blockquote {padding: 11px 14px; border-left: 3px solid var(--warning-border); border-radius: var(--radius-sm); background: var(--warn-soft-bg);}
/* Только светлая: в тёмной --warn-soft-ink ярче нынешней полосы, а не тише. */
html:not(.dark) .nf-quote,
html:not(.dark) .nf-editor blockquote {border-left-color: var(--warn-soft-ink);}
/* Кегль и отступ свои: меряются от базового текста своего места. */
.nf-quote {position: relative; margin: 0 0 11px; font-size: 14.5px;}
/* :last-of-type, а не :last-child: последний ребёнок свёрнутого блока — шеврон.
   Без `>`: содержимое сворачиваемого блока лежит в обёртке. */
.nf-quote p:last-of-type {margin-bottom: 0;}

/* Свёрнут до трёх строк, разворачивает клик по всему блоку. Высоту среза
   (--nf-clip) считает скрипт по фактическим строкам: зашитая в CSS резала
   строку пополам. Правое поле держат оба класса — иначе после разворота текст
   уходит под шеврон. */
.nf-quote--folded,
.nf-quote--foldable {padding-right: 34px;}
.nf-quote--folded .nf-quote__clip {max-height: var(--nf-clip); overflow: hidden;}
.nf-quote--foldable {cursor: pointer;}
/* Галка на нижней кромке текста: поле снизу равно полю блока. Поле даёт
   padding, а не отступ кнопки, — так у неё остаётся тап-зона 26×24. */
.nf-quote__more {position: absolute; right: 6px; bottom: 0; display: flex; align-items: flex-end; justify-content: center; width: 26px; height: 24px; padding: 0 0 11px; border: 0; background: none; color: var(--warn-soft-ink); opacity: .85; cursor: pointer; transition: opacity var(--transition-fast);}
.nf-quote__more:hover,
.nf-quote__more:focus-visible {opacity: 1;}
.nf-quote__more svg {width: 12px; height: 7px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-fast);}
.nf-quote:not(.nf-quote--folded) .nf-quote__more svg {transform: rotate(180deg);}

/* Вспышка на записи, открытой из блока: короткая запись в окне неотличима
   от соседей. color-mix — полупрозрачной версии у --nf-color нет; где его
   не поддержали, правило отваливается вместе со вспышкой. */
.nf-full--flash::before {content: ""; position: absolute; inset: -1px; border-radius: var(--radius-lg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nf-color) 38%, transparent); opacity: 0; pointer-events: none; animation: nf-flash 2.2s ease;}
@keyframes nf-flash {0% {opacity: 0;} 12% {opacity: 1;} 72% {opacity: 1;} 100% {opacity: 0;}}

/* ---- черновики ---- */

/* Подписей групп в окне нет — черновик отличает сама карточка. */
.nf-full__draft {padding: 2px 7px; border-radius: var(--radius-sm); background: var(--warn-soft-bg); color: var(--warn-soft-ink); font: 700 10px/1.35 Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.05em;}
.nf-full--draft {border-style: dashed; border-color: var(--warn-soft-border);}

.nf-item--draft .nf-dot {box-shadow: none; outline: 1px dashed var(--warn-soft-border); outline-offset: -1px;}
.nf-date--draft {color: var(--warn-soft-ink); font-weight: 500;}

/* ---- панель редактора ---- */

/* Кнопка подписана словом: голая иконка рядом с крестиком читалась как часть
   закрытия. */
.nf-add {flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: none; color: var(--text-secondary); font: 500 13px/1 Roboto, sans-serif; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast);}
.nf-add:hover {color: var(--text-heading); border-color: var(--border-medium);}
html.dark .nf-add {border-color: var(--border-strong);}
.nf-add svg {width: 14px; height: 14px; stroke-width: 2;}

/* Карандаш тише подписи рубрики. Приглушение прозрачностью, не цветом:
   в светлой теме --text-placeholder темнее --text-secondary. */
.nf-edit {width: 26px; height: 26px; margin: -2px -5px 0 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--text-secondary); opacity: .5; cursor: pointer; transition: opacity var(--transition-fast);}
.nf-edit:hover,
.nf-edit:focus-visible {opacity: 1;}
.nf-edit svg {width: 15px; height: 15px; stroke-width: 1.6;}

/* В покое карандаша не видно — проступает по наведению на плитку. Прозрачностью,
   не display: столбец в сетке остаётся занят, и плитка не перекладывается.
   На тач медиазапрос не срабатывает и карандаш виден всегда — иначе не добраться. */
@media (hover: hover) {
    .nf-edit {opacity: 0;}
    .nf-full:hover .nf-edit {opacity: .5;}
    .nf-full:hover .nf-edit:hover,
    .nf-edit:focus-visible {opacity: 1;}
}

/* ---- форма ---- */

/* Второй вид окна. Своей прокрутки у формы нет: прокручивается только поле,
   оно и забирает остаток высоты. */
.nf-form {flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 18px 0;}
/* Тот же [hidden]: без своего display спрятанная форма поджимала бы ленту. */
.nf-form[hidden] {display: none;}

/* Вместе с лентой уходит всё, что относится только к ней. */
.nf-modal--form::after,
.nf-modal--form .nf-modal__head::after {content: none;}
.nf-modal--form .nf-add,
.nf-modal--form .nf-filter {display: none;}
/* Место иконки ленты в шапке занимает кнопка возврата. */
.nf-modal--form .nf-modal__head {padding: 14px 16px 14px 12px;}
.nf-modal--form .nf-modal__head h2 svg {display: none;}
.nf-modal--form .nf-modal__back {display: inline-flex;}

/* ---- выбор рубрики ---- */

.nf-form__label {font: 500 11px/1 Roboto, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);}
.nf-rubrics {display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px;}

/* Семь рубрик видны разом: у родного <select> раскрытый список на macOS рисует
   система, и цвет работал бы только на закрытом контроле. */
.nf-rubric {--nf-color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: none; color: var(--text-secondary); font: 500 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast);}
/* Цвет на самой иконке: часть глифов спрайта заливкой, часть обводкой —
   currentColor красит оба вида. */
.nf-rubric svg {width: 13px; height: 13px; flex: none; color: var(--nf-color); stroke-width: 2;}
.nf-rubric:hover {border-color: var(--border-medium); color: var(--text-main);}
.nf-rubric:focus-visible {outline: 2px solid var(--nf-color); outline-offset: -3px;}
/* Вес — отдельно: в базовом правиле он внутри шортката font. */
.nf-rubric[aria-pressed="true"] {border-color: var(--nf-color); background: color-mix(in srgb, var(--nf-color) 10%, transparent); color: var(--nf-color); font-weight: 700;}

/* ---- поле текста ---- */

/* Панель оформления постоянная: над выделением его приходилось угадывать. */
.nf-editor__box {flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--bg-body); overflow: hidden;}
.nf-editor__box:has(.nf-editor:focus) {border-color: var(--text-secondary);}
.nf-editor__bar {flex: none; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 5px; border-bottom: 1px solid var(--border-light);}
.nf-editor__gap {flex: 1;}

/* Счётчик считает первую строку — ровно ту, что уйдёт в подпись ленты. */
.nf-editor__count {display: inline-flex; align-items: center; gap: 5px; padding-right: 6px; font: 400 11.5px/1 Roboto, sans-serif; color: var(--text-secondary);}
.nf-editor__num {font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-main);}
.nf-editor__max {font: 400 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;}
.nf-editor__count--over .nf-editor__num {color: var(--danger);}

/* Кегль и интерлиньяж как у .nf-full__body: поле показывает результат разметки.
   position — под подсказку: в потоке она встала бы отдельной строкой над полем. */
.nf-editor {position: relative; flex: 1; min-height: 0; padding: 12px 14px; overflow-y: auto; font: 400 15px/1.72 Roboto, sans-serif; letter-spacing: 0.005em; color: var(--text-main); text-wrap: pretty;}
/* Рамку держит карточка вокруг поля. */
.nf-editor:focus {outline: none;}
/* Первая строка уходит в подпись ленты. <div> под неё держит скрипт даже
   в пустом поле: :first-child не считает текстовые узлы, и вид подписи
   достался бы второму абзацу. */
.nf-editor > div:first-child {font: 500 15px/1.6 Roboto, sans-serif; color: var(--text-heading);}
/* Браузер вписывает набранному тексту цвет и начертание удалённого (<font>,
   <span style>). До сервера обёртки не доживают, но в поле красили бы вторую
   строку под первую; инлайновый style бьётся только так. */
.nf-editor font,
.nf-editor [style] {font: inherit !important; color: inherit !important; letter-spacing: inherit !important;}
.nf-editor > div {margin-bottom: 10px;}
.nf-editor > div:last-child {margin-bottom: 0;}
.nf-editor blockquote {margin: 0 0 10px;}
/* Строки блока разделены как абзацы вокруг него: сервер печатает их так же. */
.nf-editor blockquote > div {margin-bottom: 10px;}
.nf-editor blockquote > div:last-child {margin-bottom: 0;}

/* У contenteditable нет placeholder; класс ставит скрипт. */
.nf-editor--empty::before {content: attr(data-placeholder); position: absolute; top: 12px; left: 14px; font: 400 15px/1.72 Roboto, sans-serif; color: var(--text-placeholder); pointer-events: none;}

.nf-form__hint {margin: 10px 0 0; font: 400 12px/1.45 Roboto, sans-serif; color: var(--text-secondary);}

.nf-editor__btn {height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-main); font: 400 13px/1 Roboto, sans-serif; cursor: pointer; transition: background var(--transition-fast);}
.nf-editor__btn:hover {background: var(--bg-secondary);}
.nf-editor__btn--on {background: var(--bg-secondary); color: var(--accent);}

/* Подтверждающие действия справа по возрастанию последствий, отступающие —
   слева: между «Удалить» и «Опубликовать» прежде вставала «Отмена».
   justify-content нужен только перенесённой строке: на нерастянутой всё место
   забирает распорка. */
.nf-form__actions {flex: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 14px -18px 0; padding: 12px 18px; background: var(--bg-card); border-top: 1px solid var(--border-light);}
.nf-form__gap {flex: 1;}
.nf-form__actions button {padding: 9px 14px; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-main); font: 500 13px/1 Roboto, sans-serif; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);}
.nf-form__actions button:hover {border-color: var(--text-secondary);}
/* Тот же [hidden]: кнопка состояния всегда ровно одна. */
.nf-form__actions button[hidden] {display: none;}
.nf-form__actions .nf-publish {display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-color: transparent; background: var(--accent); color: var(--text-on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);}
.nf-form__actions .nf-publish:hover {border-color: transparent; background: var(--accent-hover);}
.nf-form__actions .nf-publish svg {width: 13px; height: 13px; flex: none; stroke-width: 3;}
/* Отступающие действия без плиты: она ставила бы «Отмену» вровень
   с «Сохранить», а нажимают её в другом настроении. */
.nf-form__actions .nf-cancel,
.nf-form__actions .nf-unpublish,
.nf-form__actions .nf-delete {border-color: transparent; background: none; color: var(--text-secondary);}
.nf-form__actions .nf-delete {padding: 9px 12px; color: var(--danger);}
.nf-form__actions .nf-cancel:hover,
.nf-form__actions .nf-unpublish:hover {border-color: var(--border-light); color: var(--text-main);}
.nf-form__actions .nf-delete:hover {border-color: var(--border-light);}
.nf-form__actions button:disabled {opacity: .55; cursor: default;}