/* ═══════════ Верх ═══════════ */
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
/* Своё место в порядке наложения — явно и в обеих темах одинаково:
   всплывающие окна, которые растут отсюда, не должны уходить под
   шахматку ни при каком материале шапки. Уровни взяты из той же шкалы,
   что у всплывашек (30) и модальных окон (40). */
.top{
  position:relative;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 20px;border-bottom:1px solid var(--rule);flex-shrink:0;
}
.top-l{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
/* Имя раздела отделено от показаний воздухом, а не такой же волосяной
   линией, как показания друг от друга: с линией «Календарь» читался
   первым в ряду приборов, хотя он не прибор. */
.page{
  position:relative;display:flex;align-items:center;flex:0 0 auto;
  font-size:16px;font-weight:600;letter-spacing:-.03em;margin-right:12px;
}
.page-default{display:inline}
.page-holiday{display:none}
/* Само имя страницы остаётся рабочим текстом. Праздник живёт в одном
   сгенерированном фирменном предмете справа: его можно заметить,
   не перечитывая шапку. */
html[data-mascot-theme="winter"] .page-default{display:none}
html[data-mascot-theme="winter"] .page-holiday{
  position:relative;display:flex;align-items:center;gap:6px;
  min-height:32px;margin:-3px 0;padding:3px 2px 3px 0;
  border:0;background:none;border-radius:var(--r-sm);cursor:pointer;
  color:var(--ink);font:inherit;letter-spacing:inherit;
}
.page-holiday img{
  display:block;width:34px;height:41px;margin:-4px -1px -4px 0;
  object-fit:contain;pointer-events:none;
  user-select:none;-webkit-user-drag:none;
  transform-origin:52% 18%;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),filter .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .page-holiday:hover img{transform:translateY(-1px) rotate(-2deg);filter:saturate(1.05)}
}
.page-holiday:active img{transform:translateY(0) rotate(3deg) scale(.97)}
.page-holiday:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* Короткий физичный звон подтверждает нажатие. Затем украшение замирает:
   постоянная качка рядом с показаниями отвлекала бы от работы. */
@keyframes page-holiday-ring{
  0%,100%{transform:rotate(0)}
  18%{transform:rotate(7deg)}
  38%{transform:rotate(-5deg)}
  58%{transform:rotate(3deg)}
  76%{transform:rotate(-1.5deg)}
}
.page-holiday.is-playing img{animation:page-holiday-ring .9s cubic-bezier(.2,.8,.3,1) both}
.page-holiday.is-loading{filter:saturate(.82)}
@media (max-width:1180px){
  html[data-mascot-theme="winter"] .page-holiday{
    gap:4px;
  }
  .page-holiday img{width:30px;height:36px;margin:-2px -1px -2px 0}
}
@media (prefers-reduced-motion:reduce){
  .page-holiday img{transition:none!important;animation:none!important}
}

/* ═══ Показания объекта ═══
   Три отдельные кнопки, а не плашка: шапка остаётся светлой и тихой.
   Общими их делает не рамка, а набор — подпись тихо и строчными, число
   крупно табличными цифрами, единица при числе тихо, под числом мера.
   Моноширинного капса вразрядку здесь больше нет: он делал ряд похожим
   на любой сгенерированный пульт, а шрифт в продукте один (§8.3).
   Раньше «Сегодня» было предложением жирным сансом и выпадало из ряда. */
/* Четыре показания в одном ряду: три числа и кривая загрузки. Кривая
   раньше висела в шапке безымянной картинкой отдельно от них — оттого
   ряд и выглядел незаконченным. Разделяют показания волосяные линии,
   а не рамка: рамка делала из ряда таблицу. */
