/* Экран прибора, пока он слушает протяжное «уууу». Разметку рисует
   listen.js; стили лежат отдельно по той же причине, что и он, — нужны и в
   настройках, и на своей странице.

   Команды — одной строкой в натуральную величину: соседние видно по краям,
   и сразу понятно, что было и что будет. Двух этажей здесь быть не должно:
   вторым этажом съедается место, а место нужно дорожке записи — она тут
   главный прибор, по ней и видно, сколько уже тянешь. */

.lis {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: 9% / 11%;
  background: #000;
  /* Экран прибора — точка отсчёта для кегля внутри: он живёт и размером с
     ладонь в предпросмотре, и во всю колонку на своей странице. */
  container-type: inline-size;
}

/* ── команды: одна строка ────────────────────────────────────────────── */

/* Строка стоит и трогается только на наступление очередной секунды — тогда
   она подвозит свою команду в середину. Четверть секунды на переезд: столько
   же длится окно до метки, и движение успевает кончиться к самой метке. */
.lis-row {
  position: absolute;
  left: 0;
  top: 6%;
  height: 56%;
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 0 50%;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}

.lis .lis-card {
  flex: none;
  height: 100%;
  width: auto;
  /* Потолок ширины снимаем явно. Строка стоит с полями в полэкрана, то есть
     ширина её содержимого — ноль, и всякий max-width в процентах считается от
     нуля. На своей странице это незаметно, а там, где в таблице сайта лежит
     общее img{max-width:100%}, карточки схлопывались в нитку. */
  max-width: none;
  aspect-ratio: 502 / 410;
  object-fit: cover;
  border-radius: 8px;
  /* Соседние приглушены, а не спрятаны: их видно ровно настолько, чтобы
     понять, что там что-то есть и куда едет звук. */
  opacity: 0.18;
  transition: opacity 260ms linear;
}
.lis .lis-card.is-now { opacity: 1 }
.lis .lis-card.is-past { opacity: 0.1 }

/* ── дорожка записи ──────────────────────────────────────────────────── */

/* Столбики одинаковые: это не осциллограмма голоса, а отсчёт времени, и
   пляшущие высоты врали бы про громкость, которой прибор не мерит. Запись их
   только закрашивает. Выше прочих — засечки команд: они стоят там, где звук
   переваливает за очередную метку, и подняты с самого начала. */
.lis-bars {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  height: 24%;
  display: flex;
  align-items: flex-end;
  /* Просвет вчетверо уже столбика. При прежних двух с половиной процентах на
     промежутки уходило больше сорока процентов ширины, и дорожка читалась
     редким частоколом, а не сплошным отсчётом. */
  gap: 1.1%;
}
.lis-bars i {
  flex: 1 1 0;
  height: 66%;
  background: #3a3a3a;
  /* Скруглены целиком: на чёрном экране прямоугольный столбик выглядит вырезом
     в фоне, а пилюля — предметом, который на нём лежит. */
  border-radius: 999px;
  transition: background 90ms linear, box-shadow 90ms linear;
}
.lis-bars i.is-mark { height: 100% }
/* Пройденные светятся: у прибора экран светящийся, и отсчёт на нём — не
   краска, а свет. Свечение слабое, чтобы соседи не слипались в полосу. */
.lis-bars i.is-past {
  background: var(--terra);
  box-shadow: 0 0 9px rgba(255, 90, 31, 0.5);
}

/* ── сработало ───────────────────────────────────────────────────────── */

/* Развернувшаяся команда занимает весь экран прибора, всё остальное уходит. */
.lis .lis-fire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.lis.is-fired .lis-row,
.lis.is-fired .lis-bars { opacity: 0; transition: opacity 180ms linear }

/* ── живой экран: расписание уроков ──────────────────────────────────── */

/* Единственный экран, собранный здесь разметкой: снимком его не покажешь,
   потому что он едет. Собран по своему же снимку с прибора — только
   сокращения, крупно, в край, без времени. Время есть на дашборде, а этот
   экран отвечает на один вопрос: что сегодня. */
.les {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  /* Отступы те же, что в приборе: двадцать два по бокам и четырнадцать от
     верхней кромки до первой буквы (LES_PAD, LES_INK в ui_big.c). */
  padding: 3.4% 4.4%;
  z-index: 2;
}
.les-list { transform: translateY(0) }

.les-row {
  /* Два предмета в кадре и краешек третьего — вся композиция. Строки прижаты
     теснее собственной высоты строки шрифта: у Oswald её с избытком, и по ней
     экран вместил бы полторы строки вместо двух с половиной. */
  height: 40%;
  font-family: var(--font-display);
  /* Кегль от ширины экрана прибора: тот же экран живёт и в предпросмотре
     размером с ладонь, и здесь во всю колонку, и буквы в обоих должны
     занимать одну и ту же долю. Самое длинное сокращение при этом ложится
     почти во всю ширину — так оно и снято с прибора. */
  font-size: 30cqw;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
}

/* Срок ответа — волосок по самому краю экрана. По краю, а не поверх картинки:
   ответ занимает экран целиком, и класть на него полоску значит отнимать у
   него место. Полный обход — минута, и черта сползает против часовой. */
.lis-tick {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lis-tick rect {
  fill: none;
  stroke: var(--terra);
  stroke-width: 3;
  stroke-linecap: round;
  /* Начало — середина верхнего края, а не угол: у круга нет угла, с которого
     естественно начинать, а у прямоугольника их четыре, и любой из них
     выглядит случайным. Контур прямоугольника в SVG начинается сразу за
     левым верхним закруглением, до середины верха от него сто двадцать
     тысячных длины — на них и сдвигаем.

     Черта лежит по правую руку от середины и укорачивается к ней — значит
     её конец идёт против часовой стрелки. Уползать должен именно остаток:
     смотрят не на то, где линия начинается, а на то, куда она убывает. */
  stroke-dashoffset: -120;
  filter: drop-shadow(0 0 4px rgba(255, 90, 31, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .lis-row, .lis .lis-card { transition: none }
}