/* Раздел крафтов (/craft/*). Палитра и формы — лендинга: фон #1F2120,
   карточки #FFFFFF0D с бордером #FFFFFF1A, радиусы 16–20px, акцент #91FFA9,
   шрифт Onest (подключён через output.css). Своих цветов и градиентов нет.

   Пиксель-арт: интерфейсы станков и предметы рисуются из оригинальных
   текстур с image-rendering: pixelated; всё позиционируется в процентах, так
   что панель масштабируется целиком, а слоты остаются на своих местах. */

/* Те же шрифты, что объявляет output.css, но с font-display: swap (как в
   detail.css): текст первого экрана рисуется системным шрифтом сразу, а не
   ждёт woff2 — это LCP страницы предмета. Последнее объявление с теми же
   дескрипторами побеждает, поэтому файл подключается после output.css. */
@font-face {
    font-family: 'Onset';
    src: url('/lp/fonts/Onset/Onest-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onset';
    src: url('/lp/fonts/Onset/Onest-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onset';
    src: url('/lp/fonts/Onset/Onest-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Метрически совместимый фолбэк на время загрузки Onest: Arial, подогнанный
   по ширине и вертикальным метрикам (замер в Chromium: ширина строки Onest
   400 = 103.6% Arial, 700 = 100.9%; ascent 0.97em, descent 0.31em). Так swap
   не сдвигает вёрстку — иначе на страницах предмета CLS доходил до 0.19. */
@font-face {
    font-family: 'Onset Fallback';
    src: local('Arial'), local('Liberation Sans'), local('Helvetica');
    font-weight: 400;
    size-adjust: 103.6%;
    ascent-override: 97%;
    descent-override: 31%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Onset Fallback';
    src: local('Arial Bold'), local('Arial'), local('Liberation Sans Bold'), local('Helvetica Bold');
    font-weight: 700;
    size-adjust: 100.9%;
    ascent-override: 97%;
    descent-override: 31%;
    line-gap-override: 0%;
}

.craft {
    font-family: 'Onset', 'Onset Fallback', Arial, sans-serif;
    max-width: 1250px;
    margin: 0 auto;
    padding: 100px 20px 60px;
    min-height: calc(100vh - 320px);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: opacity .2s ease;
}

.craft.pjax-loading {
    opacity: .5;
    pointer-events: none;
}

/* Заголовок тянется вместе с шириной экрана: 30px на десктопе, плавно до
   22px на узких телефонах — без ступеньки в медиазапросе. */
.craft-h1 {
    font-size: clamp(22px, 1.4vw + 17px, 30px);
    font-weight: 700;
    line-height: 1.2;
}

.craft-h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
}

.craft-h4 {
    font-size: 14px;
    font-weight: 700;
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 18px 0 8px;
}

.craft-lead {
    font-size: 15px;
    line-height: 1.55;
    opacity: .75;
    max-width: 760px;
}

.craft-muted {
    font-size: 13px;
    opacity: .6;
    line-height: 1.5;
    padding-bottom: 10px;
}

/* Внутри id переносить негде (minecraft:wayfinder_armor_trim_smithing_template
   — 48 символов без единой точки переноса), и на узком экране такой id уводил
   всю страницу вбок. Поэтому id — атомарный inline-block: не влезает в строку —
   обрезается многоточием, а не распирает родителя. */
.craft-code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    background: #FFFFFF14;
    border-radius: 6px;
    padding: 1px 6px;
    opacity: .85;
}

.craft a {
    color: inherit;
}

.craft-block {
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1A;
    border-radius: 20px;
    padding: 20px;
}

/* --- hero + поиск --- */

.craft-hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 24px;
    border-radius: 20px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1A;
}

.craft-hero--compact {
    padding: 22px 24px;
    gap: 14px;
}

.craft-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.craft-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 18px;
    border-radius: 20px;
    background: #FFFFFF1A;
    border: 1px solid #FFFFFF1A;
    /* max-width: 760px; */
    width: 100%;
}

.craft-search:focus-within {
    border-color: #91FFA980;
}

.craft-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 15px;
    padding: 6px 0;
}

.craft-search input::placeholder {
    color: #FFFFFF80;
}

.craft-search__btn {
    border: 0;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 14px;
    background: #91FFA9;
    color: #0B120D;
    font-weight: 700;
    font-size: 14px;
    transition: filter .15s;
}

.craft-search__btn:hover {
    filter: brightness(1.05);
}

.craft-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 16px;
    background: #131413F2;
    border: 1px solid #FFFFFF1A;
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px #00000066;
}

.craft-search__results[hidden] {
    display: none;
}

.craft-search__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    transition: background .3s;
}

.craft-search__item:hover,
.craft-search__item.is-active {
    background: #91FFA91A;
}

.craft-search__item .craft-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.craft-search__name {
    font-size: 14px;
}

.craft-search__sub {
    font-size: 12px;
    opacity: .55;
}

.craft-search__empty {
    padding: 12px;
    font-size: 13px;
    opacity: .6;
}

/* --- версии --- */

.craft-versions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.craft-versions__label {
    font-size: 13px;
    opacity: .6;
    margin-right: 4px;
}

