/* ══════════════════════════════════════════════════════════════════════════ ПОЯСНЕНИЕ ПОД ЗНАКОМ «?» — ОДИН СПОСОБ НА ВСЮ СИСТЕМУ Заведено решением заказчика В-75 от 22.09.2026 («кажется вообще у нас отличается от гектаро»), требование ТР-606. Дата файла — 22.09.2026. ЧТО СЮДА УХОДИТ И ЧТО НЕ УХОДИТ. Под знак убирается ПОЯСНЕНИЕ — откуда взялось число, как считается остаток, почему цена договорная. НЕ уходит ОТКАЗ: сообщение о том, почему действие недоступно и что сделать вместо, остаётся видимым текстом. Спрятанный под значок выход стоит дороже звонка, и прораб позвонит, а не нажмёт. Стиль отказа (`.badge--warn`, `.field__hint--error`) этот файл не трогает вовсе. ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ДОПИСЬЮ В `app.css`. `base.css` — побайтная копия прототипа (ТР-573), его не правят никогда. `app.css` и `dialog.css` в эти же дни правят другие заходы, а два захода в одном файле неизбежно расходятся. Порядок подключения — последним: подсказка обязана лежать ПОВЕРХ листа, и тень у неё остаётся по самому В-75 («тень остаётся у того, что должно лежать поверх листа»). ЦВЕТА — ТОЛЬКО ТОКЕНАМИ. Ни одного шестнадцатеричного значения ниже. Пары СНЯТЫ С ЖИВОЙ СТРАНИЦЫ 22.09.2026 (`getComputedStyle` в браузере, экран платежей) и посчитаны формулой WCAG — (L1+.05)/(L2+.05): знак `--text2` на листе `--surface` 5.51 светлая · 7.74 тёмная знак `--text2` на полосе `--surface2` 5.03 светлая · 6.90 тёмная знак под мышью `--text` на `--surface3` 14.48 светлая · 11.05 тёмная текст подсказки `--text` на `--surface` 17.85 светлая · 14.48 тёмная обводка знака = `currentColor` 5.51 светлая · 7.74 тёмная кольцо фокуса `--accent-main` на листе 6.70 светлая · 8.21 тёмная рамка подсказки `--line2` на листе 2.56 светлая · 4.92 тёмная Текст и знак — норма 4.5:1, нетекстовое — 3:1. Замер СНИМАЕТСЯ С ПАЛИТРЫ, А НЕ С ФАЙЛА: значения токенов в этот же день правил соседний заход, и посчитанное по `app.css` разошлось бы с увиденным (проверено: по файлу выходило 6.76, на странице 5.51). ОБВОДКА ЗНАКА ВЗЯТА `currentColor`, А НЕ `--line2`. Причина числом: `--line2` на белом даёт 2.56 — ниже 3:1, то есть кружок, которым человек целится, был бы неразличим. `currentColor` — тот же цвет, что у самого «?», и обводка идёт за ним в обеих темах и во всех состояниях разом. РАМКА ПОДСКАЗКИ (2.56 светлая) нормы 3:1 не держит и держать не обязана: границу подсказки несёт ТЕНЬ, и это прямо сказано в В-75 («тень остаётся у того, что должно лежать поверх листа: окно документа, выпадающее меню, подсказка»). Рамка здесь — уточнение края, а не единственный признак. ══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. ЗНАК ────────────────────────────────────────────────────────────── ЦЕЛЬ НАЖАТИЯ РОВНО 24×24 px. WCAG 2.5.8 (AA) разрешает 24 для мелкого вспомогательного органа; меньше делать нельзя, а больше — знак начнёт спорить с подписью, рядом с которой стоит. Сам кружок нарисован обводкой по всей цели, то есть видимая часть и есть цель: «видно 12, а нажимается 24» учит промахиваться. Обёртка `inline-flex` с `vertical-align: middle` — чтобы знак стоял по центру строки подписи и не растягивал её высоту. */ .hint{ position: relative; display: inline-flex; vertical-align: middle; /* Отступ от подписи слева. Справа отступа нет: следующим идёт либо конец строки, либо двоеточие. */ margin-left: var(--p1); } .hint__glyph{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--text2); font: inherit; font-size: var(--t1); font-weight: 600; line-height: 1; /* Знак стоит в подписях, набранных капителью и в разрядку (`.field__name`, `.section__name`, `th`). Без этих двух строк «?» уезжал бы вправо на величину межбуквенного интервала и терял бы центр кружка. */ letter-spacing: 0; text-transform: none; cursor: help; } .hint__glyph:hover{ color: var(--text); background: var(--surface3); } /* Кольцо фокуса — то же, что у остальных органов системы. `:focus-visible`, а не `:focus`: при нажатии мышью кольцо не нужно, подсказка и так открыта. */ .hint__glyph:focus-visible{ outline: 2px solid var(--accent-main); outline-offset: 1px; color: var(--text); border-color: var(--accent-main); } /* ЗНАК В ШАПКЕ ТАБЛИЦЫ ШИРИТ КОЛОНКУ, И ДЕШЕВЛЕ ЭТО НЕ ВЫХОДИТ. Замерено 22.09.2026 на «Сроках работ» при 375 px: таблица без знаков 529 px, со знаками 593 px при видимых 360. Пробовали вернуть место переноса нулевым пробелом перед знаком — стало 632, то есть ХУЖЕ: перенос браузер не сделал, а ширину пробела прибавил. Правило снято, число оставлено, чтобы второй заход не потратил на это время снова. Сама таблица не помещается на телефон и БЕЗ знаков — это её отдельный долг, а не долг пояснения. */ /* ─── 2. РАССТОЯНИЕ ДО СОСЕДНЕГО ОРГАНА ──────────────────────────────────── Два знака подряд (соседние колонки таблицы, две подписи в одной строке) обязаны отстоять друг от друга на 24 px по центрам. Цель у нас ровно 24×24 и вплотную они не встают, но правило записано явно, чтобы следующая правка его не потеряла. */ .hint + .hint{ margin-left: 12px; } /* ─── 3. ПОДСКАЗКА ───────────────────────────────────────────────────────── `display: none`, а НЕ прозрачность. Причина не в красоте: узел с `display: none` не участвует в вычислении ДОСТУПНОГО ИМЕНИ соседей — а знак стоит внутри `