/* СЛОЙ 5 — ДОСТУПНОСТЬ. Грузится последним намеренно: кольцо фокуса и
   прочие правила доступности обязаны выигрывать каскад. Когда эта секция
   лежала в основе, поле ввода теряло кольцо — его перебивало правило из
   слоя компонентов, стоявшее ниже по файлу. Поймано измерением. */

/* ---------- доступность ---------- */
/* Одно кольцо на всё: 2px сплошной --cyan по границе контрола. Внешний
   отступ убран: вместе с подсветкой собственной рамки он выглядел как две
   вложенные неоновые рамки, хотя индикатор фокуса должен быть один.
   Поведений было три —
   у input кольцо снималось outline: none и заменялось полупрозрачной тенью,
   у select были и кольцо и тень, у кнопок только кольцо. Сплошной цвет к тому
   же контрастнее тени: 9.90:1 на карточке, 10.28:1 на поле, 8.85:1 на шапке
   таблицы против 4.31:1 у rgba(34, 211, 238, .6) — при норме 3:1 для
   нетекстовых индикаторов (WCAG 1.4.11). Считано композитингом на фактический
   фон предка; та же формула на .18 даёт 1.46:1, как в аудите. */
a:focus-visible, .btn:focus-visible, select:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, th.sortable:focus-visible,
/* summary — тоже интерфейсный элемент: им раскрывают тело письма в очереди.
   Без него кольцо у раскрывашки рисовал бы браузер по-своему, и «одно кольцо
   на всё» перестало бы быть правдой. */
summary:focus-visible,
.copyable:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 0; border-radius: 4px;
}
/* У textarea своей рамки нет, кольцо шло бы по внутреннему краю редактора —
   рисует его контейнер. Отдельным правилом и через :has(), а не
   :focus-within: во-первых, фокус на кнопке панели не должен обводить весь
   редактор вторым кольцом, во-вторых, браузер без :has() выбросит только эти
   две строки, и textarea останется со своим кольцом из списка выше. */
.editor:has(textarea:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 0; }
.editor:has(textarea:focus-visible) textarea { outline: none; }

/* Планшет остаётся сенсорным рабочим местом. Поздний слой workspace.css
   намеренно уплотняет настольные .btn-sm и вкладки, но на 701–900 px он
   перебивал прежний контракт 44 px из screens.css. Держим доступность в
   последнем слое, чтобы порядок подключения файлов больше не мог снова
   уменьшить цели нажатия. */
@media (max-width: 900px) {
  .btn,
  .tabs a,
  .work-queue-filters button,
  .claim-back,
  .crumbs a,
  .help-toc-list a {
    min-height: 44px;
  }
  .brand { min-width: 44px; }
  .btn-icon { min-width: 44px; }
  .help-toc-list a { display: inline-flex; align-items: center; }

  /* В паспорте более специфичное правило screens.css уплотняет иконку до
     30px. Ссылка рядом оставалась высотой одной строки (15px): номер видно,
     но попасть в него пальцем трудно. Контракт относится ко всей строке
     контакта, поэтому обе соседние цели имеют одинаковые 44px. */
  .contact-actions .contact-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .contact-actions .btn-icon {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
}

/* Длинная ролевая плашка в заголовке служебного блока не должна ужиматься
   flex-контейнером: при 375 px слово «администратор» обрезалось внутри
   собственной рамки, хотя сама карточка оставалась в границах экрана. */
.admin-ops-summary > .chip { flex: 0 0 auto; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #loader { display: none; }
}