/* ═══════════════════════════════════════════════
   ТЕРАПИЯ КРАСОТЫ · версия для слабовидящих

   Приложение № 2 к Приказу Минздрава России № 118н требует на сайте
   медицинской организации версию для слабовидящих. Отдельной «текстовой
   копии» сайта не делаем: копия разошлась бы с основной версией уже через
   месяц, и человек читал бы устаревшие цены и документы. Вместо этого —
   режим поверх тех же страниц: он переопределяет палитру, размеры и
   гасит декор, а содержимое остаётся ровно одно.

   Три схемы по ГОСТ Р 52872: чёрным по белому, белым по чёрному, синим по
   голубому. Три размера шрифта. Изображения можно выключить — на слабом
   зрении фотографии за текстом мешают больше, чем помогают.
   ═══════════════════════════════════════════════ */

.vi-toggle{
  display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line-strong,rgba(0,0,0,.2));background:none;color:inherit;
  font:inherit;font-size:12px;line-height:1;cursor:pointer;white-space:nowrap;
}
.vi-toggle svg{flex:none;}
.vi-toggle:hover{border-color:currentColor;}
/* 18.09: кнопка живёт в самом низу подвала. В шапке она была значком без
   подписи — там не было места; в подвале места достаточно, поэтому здесь
   она стоит с полным названием, отдельной строкой и по центру, ниже всего
   остального. Цвет наследуется от подвала, поэтому кнопка одинаково читается
   и на светлом подвале юридических страниц, и на тёмном у направлений. */
.site-footer__bottom .vi-toggle,.pt-foot .vi-toggle,
.gate__foot .vi-toggle,.foot .vi-toggle{
  /* Подвалы бывают и флексами, и обычными блоками. fit-content с auto по
     бокам центрует кнопку и там, и там. */
  display:flex;width:fit-content;margin:14px auto 0;padding:6px 2px;
  font-size:12.5px;opacity:.72;
  /* Рамка-пилюля была рассчитана на шапку. В подвале она на тёмном фоне
     не видна вовсе, а на светлом юридическом — видна: вид разъезжался.
     Поэтому здесь кнопка держится как соседние ссылки подвала — значок,
     подпись и подчёркивание по наведению. */
  border-color:transparent;
}
.site-footer__bottom .vi-toggle:hover,.pt-foot .vi-toggle:hover,
.gate__foot .vi-toggle:hover,.foot .vi-toggle:hover{
  opacity:1;border-color:transparent;text-decoration:underline;text-underline-offset:3px;
}
.site-footer__bottom .vi-toggle:focus-visible,.pt-foot .vi-toggle:focus-visible,
.gate__foot .vi-toggle:focus-visible,.foot .vi-toggle:focus-visible{opacity:1;}
/* Подвалы направлений и витрины — флексы с переносом. Кнопке нужна своя
   строка, поэтому основа 100%, а max-content не даёт ей растянуться во всю
   ширину пилюлей на полтора экрана; auto по бокам ставит её по центру. */
.site-footer__bottom .vi-toggle,.pt-foot .vi-toggle{
  flex-basis:100%;max-width:max-content;}
/* Подвал витрины — исключение: он абсолютный, фиксированной высоты, и
   отдельная строка выталкивала кнопку за нижний край экрана, где до неё
   нельзя было даже дотянуться (витрина не прокручивается). Здесь кнопка
   встаёт последней в общий ряд контактов. */
.gate__foot .vi-toggle{flex-basis:auto;max-width:max-content;margin:0;}

/* ── Панель настроек ──────────────────────────────────────────────
   Не fixed: в режиме прилипшие шапки отключены, и плавающая полоса
   перекрывала бы первый экран. Панель стоит первым блоком страницы. */
