/* Kingdom Guard calculators — dragon, witch, barracks, blacksmith, gallery, dragon armor, «Мои параметры»
 * (kgc-pages-res.js). Class prefix .kgc-rs-; everything else comes from kgc.css. */

/* layout helpers (Mantine Flex / SimpleGrid / Text) */
.kgc-rs-col { display: flex; flex-direction: column; min-width: 0; }
.kgc-rs-col.is-center { align-items: center; }
.kgc-rs-col.is-start { align-items: flex-start; }
.kgc-rs-gap8 { gap: 8px; }
.kgc-rs-grid { display: grid; min-width: 0; }
.kgc-rs-row4 { display: flex; align-items: center; gap: 4px; }
.kgc-rs-maw600 { max-width: 600px; }
.kgc-rs-w100 { width: 100px; flex: 0 0 auto; }
.kgc-rs-w200 { width: 200px; max-width: 100%; }

/* Mantine Button size xs (MIN / MAX) */
.kgc-btn.kgc-rs-xs { min-height: 30px; padding: 0 14px; font-size: 12px; }

/* Mantine Progress: md 8 px, xl 16 px */
.kgc-rs-prog { display: flex; height: 8px; min-width: 0; border-radius: 4px; overflow: hidden; background: #e9e2cf; }
.kgc-rs-prog.is-xl { height: 16px; }
.kgc-rs-prog-sec { flex: 0 0 auto; height: 100%; background: var(--kgc-accent, #1f6fe0); transition: width .2s ease; }

/* icons / bars sized in % (kgcalc `j` / `He` with w="30%") */
.kgc-ic.kgc-rs-w30 { width: 30%; height: auto; }
.kgc-ic.kgc-rs-w30 .kgc-ic-img { height: auto; }
.kgc-rs-prog.kgc-rs-w30 { width: 30%; }

/* troop rank / level editor `ia` */
.kgc-rs-troop-ins { display: flex; justify-content: space-between; gap: 16px; }
.kgc-rs-troop-ins > .kgc-field { flex: 0 1 200px; min-width: 0; }
.kgc-rs-troop-row { display: flex; align-items: center; justify-content: space-between; }
.kgc-rs-troop-row.is-center { justify-content: center; }
.kgc-rs-troop-prog { width: 100%; margin-top: 4px; }

/* talents editor `ua` / result `fy` */
.kgc-rs-tal-row { display: flex; align-items: center; gap: 8px; }
.kgc-rs-tal-lbl { flex: 0 0 auto; }
.kgc-rs-tal-ins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-width: 0; }
.kgc-rs-tal-row .kgc-rs-max { flex: 0 0 auto; }
.kgc-rs-ut { display: flex; align-items: center; gap: 12px; width: 110px; }
.kgc-rs-ut .kgc-ic { width: 32px; height: 32px; }

/* rank selector (vertical SegmentedControl) + 2-column grid: witch gems `ma` / `Sy`, dragon armor `Qy` */
.kgc-rs-rank { display: flex; align-items: stretch; gap: 16px; }
.kgc-seg.kgc-rs-rankseg { flex-wrap: nowrap; justify-content: flex-start; align-self: stretch; }
.kgc-seg.kgc-rs-rankseg.is-maw80 { flex: 1 0 auto; max-width: 80px; }
.kgc-seg.kgc-rs-rankseg.is-fixed { flex: 0 0 auto; }
.kgc-rs-rankseg .kgc-seg-item { flex: 0 0 auto; white-space: nowrap; }
.kgc-rs-rank-grid { flex: 1 1 auto; align-content: start; }
.kgc-rs-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.kgc-rs-cell.is-armor { gap: 4px; }
.kgc-rs-cell-ic { display: flex; justify-content: center; }
.kgc-rs-btns { display: flex; gap: 16px; }
.kgc-rs-btns.is-xs { gap: 10px; }
.kgc-rs-cell > .kgc-ni.kgc-rs-w100 { max-width: 100%; }

/* witch lab `Aa` / `Dy`: light · ratio bar · dark */
.kgc-rs-lab { display: flex; justify-content: space-between; align-items: center; }
.kgc-rs-lab-bar { width: 60%; min-width: 0; }
.kgc-rs-lab-bar > .kgc-rs-prog { width: 100%; }
.kgc-rs-prog.kgc-rs-lab-full { width: 100%; }

/* gallery puzzle `da`: 200×200 picture, opened pieces clear, closed ones shaded */
.kgc-rs-puz { position: relative; width: 200px; height: 200px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: #efe6cc; box-shadow: 0 0 0 1px var(--kgc-line, #e3cf96); }
.kgc-rs-puz > .kgc-ic.kgc-rs-puz-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kgc-rs-puz-steps { position: absolute; inset: 0; z-index: 3; display: grid; grid-auto-rows: 1fr; }
.kgc-rs-puz-step { background: rgba(22, 28, 45, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.kgc-rs-puz-step.is-active { background: transparent; }

/* element tabs (Tabs.List justify center + grow): one row of equal tabs, long labels wrap inside the tab */
.kgc-rs-tabs > .kgc-tabs-list { justify-content: center; flex-wrap: nowrap; }
.kgc-rs-tabs > .kgc-tabs-list > .kgc-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 6px; gap: 5px; white-space: normal; text-align: center; line-height: 1.25; }
.kgc-rs-tabs > .kgc-tabs-list > .kgc-tab .kgc-ic { width: 24px; height: 24px; }

/* dragon armor results «Прокачали броню:» (SimpleGrid xs 1 / sm 2 / md 3 / lg 1 / xl 2) */
.kgc-rs-armor-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 48em) { .kgc-rs-armor-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .kgc-rs-armor-res { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75em) { .kgc-rs-armor-res { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 88em) { .kgc-rs-armor-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kgc-rs-armor-row .kgc-ic { width: 32px; height: 32px; }

/* «Мои параметры»: nested barracks accordion with 32 px element icons. Core's accordion rules are descendant
   selectors, so inside an open outer item they would show every nested body / chevron as open: use child selectors. */
.kgc-rs-acc-inner { margin-top: 4px; }
.kgc-rs-acc-inner .kgc-acc-ctrl .kgc-ic { width: 32px; height: 32px; }
.kgc-rs-acc-inner > .kgc-acc-item > .kgc-acc-body { display: none; }
.kgc-rs-acc-inner > .kgc-acc-item.is-open > .kgc-acc-body { display: block; }
.kgc-rs-acc-inner > .kgc-acc-item > .kgc-acc-ctrl .kgc-acc-chev { transform: rotate(45deg); }
.kgc-rs-acc-inner > .kgc-acc-item.is-open > .kgc-acc-ctrl .kgc-acc-chev { transform: rotate(225deg); }

@media (max-width: 600px) {
  .kgc-rs-tabs > .kgc-tabs-list > .kgc-tab { flex-direction: column; padding: 6px 3px; font-size: 13px; gap: 3px; }
}
@media (max-width: 480px) {
  .kgc-rs-rank { gap: 10px; }
  .kgc-rs-btns, .kgc-rs-btns.is-xs { gap: 6px; }
  .kgc-rs-btns .kgc-btn.kgc-rs-xs { padding: 0 8px; }
}

/* core `k` puts `flex: 1 1 33%` on the bordered input itself: in a column stack it shrinks to ~30 px or grows to fill a
   stretched grid cell. kgcalc puts it on Mantine's wrapper, so the visible input always stays 36 px high. */
.kgc-rs-page .kgc-stack > .kgc-res-default { flex: 0 0 auto; }

/* selection chests from the game (ours, not kgcalc) */
.kgc-rs-chests { margin-top: 8px; }
.kgc-rs-chest-note { font-size: 13px; line-height: 1.4; color: var(--kgc-mute); }
.kgc-rs-chest-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kgc-rs-chest-count { max-width: 240px; }
@media (max-width: 560px) { .kgc-rs-chest-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }