/* Оформление самого инвентаря. Ничего из этого файла не влияет на
   компоненты: здесь только рамки, подписи и раскладка каталога. */

.inv { padding-block: var(--now-space-12) var(--now-space-16); }
.inv__lead { max-width: 62ch; color: var(--now-text-secondary); margin-top: var(--now-space-4); }
.inv__lead--dim { font-size: var(--now-type-body-sm-size); }

.inv__index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--now-space-3) var(--now-space-6);
  margin-top: var(--now-space-8);
  padding-block: var(--now-space-6);
  border-top: var(--now-line-hairline) solid var(--now-border-default);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.inv__index a {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.inv__index a:hover { color: var(--now-text-primary); }

.inv__block { padding-top: var(--now-space-16); scroll-margin-top: calc(var(--now-header-height) + 1rem); }
.inv__head { max-width: 68ch; margin-bottom: var(--now-space-6); }
.inv__title { font-family: var(--now-font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.inv__note { color: var(--now-text-secondary); font-size: var(--now-type-body-sm-size); margin-top: var(--now-space-3); }
.inv__note b { color: var(--now-text-primary); font-weight: 400; }

.inv__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--now-space-4); }
.inv__panel {
  position: relative;
  padding: var(--now-space-8) var(--now-space-6) var(--now-space-6);
  background: var(--now-bg-canvas);
  color: var(--now-text-primary);
  border: var(--now-line-hairline) solid var(--now-border-default);
}
.inv__panelname {
  position: absolute;
  top: var(--now-space-3);
  left: var(--now-space-6);
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}

.inv__states { display: flex; flex-wrap: wrap; gap: var(--now-space-6); align-items: flex-start; }
.inv__states--stack { flex-direction: column; }
.inv__state { display: flex; flex-direction: column; gap: var(--now-space-2); min-width: 0; }
.inv__state--wide { width: 100%; max-width: 17rem; }
.inv__states--stack .inv__state--wide { max-width: 22rem; }
.inv__demo { min-width: 0; }
.inv__caption {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}

/* уведомление и плашка «нет связи» показываются на месте, а не поверх экрана */
.inv__toast .toast,
.inv__demo-offline .offline { position: static; transform: none; opacity: 1; }

.inv__mark { display: grid; width: 9.5rem; }
.inv__mark img { grid-area: 1 / 1; align-self: start; width: 100%; height: auto; }
.inv__mark .wordmark__img--touch { opacity: 0; }
[data-theme="touch"] .inv__mark .wordmark__img--light { opacity: 0; }
[data-theme="touch"] .inv__mark .wordmark__img--touch { opacity: 1; }

.inv__tabs { display: flex; flex-direction: column; gap: var(--now-space-6); align-items: flex-start; }
.inv__hint { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.inv__hint b { color: var(--now-text-primary); font-weight: 400; }
.inv__tabsrow { display: flex; gap: 34px; padding: var(--now-space-6) 0; }

/* скелет загрузки */
.skeleton { display: flex; flex-direction: column; gap: var(--now-space-3); width: 100%; }
.skeleton__media { display: block; aspect-ratio: 3 / 4; background: var(--now-bg-surface); }
.skeleton__line { display: block; height: 10px; background: var(--now-bg-surface); }
.skeleton__line--short { width: 45%; }

@media (max-width: 899px) {
  .inv__pair { grid-template-columns: 1fr; }
}

/* тайлы показываем мелко: важна метка и кадрирование, а не размер */
#cards .inv__state--wide,
#gated .inv__state--wide { max-width: 9.5rem; }
.inv__flags { display: flex; flex-direction: column; gap: var(--now-space-2); align-items: flex-start; }
.inv__flags .card__flag { position: static; }
#screens .inv__state--wide { max-width: 16rem; }
#screens .skeleton__media { aspect-ratio: 4 / 3; }