.craft-versions__opt {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    text-decoration: none;
    background: #FFFFFF0D;
    border: 1px solid transparent;
    transition: background .3s, border-color .15s;
}

.craft-versions__opt:hover {
    background: #FFFFFF1F;
}

.craft-versions__opt.is-active {
    background: #91FFA933;
    border-color: #91FFA980;
    color: #91FFA9;
}

/* Место под пометку занято у всех версий сразу — иначе чип при клике терял бы
   её отступ, соседи разъезжались и полоса версий дёргалась. Видна пометка
   только у версий с тем же рецептом, кроме открытой сейчас. */
.craft-versions__opt small {
    margin-left: 4px;
    opacity: .6;
    visibility: hidden;
}

.craft-versions__opt.is-same:not(.is-active) small {
    visibility: visible;
}

/* --- иконка предмета --- */

/* Спрайты ячеек — 32px. Вне игрового интерфейса иконки рисуются с плавной
   интерполяцией и в размерах, кратных 32 (32/64): nearest-neighbour при
   дробном масштабе давал рваные пиксели. Внутри панели станка масштаб
   целый (панель ×4, спрайт ×2) — там пиксельный вид оригинала уместен. */
.craft-icon {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    image-rendering: auto;
    vertical-align: middle;
    flex-shrink: 0;
    transition: all .3s;
}

.craft-gui .craft-icon,
.craft-bigslot .craft-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.craft-icon--missing {
    border-radius: 8px;
    background: #FFFFFF14;
}

.craft-icon__letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #FFFFFFB3;
    font-size: 100%;
    line-height: 1;
}

.craft-icon__badge {
    position: absolute;
    right: 0;
    bottom: 0;
    font-weight: 700;
    font-size: 40%;
    line-height: 1;
    color: #fff;
    text-shadow: 1px 1px 0 #3f3f3f;
}

/* --- плитки --- */

.craft-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.craft-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    background: #FFFFFF0D;
    text-decoration: none;
    color: #fff;
    min-width: 0;
    transition: background .3s, transform .15s;
}

a.craft-tile:hover {
    background: #FFFFFF1F;
    transform: translateY(-1px);
}

.craft-tile--static {
    opacity: .75;
}

.craft-tile__icon .craft-icon {
    width: 32px;
    height: 32px;
}

.craft-tile__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.craft-tile__name {
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-tile__id {
    font-size: 12px;
    opacity: .72;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- категории на главной --- */

.craft-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

/* Карточка механики: иконка на подложке сверху, под ней название и описание,
   счётчик прижат к низу. Раньше иконка стояла слева и отъедала половину
   узкой колонки — названия ломались на две строки, а счётчики вставали на
   разной высоте, и ряд выглядел рваным. */
.craft-cat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: 16px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF14;
    text-decoration: none;
    color: #fff;
    transition: background .3s, border-color .15s, transform .15s;
}

.craft-cat:hover {
    background: #FFFFFF14;
    border-color: #91FFA973;
    transform: translateY(-2px);
}

/* Подложка под спрайт: сам он мелкий и на общем тёмном фоне разваливается. */
.craft-cat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF14;
    transition: background .3s, border-color .15s;
}

.craft-cat:hover .craft-cat__icon {
    background: #91FFA914;
    border-color: #91FFA940;
}

.craft-cat__icon .craft-icon {
    width: 40px;
    height: 40px;
}

.craft-cat__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.craft-cat__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
}

.craft-cat__short {
    font-size: 13px;
    opacity: .65;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Счётчик — чип у нижней кромки: margin-top: auto держит его на одной линии
   во всех карточках ряда, какой бы длины ни было описание. */
.craft-cat__count {
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #91FFA914;
    border: 1px solid #91FFA92E;
    font-size: 12px;
    line-height: 1.35;
    color: #91FFA9;
}

/* --- FAQ и заметки --- */

.craft-faq__item {
    border-top: 1px solid #FFFFFF14;
    padding: 12px 0;
}

.craft-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.craft-faq__item summary::after {
    content: "+";
    opacity: .5;
}

.craft-faq__item[open] summary::after {
    content: "−";
}

.craft-faq__item p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    opacity: .75;
}

@keyframes craft-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: .75;
        transform: none;
    }
}

.craft-faq__item[open] p {
    animation: craft-faq-reveal .7s ease;
}

.craft-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 20px 14px 36px;
    border-radius: 16px;
    background: #91FFA90D;
    border: 1px solid #91FFA933;
    font-size: 14px;
    line-height: 1.5;
    list-style: disc;
}

.craft-note {
    padding: 10px 16px;
    border-radius: 12px;
    background: #91FFA91A;
    font-size: 14px;
}

.craft-note a {
    color: #91FFA9;
}

.craft-empty {
    padding: 32px;
    text-align: center;
    opacity: .7;
}

.craft-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
}

.craft-pager a {
    padding: 9px 18px;
    border-radius: 12px;
    background: #FFFFFF14;
    text-decoration: none;
    font-size: 14px;
    transition: background .3s;
}

.craft-pager a:hover {
    background: #91FFA933;
}

