/* OpenHub — лист инсталляции: то, чего нет и не может быть в UI-ките.
 *
 * ВТОРОЙ В КАСКАДЕ. Базовый лист кита (oscript-ui.css) приезжает первым тегом <link>,
 * этот — вторым, поэтому правило отсюда перебивает китовое той же специфичностью.
 * Всё, что рисует примитивы кита, живёт в его листе; сюда попадает только то, чей
 * печатающий живёт в хабе.
 *
 * ХЕШ СОДЕРЖИМОГО В АДРЕСЕ. Файл лежит на диске БЕЗ версии в имени, а отдаётся по адресу
 * /static/openhub-<хеш>.css, где хеш — префикс SHA-256 этого файла (считает
 * ОтпечаткиСтатики кита). Любая правка сама меняет адрес.
 *
 * НИ ОДНОГО ЦВЕТА. Значения берутся из CSS-переменных, которые сервер печатает инлайном
 * в <head> (ТокеныТемы кита).
 */

/* --- требования к паролю рядом с полем ввода -------------------------------------
   Список печатает сервер, спросив политику; скрипт лишь помечает выполненные по мере
   набора. Состояние несёт СИМВОЛ отметки, а не только цвет: без цвета список читается
   так же, и без скрипта остаётся обычным списком требований.

   Блок собран элементами кита, поэтому своих имён классов у него нет: и оформление,
   и скрипт находят его по тем же признакам (data-pwreq, data-pwrule, data-pwmark),
   а не по второму, параллельному адресу. Классы состояния добавляет скрипт. */

[data-pwreq] { margin: var(--space-2) 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
[data-pwreq] > p { margin: 0 0 var(--space-1); }
[data-pwreq] > ul { list-style: none; margin: 0; padding: 0; }
[data-pwrule] { display: flex; gap: var(--space-2); align-items: baseline; }
[data-pwmark] { flex: 0 0 1em; text-align: center; }
.pwreq__item--ok { color: var(--color-success); }
.pwreq__item--fail { color: var(--color-danger); }

/* --- подсветка кода в README ----------------------------------------------------
   Блок кода с языком раскрашивает в браузере скрипт oscript-md: он заменяет блок своим
   <pre>, а фон темы GitHub пишет в его атрибут style. Других <pre> с атрибутом style в
   README нет — санитайзер его не пропускает. Блок остаётся блоком страницы: фон у него
   тот же, что у кода без языка, а от темы GitHub приходят только цвета слов, и те
   выбирает color-scheme темы хаба. Атрибут style перебивает только !important. */

.prose pre[style] { background-color: var(--color-surface-alt) !important; }

/* --- панель сохранения: «есть несохранённое» ------------------------------------
   Сама панель — компонент кита, а вот состояние «форма тронута» навешивает скрипт
   ЭТОЙ инсталляции (openhub.js, раздел «панель сохранения»). Кит скриптов не везёт
   и такого класса никогда не создаёт, поэтому правило состояния живёт здесь — рядом
   с тем, кто его ставит. */

.savebar--dirty { box-shadow: var(--shadow-lg); }

/* --- живая форма подписки: сообщение предпросмотра и итог пробы ---------------------
   Предпросмотр показывает уведомление так, как его покажет Telegram: простой текст
   с переносами строк «пузырём» и под ним карточка ссылки. Разметку собирает сервер
   элементами кита, и оформление находит её по тем же признакам, что и скрипт
   (data-sub-*), — своих имён классов у неё нет. Итог пробы несёт состояние словом и
   знаком, цвет — только вторая подсказка. */

/* пустое поле шаблона показывает шаблон по умолчанию целиком — все его шесть строк */
form:has([data-sub-preview]) textarea.field__control { min-height: 10.5em; }
[data-sub-preview] { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
[data-sub-preview][hidden] { display: none; }
[data-sub-bubble] {
	max-width: 32rem; padding: var(--space-2) var(--space-3);
	background: var(--color-surface-alt); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}
[data-sub-text] { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-sub-card] {
	display: grid; gap: var(--space-1); margin-top: var(--space-2); padding-left: var(--space-2);
	border-left: 3px solid var(--color-accent); font-size: var(--font-size-small); overflow-wrap: anywhere;
}
[data-sub-result="err"] { color: var(--color-danger); white-space: pre-wrap; }
[data-sub-trial] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
[data-sub-trial-result] [data-sub-result="ok"] { color: var(--color-success); }