.gauges{display:flex;align-items:stretch;gap:0;flex:1;min-width:0}
.gauges > *{display:flex;position:relative}
.gauges > * + *{margin-left:14px}
.gauges > * + *::before{
  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:1px;height:26px;background:var(--rule);
}
.gauge{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:4px 9px 5px;border-radius:var(--r-sm);
  text-align:left;cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:background-color;
}
.gauge span{
  font-size:11px;font-weight:500;
  color:var(--ink-3);white-space:nowrap;
}
.gauge b{
  display:flex;align-items:baseline;gap:4px;
  font-size:16px;font-weight:600;letter-spacing:-.02em;
  line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Единица при числе — «из 11», «заезд»: не число и весить как число
   не должна. Раньше она стояла вплотную и читалась как «9из». */
.gauge b i{font-style:normal;font-size:10px;letter-spacing:-.015em;color:var(--ink-3)}
/* Заезды и выезды — два показания в одной ячейке. Разделяет их воздух,
   а не точка: слово при числе и так закрывает показание, и третий знак
   между ними читался бы лишним. */
.gauge b em{display:flex;align-items:baseline;gap:4px;font-style:normal}
.gauge b em + em{margin-left:8px}
@media (hover:hover) and (pointer:fine){
  .gauge:hover{background:var(--sunk)}
  .gauge:hover span{color:var(--ink-2)}
}

/* Мера под числом: ряд делений, где деление — одна вещь. Одиннадцать
   делений — что сдаём, восемь — счета, двадцать четыре — часы суток.
   Грамматика взята с часовых рисок линейки: у трёх показателей она общая,
   поэтому они читаются как один прибор, а не три надписи подряд. */
/* Риски были в два пикселя шириной и четыре высотой — на экране это
   серая пыль, и данные в ней не читались вовсе. Мера, которую нельзя
   прочесть, не мера, а украшение; поэтому деления выросли втрое, а
   разница между полным и пустым делением стала видимой издалека. */
.meter{display:flex;align-items:flex-end;gap:2.5px;height:10px;margin-top:2px}
.meter:empty{display:none}
.meter i{width:3px;height:5px;border-radius:1.5px;background:rgba(var(--ink-rgb),.19)}
/* Заливка меры считает то же, что и число над ней. Раньше число
   считало свободные объекты, а мера заливала занятые — два ответа на
   один вопрос, и силуэт спорил с цифрой. */
.meter i.free{height:10px;background:var(--ink-2)}
.meter i.busy{height:5px;background:rgba(var(--ink-rgb),.19)}
/* В мере счетов красным горит только просроченное: если ждущие тоже
   цветные, тревожное перестаёт выделяться. Но ждущие теперь всё же
   в полный рост — их считает число, и в пыли они пропадали. */
.meter i.wait{height:10px;background:rgba(var(--ink-rgb),.3)}
.meter i.late{height:10px;background:var(--late)}
.meter i.turn{height:10px;background:var(--ink)}
.meter i.now{height:10px;background:var(--now)}

/* ── мера суток — другого рода, и потому другой формы ──
   Слева считают вещи: объекты, счета. Здесь считают не вещи, а моменты
   на шкале дня, и рядом делений это не показывает — три одинаковые
   полоски под тремя разными числами и делали ряд неразборчивым.
   Поэтому сутки — сплошная линия с засечками там, где события, и
   красной нитью «сейчас»: тот же знак, что в шахматке. */
.gauge.day .meter{position:relative;gap:1.5px}
.gauge.day .meter::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:var(--r-pill);
  background:rgba(var(--ink-rgb),.17);
}
.gauge.day .meter i{width:2px;background:none}
.gauge.day .meter i.turn{background:var(--ink)}
.gauge.day .meter i.now{background:var(--now)}
.gauge.day .meter i.turn,.gauge.day .meter i.now{position:relative;z-index:1}

/* Единственный показатель, который меняет тон: деньги либо ждут своего
   срока, либо уже просрочены, и это разные дела. Янтарь остаётся тихим —
   только цифры; просрочка заливает сегмент целиком, как загоревшуюся
   ячейку прибора. Тот же тон несёт шапка окна, иначе ответ на нажатие
   выглядит чужим. */
.gauge.act b{color:var(--ink-3)}
.gauge.act[data-tone="wait"] b{color:var(--wait)}
/* Просрочка — единственное в ряду, что меняет вид, и меняет его кромкой
   и цифрой, а не заливкой. Розовая плашка с рамкой была здесь
   единственным цветным прямоугольником на весь экран: она выпадала из
   ряда формой, хотя отличаться должна была только тревогой. Кромка —
   тот же знак, которым говорит состояние в карточке брони. */