.craft-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 14px;
    background: #91FFA9;
    color: #0B120D;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}

/* --- страница предмета --- */

.craft-item-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: space-between;
}

.craft-item-head__card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 12px 12px;
    border-radius: 20px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1A;
    min-width: 0;
}

.craft-item-head__icon .craft-icon {
    width: 64px;
    height: 64px;
}

.craft-item-head__text {
    min-width: 0;
}

.craft-item-head__ids {
    margin-top: 6px;
    font-size: 13px;
    opacity: .7;
}

.craft-item-intro {
    max-width: none;
}

/* Вкладки способов получения (появляются с JS; без него рецепты идут подряд). */
.craft-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.craft-tab {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    text-decoration: none;
    background: #FFFFFF0D;
    border: 1px solid transparent;
    transition: background .3s, border-color .15s;
}

.craft-tab small {
    opacity: .6;
}

.craft-tab.is-active {
    background: #91FFA933;
    border-color: #91FFA980;
    color: #91FFA9;
}

.craft-recipe {
    padding-top: 4px;
}

.craft-recipe+.craft-recipe {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #FFFFFF14;
}

.js .craft-recipes[data-tabs-ready] .craft-group:not(.is-active) {
    display: none;
}

.craft-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.craft-tab__icon .craft-icon {
    width: 22px;
    height: 22px;
}

.craft-group+.craft-group {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #FFFFFF14;
}

.craft-chip--ws {
    background: #FFFFFF14;
    color: #FFFFFFCC;
}

/* Способы одного узла: колонка строк «входы → станок», сходящихся в один
   результат; альтернативы — приглушённые, между ними «или». */
.craft-node__ways {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.craft-way {
    display: flex;
    align-items: center;
    gap: 10px;
}

.craft-way--alt {
    opacity: .85;
}

.craft-way--alt .craft-node__ws span {
    background: #FFFFFF0D;
    color: #FFFFFFB3;
}

.craft-way__or {
    font-size: 11px;
    opacity: .45;
    padding-left: 14px;
    text-transform: lowercase;
}

.craft-node__ws span .craft-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

.craft-node__ws span small {
    margin-left: 4px;
    opacity: .7;
}

.craft-leaf--alt .craft-tile {
    background: #FFFFFF08;
}

.craft-recipe__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.craft-recipe__title {
    font-size: 17px;
    font-weight: 700;
}

.craft-chip {
    padding: 3px 10px;
    border-radius: 10px;
    background: #91FFA91A;
    color: #91FFA9;
    font-size: 12px;
}

.craft-chip--muted {
    background: #FFFFFF14;
    color: #FFFFFFB3;
}

.craft-recipe__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

@media (min-width: 900px) {
    .craft-recipe__body {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }
}

.craft-gui-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: #0F100F;
    border: 1px solid #FFFFFF14;
    container-type: inline-size;
}

/* Оригинальная панель станка: фон — вырез текстуры, aspect-ratio и max-width
   приходят инлайном (зависят от станка). Ширина — вся доступная, но не больше
   3× натурального размера: дальше пиксель-арт выглядит мыльно. */
.craft-gui {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    font-size: clamp(9px, 3.2cqw, 20px);
}

.craft-slot {
    position: absolute;
    display: block;
    box-sizing: border-box;
}

.craft-slot .craft-icon,
.craft-slot__link {
    display: block;
    width: 100%;
    height: 100%;
}

.craft-slot__link {
    position: relative;
    border-radius: 2px;
    transition: all .3s;
}

.craft-slot__link .craft-icon:hover {
    transform: rotate(10deg);
    transition: all .3s;
}

.craft-slot__count,
.craft-bigslot .craft-slot__count {
    position: absolute;
    right: 2%;
    bottom: -4%;
    font-size: 1em;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 #3f3f3f, -1px -1px 0 #3f3f3f, 1px -1px 0 #3f3f3f, -1px 1px 0 #3f3f3f;
    pointer-events: none;
}

.craft-slot__group {
    position: absolute;
    left: 2%;
    top: 0;
    font-size: .8em;
    font-style: normal;
    color: #7CF5FF;
    text-shadow: 1px 1px 0 #333;
    pointer-events: none;
}

.craft-slot__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .55em;
    line-height: 1.1;
    color: #FFFFFF99;
    padding: 2px;
}

.craft-gui__arrow {
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    background: #8b8b8b;
    clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%);
}

.craft-bigslot {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 64px;
    padding: 3px;
    background: #8b8b8b;
    border-top: 3px solid #373737;
    border-left: 3px solid #373737;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    font-size: 14px;
}

.craft-bigslot .craft-icon {
    width: 100%;
    height: 100%;
}

.craft-schematic {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.craft-schematic__ws {
    padding: 8px 14px;
    border-radius: 12px;
    background: #FFFFFF14;
    font-size: 13px;
}

.craft-ings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.craft-ings li,
.craft-result-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    /* Флекс-элемент по умолчанию не ужимается уже своего содержимого: без
       этого длинное название или id распирали строку за край блока. */
    min-width: 0;
}

.craft-ings li>*,
.craft-result-line>span {
    min-width: 0;
}

