/* Раздел «Ремесло» — «Копка» (руда) и «Плавка» (слитки), с сайта-базы: вид — таблица предметов, клетка цвета —
   компонент metal-chip, подпись под заголовком — craft-note. Фон — главной (page.css). */

/* Пояснения столбцов всплывают над шапкой — рамка с прокруткой их обрезала бы; на мониторе девять столбцов влезают. */
.craft-table .item-table__frame {
  overflow: visible;
}

/* «Из руды» — одна иконка руды по центру столбца: название там повторяло бы название слитка. */
.craft-table__ore-icon {
  flex: none;
}

/* Телефон и узкое окно: таблица шире экрана — листается вбок внутри рамки, страница вбок не ездит. */
@media (max-width: 1200px) {
  .craft-table .item-table__frame {
    overflow-x: auto;
  }
}

/* «Ковка» — 13 столбцов (2026-09-28: скимитар и щит клятвы) и «Шитьё» — 14 (девять вещей Мага, 2026-10-03), шире
   окна ноутбука: рамка листается всегда, как у «Предметов», а пояснения «?» раскрываются вниз — вверх их обрезала бы
   рамка. */
.craft-table[data-kind="smithing"] .item-table__frame,
.craft-table[data-kind="tailoring"] .item-table__frame {
  overflow-x: auto;
}

.craft-table[data-kind="smithing"] .hint::after,
.craft-table[data-kind="tailoring"] .hint::after {
  top: calc(100% + var(--space-2));
  bottom: auto;
  transform: translateY(-4px);
}

.craft-table[data-kind="smithing"] .hint:hover::after,
.craft-table[data-kind="smithing"] .hint:focus-visible::after,
.craft-table[data-kind="tailoring"] .hint:hover::after,
.craft-table[data-kind="tailoring"] .hint:focus-visible::after {
  transform: translateY(0);
}

/* «Ковка»: изделие металла — значок и урон под ним (у щита — броня), по центру столбца формы. */
.craft-table__forged {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.craft-table__forged-icon {
  flex: none;
}

.craft-table__damage {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}