/* The item card (#itempop.mc-pop, js/matinfo.js MI.pop) - 2026-10-18, the user on the แร่มิธริล card: "แก้ Ui ให้ดูง่าย สะอาด".
   Head (icon, name, tier, have, price) + one short line, then two lists: หาได้จาก (one big row a source, the best for your
   level first and marked แนะนำ, 1-2 maps with readable monster names and one เดินไป / วาร์ป button, the rest folded) and
   นำไปทำอะไรได้ (similar rows grouped into one row of buttons). The card is dark in every book skin (it sits over the books,
   not in them). Crisp text only: no soft halos. The gear card (js/localmap.js eqPop) shares the head and section look. */
#itempop.mc-pop .ip-in.mi-in { width: min(880px, 95vw); max-height: 88vh; gap: 12px; padding: 16px 18px 18px; }
#itempop.mc-pop .ip-x { width: 32px; height: 32px; font-size: 14px; }

/* ---- head ---- */
#itempop.mc-pop .mi-head { align-items: center; gap: 14px; padding: 0 44px 12px 0; border-bottom: 1px solid rgba(217, 164, 67, 0.28); }
#itempop.mc-pop .mi-head .tslot.big { flex: none; width: 70px; height: 70px; }
#itempop.mc-pop .mi-ht { gap: 6px; }
#itempop.mc-pop .mi-ht > b { font: 800 1.35rem/1.2 Mali, sans-serif; color: var(--gc); }
#itempop.mc-pop .mi-meta { gap: 6px; }
#itempop.mc-pop .mi-meta i { padding: 1px 10px; border-radius: 999px; font: 600 0.82rem/1.6 Mali, sans-serif; font-style: normal; color: #ddd3ba; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.32); }
#itempop.mc-pop .mi-meta i b { color: #ffe08a; font-family: Fredoka, Mali, sans-serif; }
#itempop.mc-pop .mi-meta i.zero b { color: #b8ad94; }
#itempop.mc-pop .mi-meta .mi-grade { color: var(--gc); box-shadow: inset 0 0 0 1.5px var(--gc); font-weight: 800; }
#itempop.mc-pop .mc-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 500 0.86rem/1.5 Mali, sans-serif; color: #d3cab3; }

/* ---- the two lists ---- */
#itempop.mc-pop .mc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
#itempop .mc-sec { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#itempop .mc-sec h6 { margin: 0 -8px 2px; display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px 12px 0 0; font: 800 1.02rem/1.2 Mali, sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.15); }
#itempop .mc-sec h6 small { font: 600 0.8rem Mali, sans-serif; color: #c4b690; }
#itempop .mc-sec.mi-use h6 { color: #b6f0aa; background: rgba(110, 200, 100, 0.13); }
#itempop .mc-none { margin: 6px 8px; font: 600 0.86rem Mali, sans-serif; color: #a89c80; }

/* a row: icon, name, ไป › */
#itempop .mc-row { display: flex; flex-direction: column; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); }
#itempop .mc-row.rec { background: rgba(120, 220, 110, 0.08); box-shadow: inset 0 0 0 1.5px rgba(120, 220, 110, 0.5); }
#itempop .mc-rh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: #f2ead6; text-align: left; cursor: pointer; font-family: Mali, sans-serif; }
#itempop .mc-rh:hover:not(:disabled) { background: rgba(255, 210, 120, 0.13); }
#itempop .mc-rh:disabled { cursor: default; }
#itempop .mc-rh img { flex: none; width: 34px; height: 34px; object-fit: contain; }
#itempop .mc-rh b { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 0.98rem/1.3 Mali, sans-serif; color: #ffe6a8; }
#itempop .mc-sec.mi-use .mc-rh b { color: #d6f7cc; }
#itempop .mc-rh > u { flex: none; padding: 4px 11px; border-radius: 999px; text-decoration: none; font: 700 0.82rem/1.2 Mali, sans-serif; color: #ffd36e; background: rgba(255, 211, 110, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 211, 110, 0.35); }
#itempop .mc-rh:hover:not(:disabled) > u { background: rgba(255, 211, 110, 0.26); }
#itempop .mc-rh > small { flex: none; font: 600 0.78rem Mali, sans-serif; color: #a9c99f; }
/* a row that shows its line (a boss core's uses, js/matinfo.js o.full, 2026-10-19): how many, what it gives */
#itempop .mc-rh b .mc-sub { flex-basis: 100%; font: 500 0.8rem/1.45 Mali, sans-serif; color: #d3c8ad; }
#itempop .mc-rec { padding: 1px 9px; border-radius: 999px; font: 700 0.74rem/1.6 Mali, sans-serif; font-style: normal; color: #f1ffe8; background: #3f8f3a; }