.gauge.act[data-tone="late"]{padding-left:12px}
.gauge.act[data-tone="late"]::before{
  content:"";position:absolute;left:2px;top:4px;bottom:4px;width:2.5px;
  border-radius:2px;background:var(--late);
}
.gauge.act[data-tone="late"] b{color:var(--late)}
.gauge.act[data-tone="late"] span{color:var(--late);opacity:.75}
.gauge.act[data-tone="late"].on span{color:var(--late);opacity:1}
@media (hover:hover) and (pointer:fine){
  .gauge.act[data-tone="late"]:hover span{color:var(--late);opacity:1}
}
/* Меню операций отделено от двух действий заметнее, чем действия друг
   от друга: на равных зазорах оно читалось третьей кнопкой в ряду,
   хотя оно не действие, а список действий. */
.top-actions{display:flex;align-items:center;gap:7px}
/* Высота задана числом, а не суммой полей и кегля: от кегля она
   получалась дробной и у соседних кнопок расходилась на доли пикселя,
   а край у трёх кнопок в ряд должен быть один. */
.top-actions .btn{height:33px}
.top-actions > .pop-wrap{margin-right:5px}

.seg{display:flex;background:var(--sunk);border-radius:var(--r-sm);padding:2px}
.seg button{
  padding:4.5px 12px;border-radius:var(--r-xs);font-size:11.5px;font-weight:550;
  color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,box-shadow;
}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
/* Рамка есть у каждой кнопки, у главной — прозрачная. Без этого
   тихая кнопка была на два пикселя выше главной: рамка входит в
   размер, и три соседние кнопки в шапке стояли на трёх разных
   высотах. Ряд из трёх кнопок разной высоты читается как небрежность
   раньше, чем успеваешь понять, в чём дело. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:12px;font-weight:550;transition:var(--t-tap) var(--ease);transition-property:opacity,transform;
}
/* Отклик на нажатие, а не на отпускание: между пальцем и кнопкой не
   должно быть паузы. */
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.btn svg{width:14px;height:14px;stroke-width:1.9}
.btn-ghost{border-color:var(--rule);background:var(--card);color:var(--ink-2);box-shadow:var(--sh-1)}
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{background:var(--sunk);color:var(--ink);border-color:var(--ink-3)}
}

/* Кнопка других операций. Квадратная и без подписи; знак — три полосы,
   а не плюс: плюс уже занят «Новой бронью», и одинаковый знак на двух
   соседних кнопках говорил бы, что они делают одно и то же. Здесь не
   действие, а список действий, и полосы — знак списка. */
.btn-ops{
  width:33px;height:33px;padding:0;flex-shrink:0;
  color:var(--ink-3);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,transform;
}
/* Тонкий глиф в просторном поле: воздух вокруг знака и есть та точность,
   которая читается как аккуратность. */
.btn-ops svg{width:14px;height:14px;stroke-width:2}
@media (hover:hover) and (pointer:fine){
  .btn-ops:hover{color:var(--ink);border-color:var(--ink-3)}
}
.btn-ops:active{transform:scale(.94)}
/* Открытое меню — самая живая поверхность панели, и кнопка говорит это
   инверсией, а не оттенком: поле темнеет целиком. В покое кнопка тихая,
   поэтому с «Новой бронью» они не спорят. */
.pop-tr.btn-ops.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.btn-ops:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
@media (prefers-reduced-motion:reduce){
  .btn-ops{transition:none}
}
/* Главное действие носит акцент, а не почти-чёрный: именно почти-чёрный
   в роли главного цвета и делает экран чёрно-белым. */
/* Главное действие носит акцент и такую же посадку на бумагу, как
   соседи: без тени тёмный прямоугольник читался наклейкой поверх
   шапки, а не кнопкой в одном с ними ряду. */
