/* Урок Просто — дополнения кода к разделу «Техкарты по предметам» (src/pages/seo) (x-seo.css, techkarta-back#257): то, чего нет на макете
   (состояния без макета, движение). Файлы up-*.css не правятся.
   1. «Показать все этапы»: строки всегда в разметке, скрывает их CSS. 2. Якоря под липкой панелью телефона.
   3. Цели нажатия на сенсорном экране. */

/* ---------- 1. пример урока: остальные этапы и «Итого» ----------
   На макете строки появляются условным выводом; здесь они всегда в HTML (пререндер отдаёт их поиску), а пока не нажато
   «Показать все…» — скрыты. Без JS кнопка не работает, поэтому там видны все строки, а кнопки нет. */
.up-seo-ex:not(.is-all) .up-x-seo-rest { display: none; }
.up-seo-ex.is-all .up-x-seo-rest tr { animation: up-x-seo-row .36s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes up-x-seo-row { from { opacity: 0; transform: translateY(8px); } }
@media (scripting: none) {
  .up-seo-ex:not(.is-all) tbody.up-x-seo-rest { display: table-row-group; }
  .up-seo-ex:not(.is-all) tfoot.up-x-seo-rest { display: table-footer-group; }
  .up-seo-ex .up-seo-more { display: none; }
}

/* ---------- 2. якоря (#example, #topics, #faq…): на телефоне верхняя панель липкая, 56 px ---------- */
.up-seo > [id] { scroll-margin-top: 16px; }
@media (max-width: 1023px) { .up-seo > [id] { scroll-margin-top: 72px; } }

/* ---------- 3. сенсорный экран: цель нажатия не меньше 44 px, вид прежний (невидимое поле вокруг) ---------- */
@media (pointer: coarse) {
  .up-seo-cell:not(.is-none), .up-seo-chip, .up-seo-crumbs a.up-docs-crumb, .up-seo .up-link, .up-seo-mx tbody th a { position: relative; }
  .up-seo-cell:not(.is-none)::after, .up-seo-chip::after, .up-seo-crumbs a.up-docs-crumb::after, .up-seo .up-link::after, .up-seo-mx tbody th a::after { content: ""; position: absolute; }
  .up-seo-cell:not(.is-none)::after { inset: -6px; }
  .up-seo-chip::after, .up-seo-crumbs a.up-docs-crumb::after { inset: -5px 0; }
  .up-seo .up-link::after { inset: -12px 0; }
  .up-seo-mx tbody th a::after { inset: -14px -8px; }
}