/* Файл: client/js/Widgets/RadioGroup.css
   Визуальный стиль виджета RadioGroup (см. Widgets/RadioGroup.js) — своя независимая копия
   .field-caption: это подпись именно RadioGroup, не обязана меняться вместе с Field/Select/др.

   Важно: .field-caption применяется ТОЛЬКО к настоящей подписи группы ("Answer" и т.п.) — у
   <label>, которым обёрнут КАЖДЫЙ вариант ответа (радиокнопка + текст), класса нет и не должно
   быть. Раньше оба этих <label> красились одним и тем же глобальным правилом по тегу — вариант
   ответа получал жирность и увеличенный шрифт, которые предназначались только для подписи. */

/* margin-bottom убран (2026-09-30) — расстояние до контрола теперь даёт gap родителя
   (.field-group, см. client-form.css), а не собственный отступ подписи. */
.field-caption {
    display: block;
    font-size: var(--font-size, 14px);
    font-weight: normal;
    color: var(--ink, #000);
}

/* Текст варианта ответа (data, см. dataStyle) — раньше без класса, только инлайн из dataStyle
   (пусто по умолчанию), наследовал голый текст страницы. Те же значения, что и caption. */
.radio-option {
    font-size: var(--font-size, 14px);
    font-weight: normal;
    color: var(--ink, #000);
}

/* displayStyle:'Segmented' (см. Widgets/RadioGroup.js) — тот же <input type="radio"> +
   .radio-option, что и обычный List, просто контейнер получает класс .radio-segmented и сам
   <input> визуально прячется (position:absolute;opacity:0) — остаётся в DOM и в tab-порядке ради
   доступности/синхронизации значения (client-form-events.js слушает input[type=radio] как обычно).
   Подсветка выбранного пункта — чистый CSS (:has(input:checked)), без JS-переключения классов по
   клику: один источник истины (состояние самого input), перерисовывать ничего не нужно. */
.radio-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    background: var(--page-bg, #eef2f7);
    border-radius: var(--radius, 10px);
    padding: 3px;
    gap: 2px;
}
.radio-segmented .radio-option {
    position: relative;
    padding: 6px 16px;
    border-radius: var(--radius, 10px);
    cursor: pointer;
    color: var(--ink-soft, #4a5568);
}
.radio-segmented .radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.radio-segmented .radio-option:has(input:checked) {
    background: var(--accent, #0078d7);
    color: var(--accent-ink, #fff);
    font-weight: bold;
}
.radio-segmented .radio-option:hover {
    color: var(--ink, #222);
}
.radio-segmented .radio-option:has(input:checked):hover {
    color: var(--accent-ink, #fff);
}
.radio-segmented .radio-option:has(input:disabled) {
    cursor: default;
    opacity: 0.6;
}