.btn-primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(25,24,21,.16);
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--accent-2);box-shadow:0 2px 5px rgba(25,24,21,.2)}
}
.btn-lg{padding:9.5px 16px;font-size:12.5px}

/* ── Загрузка периода одной линией ──
   Занимает пустовавшую середину шапки. Контраст низкий намеренно:
   это фактура и распределение, а не второй график, который спорит
   с шахматкой. Плавная форма среди прямоугольников разряжает экран. */
/* Показание загрузки: подпись и число слева, кривая — его же мера,
   как деления под остальными числами. На узком экране кривая уходит,
   а число остаётся: сжатая до сотни пикселей, она упиралась в кнопки
   и переставала что-либо показывать. */
@media (max-width:1320px){
  .loadwave{display:none}
  .gauge-load{flex:0 0 auto;min-width:0}
}
/* Ниже 1180 показание загрузки уходит целиком: ряд наезжал на кнопки
   справа, а загрузка — единственное из четырёх, без чего смена встанет. */
@media (max-width:1180px){ .gauge-load{display:none} }
/* Кривая по-прежнему занимает середину шапки — сжатая, она обрывалась
   на полпути и висела между показаниями и кнопками ничьим огрызком.
   Дело было не в ширине, а в том, что она ничего не показывала:
   контраст почти нулевой и шкала 0–100 % при загрузке в четверть
   диапазона. Ширина вернулась, а вот шкала и плотность — новые. */
.gauge-load{flex:1;min-width:170px;align-items:stretch}
.gauge-load .gauge{cursor:default;flex-shrink:0}
@media (hover:hover) and (pointer:fine){
  .gauge-load .gauge:hover{background:none}
}
.loadwave{
  /* Высота задана явно: у SVG своё соотношение сторон, и при ширине
     440 px он требовал бы двухсот пикселей высоты, раздувая шапку. */
  position:relative;flex:1;min-width:96px;
  height:36px;align-self:flex-end;margin:0 0 -7px 2px;
}
/* Растушёвка краёв — свойство самой кривой, а не всей полосы. Пока она
   висела на контейнере, отметка «сейчас» пропадала у левого края: после
   «Сегодня» сегодняшний день становится первым в окне, и точка уезжала
   ровно в прозрачную зону маски. */