.craft-ings__text {
    overflow-wrap: anywhere;
}

/* Иконку не сплющиваем, ужимается текст. */
.craft-ings__icon {
    flex-shrink: 0;
}

.craft-ings__icon .craft-icon {
    width: 32px;
    height: 32px;
}


.craft-ings__group {
    opacity: .65;
}

.craft-result-line {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #FFFFFF14;
}

.craft-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 22px;
    list-style: decimal;
    font-size: 14px;
    line-height: 1.5;
    opacity: .85;
}

/* --- цепочка --- */

.craft-chain__graph {
    overflow-x: auto;
    padding: 12px 4px;
    margin: 0 -4px;
}

.craft-node {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
}

.craft-node__inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.craft-node__input {
    display: flex;
    align-items: center;
}

.craft-node__arrow {
    width: 26px;
    height: 14px;
    flex-shrink: 0;
    background: #91FFA980;
    clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%);
}

.craft-node__ws span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px 6px 8px;
    border-radius: 12px;
    background: #91FFA91A;
    color: #91FFA9;
    font-size: 12px;
    white-space: nowrap;
}

.craft-node__result,
.craft-leaf {
    position: relative;
}

.craft-node .craft-tile {
    min-width: 190px;
}

.craft-leaf__count {
    position: absolute;
    right: 8px;
    top: -8px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #91FFA9;
    color: #0B120D;
}

.craft-leaf--tag-group .craft-tile {
    border: 1px dashed #7CF5FF66;
}

.craft-chain__steps {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 22px;
    list-style: decimal;
    font-size: 14px;
    line-height: 1.5;
}

.craft-chain__totals {
    margin-top: 12px;
    font-size: 14px;
    opacity: .85;
}

@media (max-width: 720px) {
    .craft-node,
    .craft-way {
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
    }

    .craft-way__or {
        text-align: center;
        padding-left: 0;
    }

    .craft-node__arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .craft-node__ws {
        text-align: center;
    }

    .craft-node .craft-tile {
        min-width: 0;
    }

    /* Плитка внутри цепочки — флекс-элемент, и её автоминимум равен ширине
       названия с id одной строкой (они nowrap). На 320px это распирало
       колонку и уводило всю страницу вбок; с min-width: 0 плитка ужимается,
       а название и id сокращаются многоточием, как и задумано. */
    .craft-node__input,
    .craft-node__inputs,
    .craft-node__result,
    .craft-leaf {
        min-width: 0;
    }

    .craft-chain__graph {
        overflow: visible;
    }
}

/* --- гайды --- */

.craft-guides__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 14px;
}

.craft-guides__list a,
.craft-guides .craft-muted a,
.craft-chain__steps a,
.craft-ings a {
    color: #91FFA9;
    text-decoration: underline;
    text-decoration-color: #91FFA966;
    text-underline-offset: 2px;
}

/* Глубокая цепочка (3+ уровня узлов): горизонтально не влезает даже на десктопе —
   раскладываем сверху вниз, как на телефоне. */
.craft-chain--deep .craft-node,
.craft-chain--deep .craft-way {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.craft-chain--deep .craft-way__or {
    text-align: center;
    padding-left: 0;
}

.craft-chain--deep .craft-node__arrow {
    transform: rotate(90deg);
    align-self: center;
}

.craft-chain--deep .craft-node__ws {
    text-align: center;
}

.craft-chain--deep .craft-node .craft-tile {
    min-width: 0;
}

.craft-chain--deep .craft-node__inputs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
}

.craft-chain--deep .craft-chain__graph {
    overflow: visible;
}

/* --- мобильные --- */

