/* shared/runtime/controls.css
 *
 * Один чекбокс и один радио на всю платформу.
 *
 * ── Что было ──────────────────────────────────────────────────────────────
 * Семь разных булевых контролов, каждый со своей геометрией и своим цветом:
 *   • нативный `accent-color` 16px в мастере создания;
 *   • нативный `accent-color` 18px в модалках выбора победителя (.wcm-check);
 *   • круглый радио-подобный чекбокс 20px в модалках участника
 *     (.checkbox-input — визуально радио, семантически чекбокс);
 *   • квадрат 16px со своей галочкой на авторизации (.pauth-consent);
 *   • квадрат 22px с галочкой через clip-path на шаге бустеров;
 *   • ещё две копии тумблера в company-dashboard.css.
 * Нативные варианты вдобавок отличались от кастомных по высоте и не давали
 * управлять цветом галочки.
 *
 * ── Эталон ────────────────────────────────────────────────────────────────
 * За основу взят контрол с шага бустеров — он и нравится: квадрат со
 * скруглением, тонкая обводка, при выборе заливается акцентом и показывает
 * галочку. Здесь он описан один раз и применяется ко ВСЕМ чекбоксам
 * платформы без правки разметки: стилизуется сам `input`, а не обёртка.
 *
 * Радио — тот же контрол, но круглый и с точкой вместо галочки: разница в
 * форме сообщает разницу в поведении (одно из многих против независимых
 * флажков). Это не «ещё один вариант», а вторая половина одного компонента.
 *
 * Тумблер (.ws-switch) остаётся ровно для настроек «включено/выключено»,
 * где нет действия подтверждения. Разметку `.toggle-switch > input +
 * .toggle-slider` из мастера создания подхватываем сюда же, чтобы у неё не
 * было третьего вида.
 */

/* ==========================================================================
   ЧЕКБОКС И РАДИО
   ========================================================================== */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    position: relative;
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--ws-line-strong);
    border-radius: 6px;
    background: var(--ws-surface);
    color: var(--ws-primary-fg);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="radio"] {
    border-radius: var(--ws-radius-full);
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
    border-color: var(--ws-primary);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--ws-primary);
    border-color: var(--ws-primary);
}

/* Галочка нарисована рамкой, а не глифом шрифта: так она одинакова во всех
   ОС и не зависит от того, какой шрифт подставится. */
input[type="checkbox"]::before {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--ws-radius-full);
    background: currentColor;
    transform: scale(0);
    transition: transform .15s ease;
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Промежуточное состояние — для «выбрать все». */
input[type="checkbox"]:indeterminate {
    background: var(--ws-primary);
    border-color: var(--ws-primary);
}

input[type="checkbox"]:indeterminate::before {
    width: 10px;
    height: 0;
    margin-top: 0;
    border-width: 0 0 2px 0;
    transform: none;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--ws-primary);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   ТУМБЛЕР — только для настроек «включено/выключено»
   ==========================================================================
   Раньше: серый кружок на серой дорожке с обводкой — выключенный и
   «сломанный» выглядели одинаково. Теперь: дорожка в оттенок акцента,
   белый бегунок с мягкой тенью; включён — дорожка акцентом. В тёмной теме
   бегунок светлый, а во включённом — цвета текста на акценте, чтобы не
   сливаться с розовой дорожкой.
   ========================================================================== */
:root {
    /* Светлая — только токены акцента из канона (--ws-bg-soft,
       --ws-primary-line). Цвет текста не подмешиваем: он даёт коричневый. */
    --ws-switch-off:          var(--ws-bg-soft);
    --ws-switch-off-hover:    var(--ws-primary-soft-strong, #efe3e8);
    --ws-switch-off-line:     var(--ws-primary-line);
    --ws-switch-knob:         #ffffff;
    --ws-switch-knob-on:      var(--ws-primary-fg);
    --ws-switch-knob-shadow:  0 1px 3px rgba(79, 12, 40, 0.22);
}
body.theme-dark {
    --ws-switch-off:          color-mix(in srgb, var(--ws-fg) 13%, var(--ws-surface));
    --ws-switch-off-hover:    color-mix(in srgb, var(--ws-fg) 18%, var(--ws-surface));
    --ws-switch-off-line:     color-mix(in srgb, var(--ws-fg) 6%, transparent);
    --ws-switch-knob:         color-mix(in srgb, var(--ws-fg) 82%, var(--ws-surface));
    --ws-switch-knob-on:      var(--ws-primary-fg);
    --ws-switch-knob-shadow:  0 1px 3px rgba(0, 0, 0, 0.45);
}

.ws-switch,
.toggle-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
}

/* Внутри тумблера input — это механика, а не вид: прячем общий чекбокс. */
.ws-switch > input,
.toggle-switch > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: var(--ws-radius-full);
    background: none;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.ws-switch > input::before,
.toggle-switch > input::before {
    content: none;
}