.loadwave svg{
  display:block;width:100%;height:36px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 3%,#000 93%,transparent);
}
.lw-a{stop-color:var(--ink);stop-opacity:.28}
.lw-b{stop-color:var(--ink);stop-opacity:0}
.lw-area{fill:url(#lw-g)}
.lw-line{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linejoin:round;opacity:.9}
/* Одна точка не объясняет себя. Ножка до низа полосы читается как
   «мы вот здесь» — тем же приёмом, что линия «сейчас» в шахматке. */
.lw-now{
  position:absolute;width:7px;height:7px;border-radius:50%;z-index:2;
  background:var(--now);transform:translate(-50%,-50%);
  box-shadow:0 0 0 2.5px var(--paper);pointer-events:none;
}
.lw-now::after{
  content:"";position:absolute;left:50%;top:50%;
  width:1.5px;height:var(--stem,0px);margin-left:-.75px;
  background:linear-gradient(to bottom,var(--now),
    color-mix(in srgb,var(--now) 12%,transparent));
}
/* Фирменный дятел сидит на сегодняшней точке, поэтому у него есть смысл,
   а не только декоративная роль. Он меньше чисел в шапке и чуть приглушён:
   узнаётся боковым зрением, но не спорит с долгами и новой бронью. */
.lw-mascot{
  position:absolute;left:0;top:0;width:0;height:0;z-index:3;
  pointer-events:none;will-change:transform;
}
.lw-mascot[hidden]{display:none}
.lw-mascot-body{
  /* Приглушённость держится переменной: ею же заканчивается анимация
     появления, и тёмная тема поднимает её одним значением, не переписывая
     кадры (theme.css). */
  --mascot-op:.78;
  position:absolute;left:-22px;top:-39px;width:33px;height:42px;
  transform-origin:68% 94%;opacity:var(--mascot-op);
  transition:opacity 90ms cubic-bezier(.2,0,0,1);
  will-change:transform,opacity;
}
.lw-mascot-rest{
  display:block;width:100%;height:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  transition:opacity .16s cubic-bezier(.2,0,0,1);
}
/* Живое действие отрисовано Higgsfield и собрано в прозрачный WebP:
   птица может стать крупнее, не принося в спокойную шапку прямоугольный кадр. */
.lw-mascot-motion{
  position:absolute;left:50%;top:50%;display:block;width:33px;height:42px;
  object-fit:contain;transform:translate(-50%,-50%);opacity:0;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  transition:opacity .16s cubic-bezier(.2,0,0,1);
}
/* ── Новый год ────────────────────────────────────────────────
   Отметка «сейчас» остаётся отметкой: центр шара стоит ровно там, где
   стояла красная точка, тем же цветом --now и на той же координате
   сегодняшнего дня. Меняется только материал — вместо точки ёлочный
   шар, и дятел садится на него.

   Кадр шара 96 × 120, шар занят во всю ширину, его центр — на 0.7359
   высоты кадра. Отсюда все три числа ниже; размер меняется одной
   величиной --ball, остальное пересчитывается само. */
html[data-mascot-theme="winter"] .lw-now{
  /* Диаметр и посадка подобраны по худшему случаю: в пустой день точка
     падает к самому низу прибора (y=29 из 36), и при большем шаре игрушка
     вылезала бы за нижний край шапки. При этих числах она не доходит до
     него полпикселя, а лапы всё так же стоят на макушке. */
  --ball:11px;        /* диаметр шара */
  --ball-drop:5px;    /* насколько центр шара ниже точки: лапы сверху */
  width:var(--ball);height:calc(var(--ball) * 1.25);
  background:url(../assets/ritmelo-bauble-winter.png) center/contain no-repeat;
  border-radius:0;box-shadow:none;
  transform:translate(-50%, calc(var(--ball-drop) - var(--ball) * .7359));
}
/* Ножка снята: под шаром красная черта читается как палочка леденца.
   Свою работу — «мы вот здесь» — она отдаёт самому шару: он крупнее
   прежней точки и уже несёт цвет --now. */
html[data-mascot-theme="winter"] .lw-now::after{content:none}
/* Круг отклика обходит сам шар, а не прямоугольный кадр с петелькой. */
html[data-mascot-theme="winter"] .lw-now::before{
  inset:calc(var(--ball) * .2359 - 3px) -3px -3px;
}

/* У праздничного образа шарф шире корпуса, а в анимационном кадре есть
   место для искры. Увеличивается только прозрачный холст: сама птица
   остаётся тех же 33 × 42 px, что и базовый маскот. */
.lw-mascot[data-theme="winter"] .lw-mascot-body{--mascot-op:.84}
.lw-mascot[data-theme="winter"] .lw-mascot-rest{
  position:absolute;left:50%;top:0;width:auto;height:42px;max-width:none;
  transform:translateX(-50%);
}
.lw-mascot[data-theme="winter"] .lw-mascot-motion{
  width:46px;height:46px;max-width:none;
}
/* У краёв недели птица остаётся внутри прибора; положение точки не меняется. */
.lw-mascot.at-start .lw-mascot-body{left:1px}
.lw-mascot.at-end .lw-mascot-body{left:-32px}
@media (hover:hover) and (pointer:fine){
  .loadwave:hover .lw-mascot-body{opacity:.9}
}

/* Микроистория на одно появление: масштаб даёт живому клипу место для
   жеста, затем критически спокойно сходится к размеру статичного знака. */
@keyframes lw-mascot-wake{
  0%{opacity:0;transform:translate3d(-6px,2px,0) scale(.9)}
  18%{opacity:.96;transform:translate3d(0,0,0) scale(1.55)}
  58%{opacity:.92;transform:translate3d(0,0,0) scale(1.29)}
  88%{opacity:.82;transform:translate3d(0,0,0) scale(1.11)}
  100%{opacity:var(--mascot-op);transform:translate3d(0,0,0) scale(1)}
}
.lw-mascot.is-awake.is-intro .lw-mascot-body{
  animation:lw-mascot-wake 2.85s cubic-bezier(.2,0,0,1) both;
}
.lw-mascot.is-awake .lw-mascot-rest{opacity:0}
.lw-mascot.is-awake .lw-mascot-motion{opacity:1}
.lw-mascot.is-settled .lw-mascot-rest{opacity:0}
.lw-mascot.is-settled .lw-mascot-motion{opacity:1}
.lw-mascot.motion-failed .lw-mascot-rest{opacity:1}
.lw-mascot.motion-failed .lw-mascot-motion{opacity:0}
/* Отметка отвечает на кивок одним тихим кругом — вторичное движение
   длится меньше основного и использует уже существующий красный акцент. */
.lw-now::before{
  content:"";position:absolute;inset:-3px;border:1px solid var(--now);
  border-radius:50%;opacity:0;transform:scale(.65);pointer-events:none;
}
@keyframes lw-now-ring{
  0%,43%{opacity:0;transform:scale(.65)}
  53%{opacity:.34;transform:scale(.9)}
  100%{opacity:0;transform:scale(1.75)}
}
.lw-now.is-ringing::before{animation:lw-now-ring 2.6s cubic-bezier(.2,0,0,1) both}
/* Сегодняшний день помечает точка с ножкой, а не залитый столбец: на
   сжатой кривой заливка в седьмую часть ширины читалась как случайный
   серый прямоугольник рядом с графиком. «Сейчас» в этом продукте —
   тонкая красная черта, и здесь она такая же. */
/* Линия проявляется слева направо — прибор проходит период.
   Через clip-path, а не через штрих: длина пути тут зависит от ширины
   панели, и подобранная под неё пунктирная длина сломалась бы на другой. */
@keyframes lw-reveal{from{clip-path:inset(0 100% 0 0)}}
.loadwave svg.lw-in{animation:lw-reveal .75s cubic-bezier(.2,.8,.3,1) backwards .15s}

/* Каждый день кривой — орган управления: наведение называет долю,
   нажатие открывает этот день. */
.lw-hits{position:absolute;inset:0;display:flex;align-items:stretch}
.lw-hit{
  flex:1;position:relative;border:0;background:none;padding:0;cursor:pointer;
  border-radius:var(--r-sm) var(--r-sm) 0 0;transition:background .12s;
}
.lw-hit::before{
  content:"";position:absolute;left:50%;top:12px;bottom:0;width:1px;
  background:var(--rule);opacity:0;transition:opacity .12s;
}
.lw-hit i{
  position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  font-style:normal;font-size:10px;font-weight:500;
  letter-spacing:-.01em;color:var(--ink-2);
  opacity:0;transition:opacity .12s;pointer-events:none;
}
.lw-hit:focus-visible{background:rgba(var(--ink-rgb),.04);outline:none}
@media (hover:hover) and (pointer:fine){
  .lw-hit:hover{background:rgba(var(--ink-rgb),.04);outline:none}
}
.lw-hit:focus-visible::before{opacity:1}
@media (hover:hover) and (pointer:fine){
  .lw-hit:hover::before{opacity:1}
}
.lw-hit:focus-visible i{opacity:1}
@media (hover:hover) and (pointer:fine){
  .lw-hit:hover i{opacity:1}
}
.lw-hit:focus-visible i{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .loadwave svg.lw-in{animation:none}
  .lw-mascot{will-change:auto}
  .lw-mascot-body{animation:none!important;transition:none;will-change:auto}
  .lw-mascot-rest{opacity:1!important;transition:none}
  .lw-mascot-motion{display:none}
  .lw-now.is-ringing::before{animation:none;opacity:0}
}

/* Смена значений короткой сменой, а не подменой на месте:
   мгновенная подстановка текста читается как рывок. */
.cal-range,.foot-n,.gauge span,.gauge .turn{
  transition:opacity .13s ease, transform .13s ease;
}
.is-swapping{opacity:0;transform:translateY(-2px)}