@media (max-width: 640px) {
    .craft {
        padding: 84px 12px 40px;
        gap: 16px;
    }

    .craft-hero,
    .craft-block {
        padding: 16px;
        border-radius: 16px;
    }

    /* На телефоне механик всего несколько, и колонкой карточек-плиток список
       вышел бы на два экрана: разворачиваем карточку в строку — иконка слева,
       текст справа, счётчик под описанием. */
    .craft-cats {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .craft-cat {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px;
    }

    .craft-cat__icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .craft-cat__icon .craft-icon {
        width: 34px;
        height: 34px;
    }

    .craft-cat__title {
        font-size: 15px;
    }

    .craft-cat__count {
        margin-top: 4px;
    }

    .craft-search {
        padding: 6px 6px 6px 14px;
    }

    .craft-search__btn {
        padding: 9px 12px;
    }

    .craft-item-head__icon .craft-icon {
        width: 64px;
        height: 64px;
    }

    .craft-gui-wrap {
        padding: 10px;
    }

    .craft-tiles {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .craft-tile__icon .craft-icon {
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .craft,
    .craft-tile,
    .craft-cat,
    .craft-graph__node,
    .craft-graph__edge,
    .craft-graph__btn,
    .craft-calc__input,
    .craft-search__item,
    .craft-versions__opt,
    .craft-pager a,
    .craft-tab {
        transition: none;
    }

    .craft-faq__item[open] p {
        animation: none;
    }
}

/* --- интерактивный граф цепочки (dagre + SVG-рёбра, узлы — HTML) --- */

.js .craft-chain--ready .craft-chain__graph {
    display: none;
}

.craft-graph {
    position: relative;
    margin: 0 -4px;
    /* Ширина затухания у краёв полосы: JS зажигает её классами, когда граф
       действительно шире экрана. */
    --fade-start: 0px;
    --fade-end: 0px;
}

.craft-graph.is-fade-start {
    --fade-start: 28px;
}

.craft-graph.is-fade-end {
    --fade-end: 28px;
}

.craft-graph__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* Запас сверху и снизу: иначе прокрутка режет тени узлов и счётчики ×N,
       которые торчат над верхней гранью. */
    padding: 16px 4px 12px;
    -webkit-overflow-scrolling: touch;
    /* Свайп по графу листает граф, а не отправляет браузер «назад». */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #FFFFFF29 transparent;
    -webkit-mask-image: linear-gradient(to right, #0000 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), #0000 100%);
    mask-image: linear-gradient(to right, #0000 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), #0000 100%);
}

.craft-graph__canvas {
    position: relative;
    margin: 0 auto;
}

/* Граф можно возить мышью: «ладонь» над свободным местом, сжатая — во время
   перетаскивания (у карточек-ссылок остаётся свой курсор-указатель). */
.craft-graph.is-pannable .craft-graph__scroll {
    cursor: grab;
}

.craft-graph.is-dragging .craft-graph__scroll,
.craft-graph.is-dragging .craft-graph__scroll * {
    cursor: grabbing !important;
}

.craft-graph.is-dragging .craft-graph__scroll {
    -webkit-user-select: none;
    user-select: none;
}

/* Панель над графом: подсказка о прокрутке и разворот на весь экран. */
.craft-graph__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}

/* display: flex выше перебивает [hidden] из таблицы браузера. */
.craft-graph__bar[hidden] {
    display: none;
}

.craft-graph__hint {
    font-size: 12px;
    opacity: .55;
    line-height: 1.4;
}

.craft-graph__btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 7px 12px;
    border-radius: 12px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1F;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, background .3s;
}

.craft-graph__btn:hover {
    border-color: #91FFA980;
    background: #FFFFFF14;
}

/* Полный экран — свой слой, а не Fullscreen API: в Safari на iOS тот
   работает только для видео. */
.craft-graph--full {
    position: fixed;
    inset: 0;
    z-index: 80;
    margin: 0;
    padding: 10px 10px 12px;
    background: #0B120DF2;
    backdrop-filter: blur(8px);
}

/* В слое граф стоит по центру, а не прижат к верхней кромке: на телефоне
   вертикальная цепочка занимает меньше половины экрана, и воздух должен быть
   с обеих сторон. Центрируем автомаржинами, а не justify-content: у графа
   крупнее экрана автомаржины обнуляются, и начало не уезжает за недостижимый
   край прокрутки — с центрированием флексом уезжало бы. */
.craft-graph--full .craft-graph__scroll {
    display: flex;
    /* Симметричные поля — иначе «по центру» уезжает на пару пикселей вверх. */
    padding: 14px 4px;
    height: calc(100% - 42px);
    overflow: auto;
}

.craft-graph--full .craft-graph__canvas {
    flex: none;
    margin: auto;
}

html.craft-noscroll {
    overflow: hidden;
}

.craft-graph__edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.craft-graph__edge {
    fill: none;
    stroke: #FFFFFF3D;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke .15s, stroke-width .15s;
}

.craft-graph__edge--primary {
    stroke: #91FFA9CC;
    stroke-width: 2.5;
}

.craft-graph__edge.is-hot {
    stroke: #91FFA9;
    stroke-width: 3;
}

.craft-graph__edge.is-dim {
    stroke: #FFFFFF14;
}

/* Узел не тянется в строку: длинные названия переносятся, ширина ограничена —
   иначе граф уезжает вбок и его приходится сжимать до нечитаемого. */
.craft-graph__node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 210px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    background: #FFFFFF0F;
    border: 1px solid #FFFFFF1F;
    color: #fff;
    text-decoration: none;
    white-space: normal;
    transition: border-color .15s, background .3s, opacity .15s, transform .15s;
    box-shadow: 0 4px 14px #0000002E;
}

.craft-graph__node .craft-icon {
    width: 32px;
    height: 32px;
}

.craft-graph__node--ws {
    padding: 6px 12px 6px 8px;
    border-radius: 12px;
    background: #91FFA91A;
    border-color: #91FFA940;
    color: #91FFA9;
    font-size: 13px;
    box-shadow: none;
}

.craft-graph__node--ws .craft-icon {
    width: 22px;
    height: 22px;
}

/* Побочные способы приглушены, основной путь читается сразу. */
.craft-graph__node--alt {
    opacity: .62;
    box-shadow: none;
}

.craft-graph__node--alt.craft-graph__node--ws {
    background: #FFFFFF0D;
    border-color: #FFFFFF1F;
    color: #FFFFFFB3;
}

.craft-graph__node--group {
    border-style: dashed;
    border-color: #7CF5FF66;
}

.craft-graph__node--root {
    border-color: #91FFA980;
    background: #91FFA914;
    box-shadow: 0 0 0 1px #91FFA92E, 0 6px 20px #00000038;
}

a.craft-graph__node:hover,
.craft-graph__node.is-hot {
    border-color: #91FFA9;
    background: #FFFFFF1F;
    opacity: 1;
    transform: translateY(-1px);
}

a.craft-graph__node:focus-visible {
    outline: 2px solid #91FFA9;
    outline-offset: 2px;
}

.craft-graph__node.is-dim {
    opacity: .35;
}

.craft-graph__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Длинные названия («Глубинносланцевая железная руда») переносятся по слогам,
   а рвутся посимвольно только если слово шире карточки целиком. */
.craft-graph__name {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Технический id — одной строкой с многоточием: переносить его незачем,
   а высоту узла он бы удвоил. */
.craft-graph__sub {
    font-size: 11px;
    opacity: .55;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-graph__node--ws .craft-graph__sub {
    font-family: inherit;
    opacity: .8;
}

.craft-graph__count {
    position: absolute;
    right: 8px;
    top: -8px;
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 8px;
    background: #91FFA9;
    color: #0B120D;
    font-weight: 700;
    box-shadow: 0 2px 6px #00000059;
}

@media (max-width: 640px) {
    /* 180px — чтобы самое длинное название («Глубинносланцевая») влезало в
       строку целиком: карточек с такими словами мало, а рваные переносы
       посреди слова видно во всём графе. */
    .craft-graph__node {
        max-width: 180px;
        padding: 6px 10px 6px 6px;
        gap: 8px;
    }

    .craft-graph__name {
        font-size: 13px;
    }

    .craft-graph__node .craft-icon {
        width: 26px;
        height: 26px;
    }

    /* На узкой карточке id предмета съедал бы всю ширину — название важнее.
       У станков в подписи количество (×3), его оставляем. */
    .craft-graph__node--item .craft-graph__sub {
        display: none;
    }
}

/* Курсор: ссылки на рецепты других предметов — указатель, станки — подсказка. */
a.craft-graph__node,
.craft-slot__link,
a.craft-tile,
.craft-search__item,
.craft-tab {
    cursor: pointer;
}

.craft-graph__node--ws {
    cursor: help;
}

/* Тултип «как выложить»: мини-интерфейс станка над узлом графа. */
.craft-tip {
    position: absolute;
    z-index: 5;
    width: 300px;
    padding: 10px;
    border-radius: 14px;
    background: #131413F2;
    border: 1px solid #FFFFFF1F;
    box-shadow: 0 18px 40px #00000080;
    backdrop-filter: blur(12px);
    white-space: normal;
    /* Сжимаем через scale, а не width/height: craft.js снимает hidden и тут же
       читает offsetWidth/offsetHeight, чтобы поставить тултип над узлом. Анимация
       самих размеров дала бы ему свёрнутую коробку — подсказка встала бы мимо.
       На offset* трансформация не влияет, координаты остаются верными. */
    transform-origin: 50% 100%;
    scale: 1;
    opacity: 1;
    transition: scale .2s cubic-bezier(.2, .9, .3, 1), opacity .16s ease, display .2s allow-discrete;
}

/* Растём из «хвостика», то есть от самого узла: обычно он снизу по центру,
   у перевёрнутого тултипа — сверху. */
.craft-tip--below {
    transform-origin: 50% 0;
}

/* display:none остаётся концом анимации, а не её отменой — за это отвечает
   allow-discrete. Убирать его совсем нельзя: до первого показа у тултипа нет
   координат, и пустая коробка в конце <body> тянула бы за собой прокрутку.
   Где allow-discrete не поддержан, остаётся прежнее мгновенное поведение. */
.craft-tip[hidden] {
    display: none;
    scale: .82;
    opacity: 0;
    /* Пока досжимается, мышь и клики должны проходить насквозь. */
    pointer-events: none;
    transition: scale .14s ease, opacity .12s ease, display .14s allow-discrete;
}

/* Без стартового состояния переход от display:none начинался бы сразу
   с конечных значений, то есть показ был бы мгновенным. */
@starting-style {
    .craft-tip:not([hidden]) {
        scale: .82;
        opacity: 0;
    }
}

/* Блок reduced-motion выше по файлу стоит раньше .craft-tip, а специфичность
   у них одинаковая — оттуда правило не дотянулось бы. */
@media (prefers-reduced-motion: reduce) {

    .craft-tip,
    .craft-tip[hidden] {
        transition: none;
    }
}

.craft-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: #131413F2;
    border-right: 1px solid #FFFFFF1F;
    border-bottom: 1px solid #FFFFFF1F;
}

.craft-tip--below::after {
    bottom: auto;
    top: -6px;
    border: 0;
    border-left: 1px solid #FFFFFF1F;
    border-top: 1px solid #FFFFFF1F;
}

.craft-tip__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 8px;
}

.craft-tip__ws {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #91FFA9;
}

.craft-tip__ws .craft-icon {
    width: 18px;
    height: 18px;
}

.craft-tip__res {
    opacity: .75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-tip .craft-gui-wrap {
    padding: 8px;
    border-radius: 10px;
    gap: 8px;
}

.craft-tip .craft-gui {
    max-width: 268px !important;
    font-size: 10px;
}

.craft-tip .craft-bigslot {
    width: 32px;
    height: 32px;
    padding: 2px;
    border-width: 2px;
}

.craft-tip .craft-gui__arrow {
    width: 22px;
    height: 12px;
}


/* --- калькулятор ресурсов --- */

.craft-calc__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 12px 0 4px;
}

.craft-calc__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* Поле количества: цифры по центру, моноширинные по ширине (при наборе
   ничего не «прыгает»). 16px — иначе Safari на iOS зумит страницу при
   фокусе; appearance снимает системную отделку поля на мобильных. */
.craft-calc__input {
    width: 92px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #FFFFFF24;
    background: #FFFFFF0F;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
    caret-color: #91FFA9;
    transition: border-color .15s, background .3s, box-shadow .15s;
}

.craft-calc__input:hover {
    border-color: #FFFFFF3D;
}

.craft-calc__input:focus {
    border-color: #91FFA9;
    background: #FFFFFF17;
    box-shadow: 0 0 0 3px #91FFA926;
}

.craft-calc__input::selection {
    background: #91FFA94D;
}

.craft-calc__btn {
    padding: 9px 16px;
}

.js .craft-calc__btn {
    display: none;
}

.craft-calc__out {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 24px;
}

@media (min-width: 760px) {
    .craft-calc__out {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.craft-calc__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.craft-calc__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    background: #FFFFFF08;
    min-width: 0;
}

.craft-calc__list li>span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.craft-calc__list b {
    color: #91FFA9;
}


/* Тултип графа живёт в <body>, а не внутри прокручиваемого блока графа —
   иначе его режет overflow контейнера. z-index выше полноэкранного слоя
   графа (80): подсказка нужна и там. */
.craft-tip {
    position: absolute;
    z-index: 90;
    max-width: calc(100vw - 16px);
}

/* Перелистывание вариантов группы в слоте — плавная смена. */
.craft-slot[data-craft-cycle] .craft-icon {
    transition: opacity .25s;
}

.craft-slot[data-craft-cycle].is-fading .craft-icon {
    opacity: 0;
}


/* --- селектор версии (details без JS; craft.js закрывает снаружи) --- */

.craft-vsel-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.craft-vsel {
    position: relative;
}

.craft-vsel__btn {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 14px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1F;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: border-color .15s, background .15s;
}

.craft-vsel__btn::-webkit-details-marker {
    display: none;
}

.craft-vsel__btn:hover,
.craft-vsel[open] .craft-vsel__btn {
    border-color: #91FFA980;
    background: #FFFFFF14;
}

.craft-vsel__label {
    font-size: 12px;
    opacity: .6;
}

.craft-vsel__cur {
    font-weight: 700;
    color: #91FFA9;
}

.craft-vsel__tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #91FFA91F;
    color: #91FFA9;
}

.craft-vsel__chev {
    opacity: .6;
    transition: transform .15s;
}

.craft-vsel[open] .craft-vsel__chev {
    transform: rotate(180deg);
}

.craft-vsel__list {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 220px;
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 14px;
    background: #262927;
    border: 1px solid #FFFFFF1F;
    box-shadow: 0 12px 32px #00000080;
}

.craft-vsel__opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}

