/*!
 * assets/css/guides-detail.css — стили детальных страниц справочника /eft/... (квест, торговец,
 * листинги, карта, ключ, патроны, каппа). Подключается контроллером (guides/index.php) в <head>,
 * если файл существует — после assets/css/guides.css. Классы — только gd-.
 *
 * Токены --gd-* объявлены в guides.css (:root); квест и подшапка — тоже там.
 */

/* --- текст только для скринридера (заголовок колонки-замка в таблице патронов) --- */
.gd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==================== ЧИПЫ/БЕЙДЖИ ==================== */
.gd-kchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-weight: 700; font-size: .78rem; background: rgba(251, 191, 36, .15); color: #fbbf24;
}
.gd-badge--type { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
.gd-chips--facts { margin-bottom: 18px; }

/* ==================== ТАБЛИЦЫ: СВОДКА ПОД НАЗВАНИЕМ + БЕЙДЖ ТИПА ==================== */
.gd-qrow-summary { display: block; margin-top: 2px; font-size: .8rem; color: var(--gd-muted); white-space: normal; font-weight: 400; }
.gd-quests td:first-child .gd-badge { margin-left: 8px; }

/* ==================== ПАТРОНЫ: РЯД ЧИПОВ КАЛИБРОВ ==================== */
/* Чипы калибров — обычные ссылки на /eft/ammo/<caliber> в ленте со скроллом (.gd-chiprow/.gd-chip
   из guides.css). JS-фильтра по калибру нет: 30 страниц калибров нужны как индексируемые. */
.gd-chiprow--cal { margin: 0; padding: 6px 0; }
.gd-chiprow--cal .gd-chip { height: 32px; }

/* Заголовок страниц патронов: ответ (таблица) должен начаться как можно выше, поэтому чип игры и
   чипы калибров прижаты к H1 — вместо стандартных 24 + 12. */
.gd-head--tight { margin-bottom: 4px; }
.gd-head--tight .gd-chips { margin-top: 8px; }

/* ==================== ПАТРОНЫ: СТРОКА УПРАВЛЕНИЯ НАД ТАБЛИЦЕЙ (48 px) ==================== */
/* «Сортировка [сегмент] · тумблер «Только без квеста» · справа счётчик». На узком экране строка
   не переносится, а прокручивается — таблица должна начинаться как можно выше. */
.gd-ammobar {
  display: flex; align-items: center; gap: 16px; min-height: 48px; margin: 0 0 4px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.gd-ammobar::-webkit-scrollbar { display: none; }
.gd-ammobar > * { flex: 0 0 auto; }
.gd-ammobar__count { margin-left: auto; padding-left: 12px; font-size: .9rem; white-space: nowrap; }
.gd-ammobar__t-short { display: none; }

/* ==================== ПАТРОНЫ: ЛЕГЕНДА КЛАССОВ (свёрнута, под таблицей) ==================== */
.gd-ammo-legend { margin: 8px 0 0; border-bottom: 1px solid var(--gd-line); }
.gd-ammo-legend p { padding-bottom: 4px; }
.gd-ammo-legend .gd-cls__c { margin: 0 2px; vertical-align: -5px; }

/* ==================== ПАТРОНЫ: ТАБЛИЦА-СПИСОК ==================== */
/* Иконка патрона 32 в ячейке названия (gd_row_icon 32). */
.gd-rowicon--32 { width: 32px; height: 32px; }
.gd-ammo--list td.gd-ammo__name { white-space: normal; }
.gd-ammo--list td.gd-ammo__name .gd-rowicon { vertical-align: middle; }
.gd-ammo--list td.gd-ammo__pen b { font-weight: 700; }
.gd-ammo--list td.gd-ammo__lock { width: 36px; text-align: right; color: var(--gd-dim); }
.gd-ammo--list th.gd-ammo__lock { width: 36px; }
/* Сводка «калибр · урон · квест» и подпись «Пробитие» нужны только в мобильной раскладке. */
.gd-ammo__meta, .gd-ammo__penlbl { display: none; }
/* Строки прячет JS (пачки по 60 и тумблер) — на table-row/grid [hidden] сам по себе не срабатывает. */
.gd-ammo--list tr.gd-ammo-row[hidden] { display: none; }
.gd-ammo-row--current { background: rgba(139, 92, 246, .12); }
.gd-ammo-row--current td { font-weight: 700; }

.gd-ammomore { margin: 0 0 8px; text-align: center; }
.gd-ammomore .gd-btn[hidden] { display: none; }

/* «Открывается квестом» на странице калибра: патрон — квест(ы). */
.gd-unlocklist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.gd-unlocklist__ammo { font-weight: 600; }
.gd-unlocklist__sep { color: var(--gd-dim); }

/* ==================== КАРТОЧКА ПАТРОНА ==================== */
.gd-ammo-extra { margin: 10px 0 0; font-size: .88rem; }
.gd-ammoclass { margin-top: 32px; }
.gd-ammoclass__strip { margin: 8px 0 12px; }
.gd-ammoclass__strip .gd-cls { gap: 6px; flex-wrap: wrap; }
.gd-ammo-unlock { margin: 0 0 32px; }
.gd-ammo-unlock i { color: var(--gd-muted); margin-right: 6px; }

/* ==================== ВЫХОДЫ: СТОРОНА ТОЧКОЙ + ШАНС-ПОЛОСА ==================== */
/* Сторона — цветная точка 8 px перед подписью (CONCEPT §4 «Цвет»); иконок-человечков больше нет.
   Полоса шанса рисуется только при шансе < 100 % — при сотне gd_chance_bar() отдаёт голое число. */
.gd-side { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gd-side::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gd-dim); }
.gd-side--pmc::before { background: var(--gd-pmc); }
.gd-side--scav::before { background: var(--gd-scav); }
.gd-side--coop::before { background: var(--gd-coop); }
/* «100 % · 8 с» рядом с точкой — мобильный вид колонок «Шанс» и «Время», на десктопе скрыт */
.gd-side__m { display: none; }

.gd-chance { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.gd-chance__bar { flex: 0 0 48px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.gd-chance__fill { display: block; height: 100%; background: var(--gd-scav); border-radius: 999px; }
.gd-chance__val { font-variant-numeric: tabular-nums; }

/* Таблица выходов: подпись-условие под названием нужна только на телефоне (там колонки скрыты). */
.gd-exits td.gd-exit__name { white-space: normal; }
.gd-exits .gd-exit__meta { display: none; }
/* Строка секции под таблицей — ссылка на подстраницу, а не «показать ещё»: выходов ≤ 26, видны все. */
.gd-seclink { margin: 12px 0 0; font-size: .9rem; }

/* ==================== БОССЫ: КАРТОЧКИ ==================== */
/* Четыре в ряд: имя и шанс крупно. Без иконки-черепа и без полосы — число говорит само за себя. */
.gd-boss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gd-boss-card { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 92px; }
.gd-boss-card__name { font-weight: 700; line-height: 1.3; }
.gd-boss-card__pct { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gd-text); }

/* ==================== КЛЮЧИ/КВЕСТЫ КАРТЫ: ЧИПЫ В ДВЕ КОЛОНКИ ==================== */
.gd-chiplink-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
.gd-chip--nav { justify-content: flex-start; height: 40px; padding: 0 10px; border-radius: 8px; min-width: 0; gap: 10px; }
.gd-chip--nav > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-chip--nav .gd-rowicon { margin: 0; }
.gd-chip--nav:hover { border-color: var(--gd-accent); color: var(--gd-text); }
/* «Ещё N ключей» — свёрнутый details той же линейной формы, что и FAQ */
.gd-chiplink-more { margin-top: 12px; }
.gd-chiplink-more .gd-chiplink-grid { padding: 4px 0 14px; }
.gd-chiprow--maps { padding: 0; gap: 10px; }

/* ==================== КВЕСТЫ ЛОКАЦИИ: ТАБЛИЦА + «ПОКАЗАТЬ ВСЕ N» ==================== */
/* Сводка «Прапор · ур. 3» под названием — мобильный вид колонок «Торговец» и «Ур.». */
.gd-quests--map .gd-mq__meta { display: none; }
.gd-quests--map tr.gd-mq-row[hidden] { display: none; }
.gd-quests--map td.gd-mq__kappa { width: 36px; }
.gd-mapmore { margin: 12px 0 0; text-align: center; }
.gd-mapmore .gd-btn[hidden] { display: none; }

/* ==================== КЛЮЧИ КАРТЫ (/keys): ТАБЛИЦА ==================== */
.gd-keys--map td.gd-mk__name { white-space: normal; }
.gd-keys--map .gd-mk__t { display: inline; }
.gd-keys--map .gd-mk__meta { display: none; }

/* ==================== КАППА: ПРОГРЕСС-БАР + ГРУППЫ ПО ТОРГОВЦАМ ==================== */

/* ==================== ИКОНКИ ПРЕДМЕТОВ/КЛЮЧЕЙ/ПАТРОНОВ/АВАТАРОВ (gd_icon_img) ==================== */
/* Инлайновая иконка перед названием — награды, цели, «Нужные ключи», H1 ключа/патрона, факты. */
/* Фон светлый (а не тёмный): часть иконок предметов — тёмные силуэты на прозрачном фоне и
   тонут в тёмной теме сайта на затемнённом фоне (проверено скриншотом). */
.gd-icon {
  display: inline-block; vertical-align: middle; margin: 0 8px 2px 0; flex: 0 0 auto;
  object-fit: contain; border-radius: 4px; background: rgba(226, 232, 240, .85);
}
.gd-icon--24 { width: 24px; height: 24px; }
.gd-icon--28 { width: 28px; height: 28px; }
.gd-icon--32 { width: 32px; height: 32px; }
.gd-icon--64 { width: 64px; height: 64px; border-radius: 8px; margin-right: 14px; }
.gd-icon--72 { width: 72px; height: 72px; border-radius: 50%; margin-right: 16px; }
.gd-icon--round { border-radius: 50%; }

/* Иконка в светлом квадрате для ячейки таблицы (gd_row_icon) — патрон/ключ. */
.gd-rowicon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  margin: 0 8px 0 0; border-radius: 4px; background: rgba(226, 232, 240, .85); overflow: hidden;
}
.gd-rowicon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gd-rowicon--empty { background: rgba(255, 255, 255, .06); }
.gd-rowicon--24 { width: 24px; height: 24px; }
.gd-rowicon--28 { width: 28px; height: 28px; }

/* Заголовок H1 с иконкой сущности слева (ключ, патрон) — на мобильных иконка встаёт над заголовком.
   flex-basis: 0 на тексте обязателен: с flex-basis: auto (по умолчанию) длинный H1 не помещается по
   своей «естественной» ширине в строку и весь переносится ПОД иконку вместо переноса текста внутри —
   классическая ловушка flexbox с длинным текстовым элементом при flex-wrap: wrap. */
.gd-h1row { display: flex; align-items: center; flex-wrap: wrap; }
.gd-h1row .gd-h1 { flex: 1 1 0%; min-width: 0; }
@media (max-width: 576px) {
  .gd-h1row { flex-direction: column; align-items: flex-start; }
  .gd-h1row .gd-icon { margin: 0 0 10px; }
}

/* ==================== ТОРГОВЕЦ: АВАТАР + ПОЛНОЕ ИМЯ РЯДОМ С H1 ==================== */
.gd-trader-head { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.gd-trader-head__text { min-width: 0; flex: 1 1 0%; }
.gd-trader-head .gd-h1 { margin-bottom: 4px; }
.gd-trader-fullname { margin: 0; color: var(--gd-muted); font-size: .95rem; }
@media (max-width: 576px) {
  .gd-trader-head { flex-direction: column; align-items: flex-start; }
  .gd-trader-head .gd-icon--72 { margin: 0 0 10px; }
}

/* ==================== КАРТА: «ГЕРОЙ»-СКРИНШОТ ПОД H1 ==================== */
/* 3.5:1, радиус 10, без градиента и подписи поверх: подпись дублировала H1 и удалена (§6 п.6).
   На подстраницах /extracts и /keys hero нет вовсе — там страница отвечает на один вопрос. */
.gd-map-hero { border-radius: 10px; overflow: hidden; margin: 0 0 4px; background: #0a1020; aspect-ratio: 3.5 / 1; }
.gd-map-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==================== КАРТА: ЛЕНТА ФАКТОВ + ЧИП ИГРЫ ОДНОЙ СТРОКОЙ ==================== */
/* Счётчики (выходов · квестов · ключей) живут только здесь (§2 п.3), чип игры — последняя ячейка
   той же ленты, а не отдельная строка 36 px. Скроллится лента целиком, страница — нет. */
.gd-mapfacts {
  display: flex; align-items: center; gap: 16px; margin: 16px 0 0; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.gd-mapfacts::-webkit-scrollbar { display: none; }
.gd-mapfacts .gd-facts { margin: 0; overflow: visible; flex: 0 0 auto; }
.gd-mapfacts .gd-chips { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; }
.gd-map-empty { margin: 16px 0 0; }
.gd-map-others { margin-top: 32px; }

/* ==================== СЕКЦИЯ «КАРТЫ»: КАРТОЧКА С МИНИАТЮРОЙ 16:9 ==================== */
.gd-entcard--map { padding: 0; align-items: stretch; text-align: left; gap: 0; overflow: hidden; }
.gd-entcard--map .gd-entcard__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, .35); }
/* guides.css задаёт .gd-entcard img { border-radius: 50%; width: 56px; height: 56px } для круглых
   аватаров торговцев — здесь явно перебиваем на прямоугольную миниатюру 16:9. */
.gd-entcard--map .gd-entcard__thumb img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; display: block; }
.gd-entcard--map .gd-entcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }

/* ==================== АДАПТИВНОСТЬ (968 / 768 / 576 / 480) ==================== */
@media (max-width: 968px) {
  .gd-boss-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .gd-chiplink-grid { grid-template-columns: 1fr; }

  /* --- ПАТРОНЫ: та же таблица становится списком строк-карточек 72 px ---
     Горизонтального скролла на телефоне нет: колонки «Калибр», «Урон» и «замок» уезжают в строку
     сводки под названием, справа остаются полоса классов брони и «ПРОБИТИЕ N». */
  .gd-ammo-wrap { overflow-x: visible; margin-bottom: 12px; }
  .gd-ammo--list, .gd-ammo--list tbody { display: block; width: 100%; }
  .gd-ammo--list thead { display: none; }
  .gd-ammo--list tr.gd-ammo-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; height: 72px; border-bottom: 1px solid var(--gd-line);
  }
  .gd-ammo--list tr.gd-ammo-row[hidden] { display: none; }
  .gd-ammo--list tr.gd-ammo-row > td { height: auto; padding: 0; border: 0; white-space: nowrap; }
  .gd-ammo--list td.gd-ammo__name {
    grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; gap: 10px; min-width: 0;
  }
  .gd-ammo--list td.gd-ammo__cal,
  .gd-ammo--list td.gd-ammo__dmg,
  .gd-ammo--list td.gd-ammo__lock { display: none; }
  .gd-ammo--list td.gd-ammo__cls { grid-column: 2; grid-row: 1; justify-self: end; }
  .gd-ammo--list td.gd-ammo__pen {
    grid-column: 2; grid-row: 2; justify-self: end;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gd-muted);
  }
  .gd-ammo--list .gd-ammo__penlbl { display: inline; }
  .gd-ammo--list .gd-ammo__t { display: block; min-width: 0; overflow: hidden; line-height: 1.3; }
  .gd-ammo--list .gd-ammo__t > a,
  .gd-ammo--list .gd-ammo__t > b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .gd-ammo--list .gd-ammo__meta {
    display: block; font-size: .82rem; color: var(--gd-muted); overflow: hidden; text-overflow: ellipsis;
  }
  .gd-ammo--list .gd-rowicon { margin: 0; }
  .gd-ammo--list .gd-cls { gap: 2px; }
  .gd-ammo--list .gd-cls__c { width: 20px; height: 20px; font-size: .68rem; }
  .gd-ammobar { gap: 12px; min-height: 44px; margin-bottom: 0; }
  /* на телефоне строка управления помещается в 328 px: без лейбла и счётчика, короткая подпись тумблера */
  .gd-ammobar > .gd-lbl, .gd-ammobar__count, .gd-ammobar__t-long { display: none; }
  .gd-ammobar__t-short { display: inline; }
  .gd-ammobar__game { margin-left: auto; }
  .gd-head--tight { margin-bottom: 0; }
  .gd-chiprow--cal { padding: 4px 0; }

  /* --- КАРТА: hero почти 390×140, лента фактов остаётся одной строкой со скроллом --- */
  .gd-map-hero { aspect-ratio: 390 / 140; }
  .gd-mapfacts { gap: 12px; margin-top: 12px; }

  /* --- ВЫХОДЫ: таблица раскладывается в строки 44; горизонтального скролла на телефоне нет ---
     Колонки «Шанс», «Время», «Условие» и «Точки входа» уезжают: шанс со временем — в подпись рядом
     с точкой стороны, условие — второй строкой под названием. Подзаголовки групп остаются. */
  .gd-exits-wrap { overflow-x: visible; margin-bottom: 12px; }
  .gd-exits, .gd-exits tbody { display: block; width: 100%; }
  .gd-exits thead { display: none; }
  .gd-exits tr.gd-trow-group { display: block; }
  .gd-exits tr.gd-trow-group td { display: block; height: 32px; line-height: 32px; padding: 0 8px; border: 0; }
  .gd-exits tr.gd-exit-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
    min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--gd-line);
  }
  .gd-exits tr.gd-exit-row > td { height: auto; padding: 0; border: 0; }
  .gd-exits td.gd-exit__chance, .gd-exits td.gd-exit__time,
  .gd-exits td.gd-exit__req, .gd-exits td.gd-exit__entry { display: none; }
  .gd-exits .gd-exit__t { display: block; min-width: 0; line-height: 1.3; }
  .gd-exits .gd-exit__t > b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gd-exits .gd-exit__meta { display: block; font-size: .82rem; color: var(--gd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gd-exits td.gd-exit__side { justify-self: end; }
  .gd-exits .gd-side__t { display: none; }
  .gd-exits .gd-side__m { display: inline; font-size: .85rem; color: var(--gd-muted); font-variant-numeric: tabular-nums; }

  /* --- КВЕСТЫ ЛОКАЦИИ: строки 44, «Прапор · ур. 3» второй строкой, ★ справа --- */
  .gd-mapquests-wrap { overflow-x: visible; margin-bottom: 8px; }
  .gd-quests--map, .gd-quests--map tbody { display: block; width: 100%; }
  .gd-quests--map thead { display: none; }
  .gd-quests--map tr.gd-mq-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
    min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--gd-line);
  }
  .gd-quests--map tr.gd-mq-row > td { height: auto; padding: 0; border: 0; }
  .gd-quests--map td.gd-mq__trader, .gd-quests--map td.gd-mq__lvl { display: none; }
  .gd-quests--map .gd-mq__t { display: block; min-width: 0; line-height: 1.3; }
  .gd-quests--map .gd-mq__t > a { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gd-quests--map .gd-mq__meta { display: block; font-size: .82rem; color: var(--gd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gd-quests--map td.gd-mq__kappa { width: auto; justify-self: end; }

  /* --- КЛЮЧИ КАРТЫ (/keys): строки 64, иконка + название / «механический · 3 квеста · 40 …» --- */
  .gd-mapkeys-wrap { overflow-x: visible; margin-bottom: 8px; }
  .gd-keys--map, .gd-keys--map tbody { display: block; width: 100%; }
  .gd-keys--map thead { display: none; }
  .gd-keys--map tr.gd-mk-row { display: flex; align-items: center; gap: 10px; min-height: 64px; border-bottom: 1px solid var(--gd-line); }
  .gd-keys--map tr.gd-mk-row > td { height: auto; padding: 0; border: 0; }
  .gd-keys--map td.gd-mk__kind, .gd-keys--map td.gd-mk__uses, .gd-keys--map td.gd-mk__opens { display: none; }
  .gd-keys--map td.gd-mk__name { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
  .gd-keys--map .gd-mk__t { display: block; min-width: 0; line-height: 1.3; }
  .gd-keys--map .gd-mk__t > a { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gd-keys--map .gd-mk__meta { display: block; font-size: .82rem; color: var(--gd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gd-keys--map .gd-rowicon { margin: 0; }
}

@media (max-width: 576px) {
  /* боссы на телефоне — две колонки, одна колонка карточек тут не нужна */
  .gd-boss-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gd-chiprow--cal { gap: 6px; }
}

@media (max-width: 480px) {
  /* 328 px полезной ширины: полоса классов 130 + подпись «ПРОБИТИЕ N» — фиксированных ширин больше нет */
  .gd-ammoclass__strip .gd-cls__c { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-faq__chev { transition: none; }
}