.ws-switch__track,
.toggle-switch > .toggle-slider {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: var(--ws-radius-full);
    background: var(--ws-switch-off);
    box-shadow: inset 0 0 0 1px var(--ws-switch-off-line);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.ws-switch:hover > .ws-switch__track,
.toggle-switch:hover > .toggle-slider {
    background: var(--ws-switch-off-hover);
}

.ws-switch__track::before,
.toggle-switch > .toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: auto;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--ws-radius-full);
    background: var(--ws-switch-knob);
    box-shadow: var(--ws-switch-knob-shadow);
    transform: none;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
}

.ws-switch > input:checked ~ .ws-switch__track,
.toggle-switch > input:checked + .toggle-slider {
    background: var(--ws-primary);
    box-shadow: none;
}

.ws-switch > input:checked ~ .ws-switch__track::before,
.toggle-switch > input:checked + .toggle-slider::before {
    background: var(--ws-switch-knob-on);
    transform: translateX(16px);
}

.ws-switch > input:focus-visible ~ .ws-switch__track,
.toggle-switch > input:focus-visible + .toggle-slider {
    outline: 2px solid color-mix(in srgb, var(--ws-primary) 55%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    input[type="checkbox"],
    input[type="radio"],
    input[type="checkbox"]::before,
    input[type="radio"]::before,
    .ws-switch__track,
    .toggle-slider,
    .ws-switch__track::before,
    .toggle-slider::before {
        transition: none;
    }
}


/* ==========================================================================
   «КНОПКА СТАЛА ДОСТУПНОЙ»
   ==========================================================================
   Короткий ореол акцентом в момент, когда действие разблокировалось:
   пользователь дозаполнил шаг — кнопка сообщает об этом сама, не заставляя
   искать глазами, что изменилось.

   Раньше эффект жил только в мастере создания и был записан жёстким
   rgba(42, 30, 74, .28) — цветом сливы. В тёмной теме тёмный ореол на
   тёмном фоне не виден вообще, то есть эффекта там просто не было.
   Теперь ореол строится от --ws-primary и работает в обеих темах.

   Класс вешает JS на переходе «заблокирована → доступна» и снимает через
   ~800 мс (см. company-publish.js и winner_selection.winner-confirm.js). */
@keyframes wsUnlockFlash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ws-primary) 55%, transparent); }
    32%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ws-primary) 30%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ws-primary) 0%, transparent); }
}

.ws-unlock-flash,
.wizard-actions .btn-primary.just-unblocked,
#winnerConfirmModal .wcm-btn-final.just-unblocked {
    animation: wsUnlockFlash 720ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .ws-unlock-flash,
    .wizard-actions .btn-primary.just-unblocked,
    #winnerConfirmModal .wcm-btn-final.just-unblocked {
        animation: none;
    }
}

/* ==========================================================================
   Готовность действия: «пока рано» → «уже можно»
   ==========================================================================

   Одно правило на всю площадку. До этого состояние готовности жило в двух
   местах со своими именами — в оболочке диалогов (bx-modal-btn--ready) и на
   странице входа (pauth-btn--ready), — и каждое новое место заводило третье.
   Отсюда и расхождения: где-то кнопка гасла до серого и курсора «запрещено»,
   где-то просто бледнела, а где-то не менялась вовсе.

   Договорённость такая:

   1. Недоступная кнопка НЕ исчезает и не превращается в серую. Она бледнеет,
      оставаясь на месте и в своём цвете: человек видит, к чему идёт. Серый
      читается как «сюда никогда», приглушённый акцент — как «пока рано».

   2. Курсор обычный, а не not-allowed. Запрета здесь нет — есть незаконченный
      ввод, и это разные сообщения.

   3. Переход «нельзя → можно» объявляется ОДНИМ миганием ореола. Не
      пульсацией без конца: постоянное мерцание рядом с полем, в которое
      печатают, мешает читать и раздражает через минуту.

   4. Мигание вешается только на сам переход, а не на каждый набранный
      символ, и не при открытии формы, которая сразу доступна — переходить там
      неоткуда, и вспышка выглядит необъяснимой.

   Как пользоваться: держать на кнопке `disabled` и в момент перехода
   добавлять класс `is-ready`, предварительно сняв его и дёрнув reflow —
   иначе анимация не перезапустится:

       btn.disabled = !ready;
       if (ready && !wasReady) {
           btn.classList.remove('is-ready');
           void btn.offsetWidth;
           btn.classList.add('is-ready');
       }

   Готовая реализация этого — BiloxModalShell.setReady() для диалогов.
   ========================================================================== */

.bilox-action:disabled,
.bilox-action[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.bilox-action.is-ready,
.is-ready {
    animation: bilox-ready-pulse 0.9s ease-out 1;
}

@keyframes bilox-ready-pulse {
    0%   { box-shadow: 0 0 0 0 var(--ws-primary-line); }
    60%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bilox-action.is-ready,
    .is-ready {
        animation: none;
    }
}