.craft-vsel__opt small {
    font-size: 11px;
    opacity: .55;
    white-space: nowrap;
}

.craft-vsel__opt:hover {
    background: #FFFFFF14;
}

.craft-vsel__opt.is-active {
    background: #91FFA91F;
    color: #91FFA9;
}

.craft-vbadges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.craft-vbadge {
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    text-decoration: none;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF14;
    color: #fff;
    transition: border-color .15s, background .15s;
}

.craft-vbadge:hover {
    border-color: #91FFA980;
    background: #FFFFFF14;
}

.craft-vbadge--latest {
    border-color: #91FFA94D;
    color: #91FFA9;
}

.craft-vbadge small {
    margin-left: 4px;
    opacity: .6;
}

/* --- картинка рецепта, таблица версий, команда, источники --- */

.craft-figure {
    margin: 20px 0 0;
}

.craft-figure summary {
    cursor: pointer;
    font-size: 13px;
    list-style: none;
}

.craft-figure summary::-webkit-details-marker {
    display: none;
}

.craft-figure summary::before {
    content: "▸ ";
}

.craft-figure[open] summary::before {
    content: "▾ ";
}

.craft-figure img {
    display: block;
    margin-top: 10px;
    width: 100%;
    max-width: 640px;
    height: auto;
    border-radius: 14px;
    border: 1px solid #FFFFFF14;
    background: #1F2120;
}