.vi-bar{display:none;}
html[data-vi="on"] .vi-bar{
  display:block;background:var(--vi-bg);color:var(--vi-fg);
  border-bottom:3px solid var(--vi-fg);padding:14px 4vw;
}
.vi-bar__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;max-width:1240px;margin-inline:auto;}
.vi-bar__group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.vi-bar__label{font-size:calc(var(--vi-fs) * .8);opacity:.85;}
.vi-bar button{
  border:2px solid var(--vi-fg);background:transparent;color:var(--vi-fg);
  padding:6px 12px;font:inherit;font-size:calc(var(--vi-fs) * .85);line-height:1.2;cursor:pointer;
}
.vi-bar button[aria-pressed="true"]{background:var(--vi-fg);color:var(--vi-bg);}
.vi-bar__off{margin-left:auto;font-weight:600;}
.vi-bar__a{font-size:calc(var(--vi-fs) * .8);}

/* ── Сам режим ──────────────────────────────────────────────────── */
html[data-vi="on"]{
  --vi-bg:#ffffff; --vi-fg:#000000; --vi-fs:19px;
  /* Токены сайта подменяем целиком: почти вся вёрстка красится через них,
     и без подмены остались бы бежевые плашки с бледным текстом. */
  --paper:var(--vi-bg); --milk:var(--vi-bg); --bone:var(--vi-bg); --sand:var(--vi-bg);
  --coal:var(--vi-bg); --ink:var(--vi-fg); --wood:var(--vi-fg); --accent:var(--vi-fg);
  --line:var(--vi-fg); --line-strong:var(--vi-fg);
  background:var(--vi-bg);
}
html[data-vi="on"][data-vi-theme="bw"]{--vi-bg:#ffffff;--vi-fg:#000000;}
html[data-vi="on"][data-vi-theme="wb"]{--vi-bg:#000000;--vi-fg:#ffffff;}
html[data-vi="on"][data-vi-theme="bc"]{--vi-bg:#9dd1ff;--vi-fg:#063462;}
html[data-vi="on"][data-vi-size="2"]{--vi-fs:24px;}
html[data-vi="on"][data-vi-size="3"]{--vi-fs:30px;}

html[data-vi="on"] body{
  background:var(--vi-bg)!important;color:var(--vi-fg)!important;
  font-family:Arial,Helvetica,sans-serif!important;font-size:var(--vi-fs)!important;line-height:1.6!important;
}
html[data-vi="on"] body *{
  background-image:none!important;box-shadow:none!important;text-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-family:Arial,Helvetica,sans-serif!important;letter-spacing:normal!important;
  color:var(--vi-fg)!important;border-color:var(--vi-fg)!important;
  /* Кнопка записи красится не color, а -webkit-text-fill-color поверх
     градиента — без сброса она осталась бы светло-песочной на белом. */
  -webkit-text-fill-color:var(--vi-fg)!important;
}
/* Прозрачный фон у всего, кроме панели настроек: она должна остаться
   читаемой поверх любой секции, включая тёмные. */
html[data-vi="on"] body *:not(.vi-bar):not(.vi-bar *){background-color:transparent!important;}
/* Вуали и градиенты живут в ::before/::after — без них тёмная плашка
   осталась бы лежать поверх белого фона вместе с текстом на ней. */
html[data-vi="on"] body *::before,html[data-vi="on"] body *::after{
  background-image:none!important;background-color:transparent!important;
}
html[data-vi="on"] .vi-bar button[aria-pressed="true"]{
  background:var(--vi-fg)!important;color:var(--vi-bg)!important;
  /* Без сброса заливки подпись выбранной кнопки сливается с её фоном:
     -webkit-text-fill-color из общего правила сильнее, чем color. */
  -webkit-text-fill-color:var(--vi-bg)!important;
}
/* Всплывающему возвращаем плотный фон: без него окно квиза, поиск и меню
   становятся прозрачными плёнками и читаются вперемешку с тем, что под
   ними. Это единственные блоки, которым фон в режиме обязателен. */
html[data-vi="on"] dialog,
html[data-vi="on"] .modal__panel,
html[data-vi="on"] .pf-modal__panel,
html[data-vi="on"] .quiz-dialog__panel,
html[data-vi="on"] .doc-dialog__panel,
html[data-vi="on"] .service-video-dialog__panel,
html[data-vi="on"] .search-panel__inner,
html[data-vi="on"] .menu-overlay,
html[data-vi="on"] .menu-panel{
  background-color:var(--vi-bg)!important;border:2px solid var(--vi-fg)!important;
}
html[data-vi="on"] .modal__backdrop,
html[data-vi="on"] .pf-modal__backdrop,
html[data-vi="on"] .search-panel__backdrop{background-color:var(--vi-bg)!important;}
html[data-vi="on"] dialog::backdrop{background:var(--vi-bg)!important;}

/* Движение гасим целиком, а прозрачность и сдвиг снимаем адресно — тем же
   набором правил, что и системный «уменьшить движение». Сплошное
   opacity:1 / transform:none для всех элементов раскладывает карусели
   стопкой: их слайды лежат друг на друге и различаются как раз
   прозрачностью. */
html[data-vi="on"] *,html[data-vi="on"] *::before,html[data-vi="on"] *::after{
  animation:none!important;transition:none!important;
}
/* Только прозрачность: сдвиг у reveal-блоков снимает сам класс is-in, а
   слепой transform:none ломает карусели — их слайды разъезжаются как раз
   трансформациями и сложились бы в одну стопку. */
html[data-vi="on"] [data-reveal]{opacity:1!important;}
html[data-vi="on"] .line-mask{overflow:visible!important;}
html[data-vi="on"] .line-mask > span{transform:none!important;}
html[data-vi="on"] .dir-clip,html[data-vi="on"] .dir-hero__clip{display:none!important;}
/* Прилипшие шапки в режиме мешают: при крупном шрифте они занимают треть
   экрана. Возвращаем их в поток. */
html[data-vi="on"] .topbar,html[data-vi="on"] .header,html[data-vi="on"] #header,
html[data-vi="on"] .pt-top,html[data-vi="on"] .pt-nav{position:static!important;}
/* Высота шапок задана в пикселях под обычный кегль. При AAA строка контактов
   и меню в неё не влезали: содержимое вылезало за правый край экрана и
   наезжало на логотип. Снимаем высоты и разрешаем переносы. */
html[data-vi="on"] .topbar,html[data-vi="on"] .header,html[data-vi="on"] #header,
html[data-vi="on"] .header__inner,html[data-vi="on"] .pt-top,html[data-vi="on"] .pt-nav{
  height:auto!important;min-height:0!important;
}
html[data-vi="on"] .topbar__in,html[data-vi="on"] .header__inner,html[data-vi="on"] .nav,
html[data-vi="on"] .header__right,html[data-vi="on"] .header__msgs,html[data-vi="on"] .dir-switch,
html[data-vi="on"] .pt-top__in,html[data-vi="on"] .pt-nav__in{
  flex-wrap:wrap!important;height:auto!important;row-gap:10px!important;
}
html[data-vi="on"] .topbar__in,html[data-vi="on"] .header__inner{padding-top:10px!important;padding-bottom:10px!important;}
/* Строка контактов свёрстана в одну линию (white-space:nowrap). При крупном
   шрифте номер лицензии выходил за правый край, и телефон зумил страницу
   целиком. Разрешаем переносы. */
html[data-vi="on"] .topbar__lic,html[data-vi="on"] .topbar__addr,
html[data-vi="on"] .topbar__hours,html[data-vi="on"] .topbar__nowrap,
html[data-vi="on"] .nav a,html[data-vi="on"] .vi-bar button,
html[data-vi="on"] .vi-toggle,html[data-vi="on"] .pt-doclink,
html[data-vi="on"] .pt-doclink span{white-space:normal!important;}
/* Почтовые адреса надзорных органов и ссылки на реестры — длинные слова без
   пробелов. При крупном шрифте они выходили за экран целиком. */
html[data-vi="on"] a{overflow-wrap:anywhere!important;}
/* Кружок логотипа рассчитан на две буквы в строку: при AAA «ТК» разъезжалось
   на два этажа и вылезало из круга. */
html[data-vi="on"] .logo__mark{
  white-space:nowrap!important;overflow-wrap:normal!important;font-size:var(--vi-fs)!important;
  width:auto!important;height:auto!important;min-width:2.4em!important;
  padding:.25em .45em!important;border-radius:999px!important;
}
html[data-vi="on"] p,html[data-vi="on"] li,html[data-vi="on"] dd,
html[data-vi="on"] dt,html[data-vi="on"] td,html[data-vi="on"] th{overflow-wrap:break-word!important;}

/* Декор, который в режиме только мешает: зерно, видео-фон, бегущие строки,
   прелоадер, плавающие подсказки и помощник. */
/* Герой — экран декоративного кадра без единой строки текста: в режиме он
   только отодвигает содержание вниз на целую прокрутку. */
html[data-vi="on"] .dir-hero__media,html[data-vi="on"] .hero__media{display:none!important;}
html[data-vi="on"] .dir-hero{min-height:0!important;height:auto!important;padding-top:24px!important;}

html[data-vi="on"] .grain,html[data-vi="on"] .preloader,html[data-vi="on"] .marquee,
html[data-vi="on"] video,html[data-vi="on"] canvas,html[data-vi="on"] .hero__video,
html[data-vi="on"] .assistant,html[data-vi="on"] .assistant-fab,html[data-vi="on"] .toast,
html[data-vi="on"] .cursor,html[data-vi="on"] .scroll-hint{display:none!important;}

/* Заголовки крупнее текста, но без гигантских clamp-размеров основной
   вёрстки: на 30px базовом они не влезают в экран телефона. */
html[data-vi="on"] h1{font-size:calc(var(--vi-fs) * 1.8)!important;line-height:1.2!important;}
html[data-vi="on"] h2{font-size:calc(var(--vi-fs) * 1.5)!important;line-height:1.25!important;}
html[data-vi="on"] h3{font-size:calc(var(--vi-fs) * 1.25)!important;line-height:1.3!important;}
html[data-vi="on"] h4,html[data-vi="on"] h5,html[data-vi="on"] h6{font-size:calc(var(--vi-fs) * 1.1)!important;}
html[data-vi="on"] p,html[data-vi="on"] li,html[data-vi="on"] a,html[data-vi="on"] span,
html[data-vi="on"] dd,html[data-vi="on"] dt,html[data-vi="on"] td,html[data-vi="on"] th,
html[data-vi="on"] label,html[data-vi="on"] summary,html[data-vi="on"] figcaption,
html[data-vi="on"] input,html[data-vi="on"] textarea,html[data-vi="on"] button,
html[data-vi="on"] em,html[data-vi="on"] strong,html[data-vi="on"] small,html[data-vi="on"] i{
  font-size:var(--vi-fs)!important;line-height:1.6!important;text-transform:none!important;
}
html[data-vi="on"] .vi-bar__label,html[data-vi="on"] .vi-bar button,html[data-vi="on"] .vi-bar__a{
  font-size:calc(var(--vi-fs) * .85)!important;
}
/* Внутри заголовков курсив и span — часть той же строки: без наследования
   «Документы и <em>правила</em>» разъезжается на два разных кегля. */
html[data-vi="on"] h1 *,html[data-vi="on"] h2 *,html[data-vi="on"] h3 *,
html[data-vi="on"] h4 *,html[data-vi="on"] h5 *,html[data-vi="on"] h6 *{
  font-size:inherit!important;line-height:inherit!important;
}

/* Ссылка обязана отличаться от текста не только цветом. */
html[data-vi="on"] a{text-decoration:underline!important;}
/* Приглушённые подписи — второстепенные только на вид: в режиме им нужен
   полный контраст. Сплошной сброс прозрачности сюда не годится, он
   раскладывает карусели, поэтому перечисляем текстовые роли. */
html[data-vi="on"] dt,html[data-vi="on"] dd,html[data-vi="on"] p,
html[data-vi="on"] small,html[data-vi="on"] figcaption,html[data-vi="on"] label,
html[data-vi="on"] .disclaimer,html[data-vi="on"] .eyebrow,html[data-vi="on"] .tagline{
  opacity:1!important;
}
html[data-vi="on"] button,html[data-vi="on"] .btn,html[data-vi="on"] input,html[data-vi="on"] textarea,
html[data-vi="on"] select,html[data-vi="on"] .doc-item,html[data-vi="on"] .faq-item{
  border:2px solid var(--vi-fg)!important;border-radius:0!important;
}
html[data-vi="on"] .btn,html[data-vi="on"] button{padding:10px 18px!important;}
html[data-vi="on"] :focus-visible{outline:3px solid var(--vi-fg)!important;outline-offset:2px!important;}
html[data-vi="on"] img{max-width:100%!important;height:auto!important;}

/* Изображения выключены: на сайте они почти все декоративные, а на слабом
   зрении съедают экран и сбивают порядок чтения. */
html[data-vi="on"][data-vi-img="off"] img,
html[data-vi="on"][data-vi-img="off"] figure,
html[data-vi="on"][data-vi-img="off"] picture{display:none!important;}

/* «Путь пациента» рассказан прокруткой: пять карточек лежат веером друг на
   друге, а читается всегда верхняя. В режиме карточки теряют свой фон и
   просвечивают одна сквозь другую, да и сама идея «листайте вправо» здесь
   лишняя, — поэтому стек разворачиваем в обычный список. */
html[data-vi="on"] .path--stack{height:auto!important;}
html[data-vi="on"] .path__pin{position:static!important;height:auto!important;}
html[data-vi="on"] .path__track{height:auto!important;}
html[data-vi="on"] .path__steps{position:static!important;height:auto!important;display:block!important;}
html[data-vi="on"] .path__step{
  position:static!important;width:auto!important;transform:none!important;
  margin:0 0 24px!important;padding:20px!important;border:2px solid var(--vi-fg)!important;
}
/* Вертикальная подпись «Шаг 02» стоит поверх заголовка: в обычной вёрстке
   она уходит на поле карточки, а в развёрнутом списке ложится на текст.
   Номер шага и так стоит в кружке. */
html[data-vi="on"] .path__tag{display:none!important;}
html[data-vi="on"] .path__aside{display:none!important;}

/* Витрина главной — два кадра во весь экран, а всё содержание страницы это
   две ссылки поверх них мелкой строкой. В режиме кадры убираем и оставляем
   выбор направления крупным текстом в столбик. */
html[data-vi="on"] .gate{
  display:block!important;height:auto!important;min-height:0!important;
  /* Витрина режет всё, что вышло за экран: в развёрнутом виде под нож
     попадала вся нижняя строка с адресом, часами и ссылками. */
  overflow:visible!important;
}
html[data-vi="on"] .gate__media,html[data-vi="on"] .gate__seam{display:none!important;}
html[data-vi="on"] .gate__pane{position:static!important;height:auto!important;min-height:0!important;padding:24px 4vw!important;border-bottom:2px solid var(--vi-fg)!important;}
html[data-vi="on"] .gate__in{position:static!important;}
html[data-vi="on"] .gate__link{font-size:calc(var(--vi-fs) * 1.6)!important;}
html[data-vi="on"] .gate__brand{position:static!important;padding:20px 4vw 0!important;}
html[data-vi="on"] .gate__foot{position:static!important;display:block!important;padding:20px 4vw!important;}

/* Сетки в режиме — в одну колонку: при крупном шрифте три колонки
   превращаются в лапшу по два слова в строке. */
html[data-vi="on"] .sm-grid{columns:1!important;}
html[data-vi="on"] .services__grid,html[data-vi="on"] .docs__grid,
html[data-vi="on"] .packages__grid,html[data-vi="on"] .doctors__grid,
html[data-vi="on"] .pt-wrap{display:block!important;}