/**
 * Панель настроек отображения.
 *
 * Стили самодостаточные: плагин ставится на чужие темы, наследовать оттуда
 * цвета нельзя — можно унаследовать и провал по контрасту. Все пары ≥ 4,5:1.
 */

/* ── кнопка ──────────────────────────────────────────────────────────── */

/* --tcu-w-clear задаёт JS: высота нижней панели темы, если она есть. */
.tcu-w { position: fixed; bottom: calc(20px + var(--tcu-w-clear, 0px)); z-index: 99998; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tcu-w--right { right: 20px; }
.tcu-w--left  { left: 20px; }

.tcu-w__btn {
  display: flex; align-items: center; justify-content: center;
  /* 48px — палец попадает без прицеливания (WCAG 2.5.8 требует минимум 24). */
  width: 48px; height: 48px;
  padding: 0;
  color: #ffffff;                 /* 12,6:1 на фоне ниже */
  background: #2b2b2b;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  cursor: pointer;
}
.tcu-w__btn:hover { background: #000000; }

/* ── панель ──────────────────────────────────────────────────────────── */

.tcu-w__panel {
  position: absolute; bottom: 60px;
  width: 300px; max-width: calc(100vw - 40px);
  padding: 18px;
  background: #ffffff;
  color: #1b1b1b;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.tcu-w--right .tcu-w__panel { right: 0; }
.tcu-w--left  .tcu-w__panel { left: 0; }
.tcu-w__panel[hidden] { display: none; }

.tcu-w__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tcu-w__title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: #1b1b1b; }
.tcu-w__close {
  flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0;
  font-size: 22px; line-height: 1;
  color: #3d3d3d; background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.tcu-w__close:hover { background: #f0f0f0; color: #000; }

/* Подпись про то, что настройки локальные, — часть честности интерфейса. */
.tcu-w__note { margin: 8px 0 14px; font-size: 12px; line-height: 1.5; color: #4a4a4a; }

.tcu-w__row { margin-bottom: 14px; }
.tcu-w__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #1b1b1b; }
.tcu-w__group { display: flex; gap: 6px; }

.tcu-w__opt {
  flex: 1 1 0;
  min-height: 36px; padding: 7px 4px;
  font: inherit; font-size: 13px;
  color: #1b1b1b; background: #f4f4f4;
  border: 2px solid #d0d0d0; border-radius: 6px;
  cursor: pointer;
}
.tcu-w__opt:hover { background: #e8e8e8; }
/* Выбранный вариант отличается не только цветом: у кого-то цветовосприятие
   нарушено, а панель как раз для таких случаев. Отсюда рамка и жирность. */
.tcu-w__opt[aria-pressed="true"] {
  color: #ffffff; background: #1b1b1b; border-color: #1b1b1b; font-weight: 700;
}

.tcu-w__row--switch { display: flex; flex-direction: column; gap: 10px; }
.tcu-w__switch { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #1b1b1b; cursor: pointer; }
.tcu-w__switch input { width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }

.tcu-w__reset {
  width: 100%; min-height: 38px; margin-top: 2px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: #1b1b1b; background: transparent;
  border: 2px solid #1b1b1b; border-radius: 6px; cursor: pointer;
}
.tcu-w__reset:hover { background: #1b1b1b; color: #fff; }

.tcu-w__link { display: block; margin-top: 12px; font-size: 12px; color: #1b1b1b; text-decoration: underline; }

.tcu-w :focus-visible,
.tcu-w__btn:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

.tcu-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .tcu-w { bottom: calc(14px + var(--tcu-w-clear, 0px)); }
  .tcu-w--right { right: 14px; }
  .tcu-w--left { left: 14px; }
}

/* ── что панель включает на странице ─────────────────────────────────── */

/* Текст крупнее. Через zoom, а не font-size: сайт свёрстан в пикселях,
   и увеличение базового кегля на нём просто не отзовётся. По сути это
   зум браузера — так и подписано в интерфейсе, обещать больше нечестно. */
html.tcu-size-1 body { zoom: 1.15; }
html.tcu-size-2 body { zoom: 1.30; }

/* Интервалы по WCAG 1.4.12. Того, чего браузер не даёт вообще. */
html.tcu-spacing-1 p,
html.tcu-spacing-1 li,
html.tcu-spacing-1 dd,
html.tcu-spacing-1 dt,
html.tcu-spacing-1 blockquote {
  line-height: 1.8 !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.12em !important;
}

/* Ссылка не должна опознаваться только по цвету (WCAG 1.4.1). */
html.tcu-links a:not([class*="btn"]):not([class*="button"]) {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Полная остановка движения — для тех, кому оно мешает, но у кого
   prefers-reduced-motion в системе не выставлен. */
html.tcu-motion-off *,
html.tcu-motion-off *::before,
html.tcu-motion-off *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}