.craft-figure figcaption {
    margin-top: 8px;
    font-size: 12px;
}

.craft-h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 8px;
    color: #91FFA9;
}

.craft-text p,
.craft-text li {
    font-size: 15px;
    line-height: 1.6;
    opacity: .9;
}

.craft-text p + p {
    margin-top: 10px;
}

.craft-text ul {
    margin: 0;
    padding-left: 20px;
}

.craft-text li + li {
    margin-top: 6px;
}

.craft-text a {
    color: #91FFA9;
}

.craft-src__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.craft-src__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.craft-src__list .craft-ings__icon .craft-icon {
    width: 32px;
    height: 32px;
}

.craft-src__text a {
    color: #91FFA9;
}

.craft-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #FFFFFF14;
}

.craft-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.craft-table th,
.craft-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #FFFFFF0D;
    vertical-align: top;
}

.craft-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    font-weight: 600;
}

.craft-table tr:last-child td {
    border-bottom: 0;
}

.craft-table tr.is-current td {
    background: #91FFA90D;
}

.craft-table a {
    color: #91FFA9;
}

.craft-cmd {
    margin: 0 0 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #0F1110;
    border: 1px solid #FFFFFF14;
    overflow-x: auto;
    font-size: 14px;
    color: #91FFA9;
}

