/* Страницы сравнения. Только токены из tokens.css.
   Границы media-запросов: 40em = 640px (подписи на кадре), 64em = 1024px (две колонки). */

.page-title { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.lead { color: var(--c-text-2); font-size: var(--fs-lg); max-width: var(--measure); }
.compare { display: grid; gap: var(--sp-5); padding-block: var(--sp-5) var(--sp-8); }

/* Навигация по темам */
.topics-nav { padding-block: var(--sp-3) 0; }
.topics-nav__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.topics-nav a {
  display: inline-flex; align-items: center; min-height: var(--touch); padding-inline: var(--sp-4);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.topics-nav a:hover { background: var(--c-primary-soft); }
.topics-nav a[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }

.back { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); font-weight: var(--fw-semi); }

/* Оглавление */
.topic-list { display: grid; gap: var(--sp-2); counter-reset: topic; max-width: 48rem; }
.topic-list li { counter-increment: topic; }
.topic-list a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--sp-4);
  min-height: var(--touch); padding: var(--sp-4); background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-2); text-decoration: none;
}
.topic-list a::before { content: counter(topic); grid-row: 1 / span 2; color: var(--c-primary-text); font-weight: var(--fw-bold); font-size: var(--fs-xl); min-width: 1.5ch; }
.topic-list a .icon { grid-row: 1 / span 2; grid-column: 3; }
.topic-list a:hover { background: var(--c-primary-soft); }
.topic-list__name { font-weight: var(--fw-semi); }
.topic-list__text { color: var(--c-text-2); font-size: var(--fs-sm); grid-column: 2; }

/* Раскладка темы */
.compare__grid { display: grid; gap: var(--sp-5); align-items: start; }
.frames { display: grid; gap: var(--sp-5); min-width: 0; }
.frame { display: grid; gap: var(--sp-2); margin: 0; }
.frame__stage { position: relative; border: 1px solid var(--c-border-ui); border-radius: var(--r-1); background: var(--c-surface); }
.frame__stage img { display: block; width: 100%; height: auto; border-radius: var(--r-1); }
.frame figcaption { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; color: var(--c-text-2); font-size: var(--fs-sm); }
.frame figcaption a { display: inline-flex; align-items: center; min-height: var(--touch); }
.missing {
  display: grid; align-content: center; justify-items: center; gap: var(--sp-2); padding: var(--sp-5); text-align: center;
  border: 2px dashed var(--c-border-ui); border-radius: var(--r-2); color: var(--c-text-2); min-height: 10rem;
}
.missing strong { color: var(--c-text); font-size: var(--fs-lg); }

/* Подсветка: рамка в процентах поверх кадра */
.mark {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: var(--focus-width) solid var(--c-highlight); border-radius: var(--r-1); pointer-events: none;
}
.mark__n {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: var(--sp-5); height: var(--sp-5);
  background: var(--c-highlight); color: var(--c-on-accent); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.mark__label {
  display: none; position: absolute; left: 0; bottom: 100%; margin-bottom: var(--sp-1);
  width: max-content; max-width: 14rem; padding: var(--sp-1) var(--sp-2);
  background: var(--c-highlight); color: var(--c-on-accent); border-radius: var(--r-1);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: var(--lh-tight);
}
.mark--right .mark__label { left: auto; right: 0; }
.mark--below .mark__label { bottom: auto; top: 100%; margin: var(--sp-1) 0 0; }
.mark--inside .mark__label { bottom: auto; top: var(--sp-2); left: var(--sp-2); margin: 0; }
.mark--inside.mark--right .mark__label { left: auto; right: var(--sp-2); }
.legend-list { display: grid; gap: var(--sp-1); padding-inline-start: var(--sp-5); font-size: var(--fs-sm); list-style: decimal; color: var(--c-text); }
.legend-list li::marker { color: var(--c-warn-text); font-weight: var(--fw-bold); }

/* Пять блоков */
.blocks { display: grid; gap: var(--sp-4); min-width: 0; }
.block { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); }
.block h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); }
.block__n { display: inline-grid; place-items: center; width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-pill); background: var(--c-primary-soft); font-size: var(--fs-sm); }
.block p { max-width: var(--measure); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); }
.pager a {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); text-decoration: none; font-weight: var(--fw-semi);
}
.pager a:hover { background: var(--c-primary-soft); }
.pager small { display: block; color: var(--c-text-2); font-weight: var(--fw-regular); }

@media (min-width: 40em) {
  .mark__label { display: block; }
}
@media (min-width: 64em) {
  .compare__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .frames--sticky { position: sticky; top: var(--sp-4); }
}