/* Правки поверх макета. Живут здесь до тех пор, пока дизайн не внесёт их в исходник. */

/* ── 1. Вылет декоративных фигур ─────────────────────────────────────────────
   Фигуры вылезают за правый край на ~185 px на любой ширине, и Safari не
   переносит `overflow-x:clip` с body на окно — страницу можно утащить вправо.

   ⚠️ Просто `overflow-x:clip` ставить нельзя: по правилам CSS вторая ось при
   этом тоже становится обрезанной, и у карточек срезаются нижние тени и
   окантовки (видно на плашках маршрута — «Тренажёр», «Результат»).
   Поэтому обрезаем с запасом: 28 px хватает всем теням (самая большая 10 px),
   а вбок страница всё равно не едет — `clip` не создаёт прокрутки.            */
section {
  overflow: clip !important;
}

/* Исключение — секция маршрута. Там у зелёных плашек («Тренажёр», «Результат»)
   тень уходит вниз, и обрезка секции её срезала. `overflow-clip-margin` не
   годится: Safari его не знает, а в Chrome он ровно на свою величину возвращает
   прокрутку вбок. Поэтому секцию не режем, а прячем ту одну декоративную
   фигуру, которая из неё и вылезает. Обрезать корень страницы тоже нельзя —
   ломается прилипание самого блока маршрута.                                  */
section:has(#d-route-wrap) {
  overflow: visible !important;
}
section:has(#d-route-wrap) svg[style*="position: absolute"] {
  display: none !important;
}

/* ── 2. Красный треугольник за кнопкой «Проверить решение» ───────────────────
   Он торчит из-за кнопки и читается как обрывок фигуры, а не как декор.
   Такой на странице ровно один — проверено, других красных треугольников нет,
   так что правило ничего лишнего не заденет.                                  */
svg:has(> polygon[fill="#FF3420"][points="50,4 96,88 4,88"]) {
  display: none !important;
}

/* ── 2б. Ряд плашек маршрута режется сверху и снизу ──────────────────────────
   Контейнер ряда: `overflow:hidden`, боковые отступы есть, вертикальных ноль,
   высота ровно по высоте плашки. У плашек тень 5×5 вниз и вправо — вправо
   помещается за счёт бокового отступа, вниз выходить некуда, и её срезает.
   Сверху ничего не выходит, но воздуха нет совсем, и ряд читается подрезанным.

   Даём вертикальные отступы и гасим их полями, чтобы соседние блоки не поехали.
   Убрать `overflow:hidden` нельзя — им держится горизонтальная лента маршрута. */
div:has(> #d-route-track) {
  padding-top: 10px !important;
  padding-bottom: 12px !important;
  margin-top: 34px !important;   /* было 44px — минус добавленный отступ сверху */
  margin-bottom: -12px !important;
}

/* Плашки одного размера. В макете ширина задана минимумом, поэтому пять штук
   по 250 px, а «Результат на экзамене» — 290: ряд выглядит несобранным.
   Равняем всех по самой широкой, чтобы длинная подпись помещалась в строку. */
#d-route-track > * {
  flex: 0 0 290px !important;
  min-width: 290px !important;
  width: 290px !important;
}
@media (max-width: 1023px) {
  #d-route-track > * {
    flex: 0 0 230px !important;
    min-width: 230px !important;
    width: 230px !important;
  }
}

/* ── 3. Вывод под жёлтой чертой на телефоне ──────────────────────────────────
   В макете у каждой карточки блока «Всё, что нужно» есть четвёртое поле —
   короткий вывод. На десктопе он выводится в боковой панели под жёлтой чертой,
   а на телефоне карточка показывает три поля из четырёх, и под текстом просто
   пустое место. Рисуем его псевдоэлементом: свой узел в чужое дерево добавлять
   нельзя (React падает), а `::after` он не видит вовсе.                       */
@media (max-width: 1023px) {
  [data-m=tile-desc] [data-vyvod]::after,
  [data-m=tile-desc][data-vyvod]::after {
    content: attr(data-vyvod);
    display: block;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 2px solid #FEE252;
    font-weight: 700;
    color: #12141B;
  }
}

/* ── 4. Таблица сравнения на узких экранах ───────────────────────────────────
   Строка «Дельта» тянулась на всю оставшуюся высоту карточки и вешала свой
   текст по центру пустоты. Прижимаем к верху и по левому краю, как остальные
   строки, и оформляем её как вывод, а не как ещё одну ячейку.                */
@media (max-width: 1023px) {
  /* В макете эта ячейка тянулась на всю оставшуюся высоту карточки и вешала
     текст по центру пустоты. Прижимаем к содержимому: жёлтым выделен вывод,
     а не пустое место под ним. */
  [data-m=cmp] tr > td:last-child {
    flex: 0 0 auto !important;
    align-content: start !important;
    background: #FEE252 !important;
    border-top: 2px solid #12141B !important;
    padding: 14px !important;
  }
  /* Подпись «Дельта» в макете сдвинута на 26 px внутрь — там фоном стоит знак Δ.
     Из-за этого она стояла не по той же вертикали, что «Репетитор» и остальные.
     Убираем отступ и фон: подпись начинается ровно там же, где соседние. */
  [data-m=cmp] td[data-label="Дельта"]::before {
    align-self: start;
    padding-left: 0 !important;
    background-image: none !important;
    text-align: left !important;
    font-size: 12px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    color: #12141B !important;
    opacity: .75;
  }
  [data-m=cmp] tr > td:last-child > span {
    font-weight: 700 !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    color: #12141B !important;
  }

  /* остальные строки: подпись — тихая метка, значение — обычный текст */
  [data-m=cmp] td[data-label]::before {
    font-size: 11px !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    color: rgba(18, 20, 27, .45) !important;
  }
  [data-m=cmp] td {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
  /* шапка карточки — тёмная плашка с названием сравнения */
  [data-m=cmp] tr > td:first-child {
    font-size: 15.5px !important;
    letter-spacing: -.01em;
    padding: 15px 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   CLS: таймер обратного отсчёта.

   В макете счётчик стоит заглушкой «—», а скрипт подставляет «292 дн 13:24:56».
   Строка вырастает с одного знака до пятнадцати внутри центрированного flex —
   и вся верхняя панель уезжает вбок. Резервируем ширину заранее и включаем
   моноширинные цифры, чтобы каждая смена секунды не двигала соседей.
   Замер 07.08: этот сдвиг шёл в копилку CLS 0.224 при норме 0.1.
   ───────────────────────────────────────────────────────────────────────── */
#d-countdown {
  display: inline-block;
  min-width: 15ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Горизонтальный вылет в 1 px на десктопе (scrollWidth 1441 при 1440).
   Заметить в браузере нельзя, но это лишняя полоса прокрутки на границе. */
html {
  overflow-x: clip;
}