.craft-lead-recipe__more {
    margin-top: 16px;
}

.craft-block__foot {
    margin-top: 14px;
}

/* --- пагинация с номерами, полный список --- */

.craft-pager__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.craft-pager__pages a,
.craft-pager__pages span {
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 13px;
}

.craft-pager__pages span.is-active {
    background: #91FFA933;
    color: #91FFA9;
}

.craft-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 4px;
}

.craft-alpha a {
    padding: 6px 10px;
    border-radius: 10px;
    background: #FFFFFF0D;
    text-decoration: none;
    font-size: 13px;
    min-width: 34px;
    text-align: center;
}

.craft-alpha a:hover {
    background: #91FFA933;
}

.craft-links {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 24px;
    font-size: 14px;
}

.craft-links li {
    break-inside: avoid;
    padding: 4px 0;
}

.craft-links a {
    color: #fff;
    text-decoration: none;
}

.craft-links a:hover {
    color: #91FFA9;
}

.craft-links .craft-code {
    font-size: 11px;
    opacity: .5;
}

@media (max-width: 900px) {
    .craft-links {
        columns: 2;
    }
}

@media (max-width: 560px) {
    .craft-links {
        columns: 1;
    }

    .craft-vsel__list {
        min-width: 200px;
    }
}

/* --- селектор версии: поиск по вводу --- */

.craft-vsel__panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 240px;
    padding: 6px;
    border-radius: 14px;
    background: #262927;
    border: 1px solid #FFFFFF1F;
    box-shadow: 0 12px 32px #00000080;
    /* Выезжает из-под кнопки. */
    transform-origin: 50% 0;
}

/* Появление и скрытие панели.

   Открытие обходится без JS: keyframes стартуют сами, как только <details>
   отрисовал панель. Закрытие так не сделать — нативный <details> убирает
   содержимое мгновенно, анимации играть уже не на чем. Поэтому его ведёт
   craft.js: вешает .is-closing, держит open и снимает его по окончании. */
@keyframes craft-vsel-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.97);
    }
}

@keyframes craft-vsel-out {
    to {
        opacity: 0;
        transform: translateY(-6px) scale(.97);
    }
}

.craft-vsel[open] .craft-vsel__panel {
    animation: craft-vsel-in .16s ease;
}

/* Во время закрытия open ещё висит, то есть правило выше тоже подходит.
   Селектор с обоими признаками перевешивает его специфичностью, а не порядком
   в файле. */
.craft-vsel[open].is-closing .craft-vsel__panel {
    animation: craft-vsel-out .14s ease forwards;
    /* Уезжающая панель не должна перехватывать клики и наведение. */
    pointer-events: none;
}

/* Общий блок reduced-motion лежит выше по файлу, а специфичность здесь та же —
   оттуда правило не дотянулось бы. Задержку закрытия craft.js снимает сам. */
@media (prefers-reduced-motion: reduce) {

    .craft-vsel[open] .craft-vsel__panel,
    .craft-vsel[open].is-closing .craft-vsel__panel {
        animation: none;
    }
}

.craft-vsel__panel .craft-vsel__list {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    max-height: 280px;
}

.craft-vsel__search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #FFFFFF1F;
    background: #1F2120;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.craft-vsel__search:focus {
    border-color: #91FFA980;
}

.craft-vsel__empty {
    margin: 4px 0 2px;
    padding: 0 10px;
    font-size: 13px;
    opacity: .6;
}

/* --- поиск на странице предмета, ссылка под рецептом хаба --- */

.craft-item-search {
    margin: 12px 0 4px;
}

.craft-item-search .craft-search {
    max-width: 720px;
}

.craft-lead-recipe__more a {
    color: #91FFA9;
}

/* --- шторка «все версии» под таблицей --- */

.craft-vmore {
    margin-top: 8px;
}

.craft-vmore summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 12px;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1F;
    font-size: 13px;
    transition: border-color .15s, background .15s;
}

.craft-vmore summary::-webkit-details-marker {
    display: none;
}

.craft-vmore summary::before {
    content: "▾ ";
    opacity: .6;
}

.craft-vmore[open] summary::before {
    content: "▴ ";
}

.craft-vmore summary:hover {
    border-color: #91FFA980;
    background: #FFFFFF14;
}

.craft-vmore .craft-table-wrap {
    margin-top: 8px;
}