/* next.html и список объёма на index.html. Только токены из tokens.css.
   Границы media-запросов: 40em = 640px, 48em = 768px. */

.page { display: grid; gap: var(--sp-7); padding-block: var(--sp-5) var(--sp-8); }
.page__head { display: grid; gap: var(--sp-3); max-width: var(--measure); }
.page__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.page__lead { color: var(--c-text-2); font-size: var(--fs-lg); }
.back { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); font-weight: var(--fw-semi); width: fit-content; }
.page__foot { display: grid; gap: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-sm); }

section[aria-labelledby] { display: grid; gap: var(--sp-4); align-content: start; }
.section-title { font-size: var(--fs-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.section-lead { color: var(--c-text-2); max-width: var(--measure); }

.cards { display: grid; gap: var(--sp-3); }
.item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-4); row-gap: var(--sp-1); align-items: start; padding: var(--sp-4); }
.item__icon { grid-row: 1 / span 2; color: var(--c-primary-text); margin-top: var(--sp-1); }
.item__name { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.item__text { color: var(--c-text-2); font-size: var(--fs-sm); }

.speed__facts { display: grid; gap: var(--sp-2); font-weight: var(--fw-semi); font-size: var(--fs-lg); }
.speed__cond { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); max-width: var(--measure); }
.speed__cond-title { font-size: var(--fs-md); }
.speed__todo { color: var(--c-text-2); }

.scope__grid { display: grid; gap: var(--sp-5); }
.scope__col { display: grid; gap: var(--sp-2); align-content: start; }
.scope__head { font-size: var(--fs-lg); }
.scope__hint { color: var(--c-text-2); font-size: var(--fs-sm); }
.scope__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.scope__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); padding: var(--sp-2) 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;
}
a.scope__item { border-color: var(--c-border-ui); }
a.scope__item:hover { background: var(--c-primary-soft); }
a.scope__item .icon { color: var(--c-success-text); }
.scope__item--stub { color: var(--c-text-2); background: transparent; border-style: dashed; border-color: var(--c-border-ui); }

@media (min-width: 48em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .scope__grid { grid-template-columns: 1fr 1fr; }
}