/* Общий вид булевых полей: настоящие checkbox сохраняют отправку формы,
   доступность, required, disabled, клавиатуру и промежуточное состояние.
   Важные правила в слое приоритетнее старых !important из экранных стилей:
   новый динамический checkbox получает тот же вид без обработчика JavaScript. */
@layer school-switches {
  input[type="checkbox"]:not([hidden]),
  .quiz-correct-toggle > i,
  .ex-option--multi > i {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--switch-off, #a4adbf) !important;
    background-image: radial-gradient(circle, #fff 0 65%, transparent 70%) !important;
    background-position: 3px center !important;
    background-repeat: no-repeat !important;
    background-size: var(--switch-knob, 22px) var(--switch-knob, 22px) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: inset 0 0 0 1px rgb(17 22 47 / 10%) !important;
    box-sizing: border-box !important;
    clip: auto !important;
    clip-path: none !important;
    color: transparent !important;
    cursor: pointer;
    display: inline-block !important;
    flex: 0 0 var(--switch-width, 50px) !important;
    font-size: 0 !important;
    height: var(--switch-height, 28px) !important;
    inset: auto !important;
    margin: 0 !important;
    max-height: var(--switch-height, 28px) !important;
    max-width: var(--switch-width, 50px) !important;
    min-height: var(--switch-height, 28px) !important;
    min-width: var(--switch-width, 50px) !important;
    opacity: 1 !important;
    padding: 0 !important;
    position: relative !important;
    transition: background-color .18s ease, background-position .18s ease !important;
    vertical-align: middle;
    width: var(--switch-width, 50px) !important;
  }

  input[type="checkbox"]:checked,
  .quiz-correct-toggle[aria-pressed="true"] > i,
  .ex-option--multi[aria-checked="true"] > i {
    background-color: var(--switch-on, var(--control-accent, var(--a-indigo, #6355da))) !important;
    background-position: right 3px center !important;
  }

  /* «Выбрана часть» в админке отличается от включённого и выключенного. */
  input[type="checkbox"]:indeterminate {
    background-color: #ad761b !important;
    background-position: center !important;
  }

  input[type="checkbox"]::before,
  input[type="checkbox"]::after,
  .quiz-correct-toggle > i::before,
  .quiz-correct-toggle > i::after,
  .ex-option--multi > i::before,
  .ex-option--multi > i::after { content: none !important; }

  input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--switch-on, var(--control-accent, #6355da)) !important;
    outline-offset: 3px;
  }
  input[type="checkbox"]:disabled,
  .quiz-correct-toggle:disabled > i,
  .ex-option--multi:disabled > i { cursor: not-allowed; opacity: .5 !important; }

  input[type="checkbox"][hidden] { display: none !important; }

  /* Компактный размер для строк, карточек ответов и авторизации. */
  .auth,
  .quiz-choice,
  .quiz-correct-toggle,
  .ex-option--multi,
  .ex-option-edit,
  .rm-switch,
  .rm-hw-item,
  .homework-overdue,
  .vx-row-delete,
  body:has(#site-name) {
    --switch-width: 38px;
    --switch-height: 24px;
    --switch-knob: 18px;
  }
  .auth { --switch-on: var(--a-indigo, #6355da); }
  .ex-option--multi { --switch-on: var(--kind, #6355da); }
  .vx-row-delete { --switch-on: var(--vx-bad, #c43d59); }

  /* Убираем прежние декоративные копии, оставляя один активный тумблер. */
  .auth-check-box,
  .auth-chip span::before,
  .quiz-choice input[type="checkbox"] + .quiz-choice-mark,
  .rm-switch-ui,
  .homework-overdue i,
  label.vx-row-delete > span[aria-hidden="true"] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    input[type="checkbox"]:not([hidden]), .quiz-correct-toggle > i, .ex-option--multi > i { transition: none !important; }
  }
  @media (forced-colors: active) {
    input[type="checkbox"]:not([hidden]), .quiz-correct-toggle > i, .ex-option--multi > i {
      forced-color-adjust: none;
      background-color: Canvas !important;
      background-image: radial-gradient(circle, CanvasText 0 65%, transparent 70%) !important;
      box-shadow: inset 0 0 0 1px CanvasText !important;
    }
    input[type="checkbox"]:checked,
    .quiz-correct-toggle[aria-pressed="true"] > i,
    .ex-option--multi[aria-checked="true"] > i {
      background-color: Highlight !important;
      background-image: radial-gradient(circle, HighlightText 0 65%, transparent 70%) !important;
    }
    input[type="checkbox"]:focus-visible { outline-color: Highlight !important; }
  }
}

.auth-check { align-items: flex-start; }
.auth-check > input { margin-top: 1px !important; }
.auth-chip { gap: 7px; }
.homework-overdue { gap: 8px; }
.quiz-switch { align-items: center; display: inline-flex; gap: 10px; }
label.vx-row-delete { width: 42px; }
.vx-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .7fr) 42px; }
@media (max-width: 760px) {
  .vx-row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 42px; }
}