/* a source's maps: name (world map), Lv, your-level mark, monsters, the go button */
#itempop .mc-maps { display: flex; flex-direction: column; gap: 4px; margin: 0 2px 2px 46px; }
#itempop .mc-map { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); }
#itempop .mc-map.fit { box-shadow: inset 3px 0 0 #6fcf62; }
#itempop .mc-mapt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
#itempop .mc-mapn { padding: 0; border: 0; background: none; cursor: pointer; font: 700 0.9rem/1.4 Mali, sans-serif; color: #cfe6ff; text-align: left; text-decoration: underline; text-decoration-color: rgba(207, 230, 255, 0.3); text-underline-offset: 3px; }
#itempop .mc-mapn:hover { color: #fff; text-decoration-color: currentColor; }
#itempop .mc-mapt > i { font: 600 0.78rem Fredoka, Mali, sans-serif; font-style: normal; color: #a4bccf; }
#itempop .mc-mapt > em { padding: 0 7px; border-radius: 999px; font: 700 0.7rem/1.6 Mali, sans-serif; font-style: normal; color: #f1ffe8; background: #3f8f3a; }
#itempop .mc-mobs { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
#itempop .mc-mob { display: inline-flex; align-items: baseline; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 0.84rem/1.55 Mali, sans-serif; color: #ece1c6; text-align: left; }
#itempop .mc-mob::before { content: ''; align-self: center; width: 5px; height: 5px; border-radius: 50%; background: #d8463a; }
#itempop .mc-mob i { font: 600 0.74rem Fredoka, Mali, sans-serif; font-style: normal; color: #b3a888; }
#itempop .mc-mob:hover { color: #ffd36e; }
#itempop .mc-mobs > small { font: 600 0.76rem Mali, sans-serif; color: #a89c80; }
#itempop .mc-map > .lmp-wgo { flex: none; }

/* "ดูทั้งหมด": the other maps / the other rows */
#itempop .mc-more > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font: 700 0.84rem Mali, sans-serif; color: #ffd36e; }
#itempop .mc-more > summary::-webkit-details-marker { display: none; }
#itempop .mc-more > summary::before { content: '▸'; font-size: 0.8em; }
#itempop .mc-more[open] > summary::before { content: '▾'; }
#itempop .mc-more > summary:hover { background: rgba(255, 211, 110, 0.1); }
#itempop .mc-more > .mc-map + .mc-map { margin-top: 4px; }
#itempop .mc-more.mc-rows { display: flex; flex-direction: column; gap: 6px; }
#itempop .mc-more.mc-rows:not([open]) { gap: 0; }

/* a group of uses: one row, a button for each (a tier's colour dot) */
#itempop .mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 6px 5px 52px; }
#itempop .mc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 12px; border: 0; border-radius: 999px; cursor: pointer; font: 700 0.84rem/1.3 Mali, sans-serif; color: #f2ead6; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.4); }
#itempop .mc-chip.tier { box-shadow: inset 0 0 0 1.5px var(--gc); }
#itempop .mc-chip.tier::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }
#itempop .mc-chip:hover:not(:disabled) { background: rgba(255, 210, 120, 0.2); }
#itempop .mc-chip:disabled { cursor: default; opacity: 0.75; }

/* the gear card (js/localmap.js eqPop): the same section heads; its long head line wraps after the title */
#itempop.mi-pop:not(.mc-pop) .mi-sec h6 { display: block; padding: 9px 12px; font-size: 1rem; }
#itempop.mi-pop:not(.mc-pop) .mi-sec h6 small { margin-left: 8px; }
#itempop.mi-pop:not(.mc-pop) .eco-src > b { padding: 9px 12px; font-size: 1rem; }

/* a phone: one column, less indent */
@media (max-width: 720px) {
  #itempop.mc-pop .ip-in.mi-in { width: 96vw; max-height: 92vh; padding: 12px 10px 14px; gap: 10px; }
  #itempop.mc-pop .mc-cols { grid-template-columns: 1fr; }
  #itempop.mc-pop .mi-head { gap: 10px; padding-right: 38px; }
  #itempop.mc-pop .mi-head .tslot.big { width: 56px; height: 56px; }
  #itempop.mc-pop .mi-ht > b { font-size: 1.15rem; }
  #itempop .mc-maps { margin-left: 8px; }
  #itempop .mc-chips { margin-left: 8px; }
}

/* ---- the gear card (#itempop.eq-pop: js/localmap.js eqPop + js/economy.js Eco.cardHtml), 2026-10-19, the user: "รกเกินไป".
   One column: head, the stats + options as equal rows (a small ▲▼ at a row's end), the bonuses folded to one line each,
   "หาได้จาก" with 3 rows and one button each, the rest folded. */
#itempop.eq-pop .ip-in.mi-in { width: min(600px, 95vw); gap: 10px; }
#itempop.eq-pop .mi-meta i.eq-ln.ln-e { color: #b6f0aa; }
#itempop.eq-pop .mi-meta i.eq-ln.ln-p { color: #ffb0a4; }
#itempop.eq-pop .mi-meta i.eq-sig { color: #ffe08a; box-shadow: inset 0 0 0 1px #d9a443; }
#itempop.eq-pop .mi-meta i.eq-own { color: #f1ffe8; background: rgba(63, 143, 58, 0.55); box-shadow: none; }
#itempop .eq-note { margin: -2px 0 0; padding: 6px 12px; border-radius: 8px; font: 600 0.82rem/1.4 Mali, sans-serif; color: #ffd9a0; background: rgba(217, 120, 40, 0.14); }

/* stats + options: equal rows, name left, value right, ▲▼ last */
#itempop .eq-sec { padding-bottom: 6px; }
#itempop .eq-sec h6 small { margin-left: auto; }
#itempop .eq-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#itempop .eq-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 30px; padding: 0 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.035); font: 600 0.92rem/1.3 Mali, sans-serif; color: #e9dfc6; }
#itempop .eq-rows.c3 > li { grid-template-columns: minmax(0, 1fr) auto 78px; }
#itempop .eq-rows > li > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#itempop .eq-rows > li > b { font: 700 0.95rem/1.2 Fredoka, Mali, sans-serif; color: #fff3cf; text-align: right; white-space: nowrap; }
#itempop .eq-rows > li > em { font: 700 0.8rem/1.2 Fredoka, Mali, sans-serif; font-style: normal; text-align: right; white-space: nowrap; }
#itempop .eq-rows > li > em.up { color: #7fe07a; }
#itempop .eq-rows > li > em.down { color: #ff7f6e; }
#itempop .eq-rows > li.eq-cap { display: block; min-height: 0; margin-top: 4px; padding: 4px 10px 2px; background: none; border-top: 1px dashed rgba(217, 164, 67, 0.3); border-radius: 0; font: 700 0.78rem/1.3 Mali, sans-serif; color: #c4b690; }
#itempop .eq-rows > li.eq-opt.q1 > b { color: #7fe07a; }
#itempop .eq-rows > li.eq-opt.q2 > b { color: #5fb4ff; }
#itempop .eq-rows > li.eq-opt.q3 > b { color: #ffb340; }
#itempop .eq-rows > li.eq-opt.unk { margin-top: 4px; min-height: 38px; background: rgba(255, 211, 110, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 211, 110, 0.25); }
#itempop .eq-rows > li.eq-opt.unk > span { color: #d8cdb2; }
#itempop .eq-rows > li.eq-opt.unk > b { font: 700 0.84rem/1.2 Fredoka, Mali, sans-serif; color: #ffd36e; }
#itempop .eq-apbtn { min-height: 30px; padding: 2px 8px; border: 0; border-radius: 8px; cursor: pointer; background: linear-gradient(#ffd56a, #d9a443); color: #2c1c08; font: 700 0.84rem/1.1 Mali, sans-serif; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
#itempop .eq-apbtn:hover { filter: brightness(1.08); }

/* the folded lines: set bonus, line bonus, what it can become */
#itempop .eq-folds { display: flex; flex-direction: column; gap: 6px; }
#itempop .eq-fold { border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#itempop .eq-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 14px; border-radius: 10px; cursor: pointer; }
#itempop .eq-fold > summary::-webkit-details-marker { display: none; }
#itempop .eq-fold > summary:hover { background: rgba(255, 211, 110, 0.08); }
#itempop .eq-fold > summary b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 0.95rem/1.3 Mali, sans-serif; color: #f6dc98; }
#itempop .eq-fold.ln-e > summary b { color: #b6f0aa; }
#itempop .eq-fold.ln-p > summary b { color: #ffb0a4; }
#itempop .eq-fold.eq-next > summary b { color: #d6f7cc; }
#itempop .eq-fold > summary small { flex: none; font: 600 0.82rem/1.3 Mali, sans-serif; color: #c4b690; }
#itempop .eq-fold > summary::after { content: '▾'; flex: none; font-size: 0.85rem; color: #ffd36e; transition: transform 0.15s; }
#itempop .eq-fold[open] > summary::after { transform: rotate(180deg); }
#itempop .eq-steps { list-style: none; margin: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 3px; }
#itempop .eq-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); font: 600 0.84rem/1.4 Mali, sans-serif; color: #a89c80; }
#itempop .eq-steps li em { font-style: normal; font-weight: 800; }
#itempop .eq-steps li.on { color: #b6f0aa; background: rgba(110, 200, 100, 0.1); }
#itempop .eq-fdesc { margin: 0 14px 6px; font: 500 0.8rem/1.4 Mali, sans-serif; color: #bfb397; }
#itempop .eq-chips { margin: 0 10px 10px; }
#itempop .eq-chips .mc-chip img { width: 20px; height: 20px; object-fit: contain; }
#itempop .eq-chips .mc-chip.ready { box-shadow: inset 0 0 0 1.5px #6fcf62; color: #d6f7cc; }

/* หาได้จาก: a row = icon, name + one short line, one button */
#itempop .eq-src .mc-row.eq-r { flex-direction: row; align-items: center; gap: 6px; padding: 3px 5px 3px 3px; }
#itempop .eq-r > .mc-rh { flex: 1; min-width: 0; min-height: 50px; }
#itempop .eq-r .mc-rh b { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 1px; }
#itempop .eq-r .eq-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
#itempop .eq-r .eq-rt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#itempop .eq-r .eq-rt i { font: 600 0.78rem Fredoka, Mali, sans-serif; font-style: normal; color: #ffd27a; }
#itempop .eq-r .mc-rec { flex: none; }
#itempop .eq-r .mc-sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#itempop .eq-r img.eq-mob { border-radius: 50%; background: #241d1d; box-shadow: 0 0 0 2px #d8463a; }
#itempop .eq-r > .lmp-wgo { align-self: center; min-height: 40px; }
#itempop .eq-r.low { opacity: 0.6; }
#itempop .eq-src > .mc-more > summary { justify-content: center; }

@media (max-width: 720px) {
  #itempop.eq-pop .ip-in.mi-in { width: 96vw; }
  #itempop .eq-rows > li { gap: 8px; padding: 0 8px; font-size: 0.86rem; }
  #itempop .eq-rows.c3 > li { grid-template-columns: minmax(0, 1fr) auto 70px; }
  #itempop .eq-rows > li.eq-opt.unk { padding-top: 4px; padding-bottom: 4px; }
  #itempop .eq-rows > li.eq-opt.unk > span { white-space: normal; line-height: 1.35; }
  #itempop .eq-fold > summary { padding: 2px 10px; }
  #itempop .eq-steps li { grid-template-columns: 46px minmax(0, 1fr); padding: 4px 8px; font-size: 0.8rem; }
}