/* Panel NỔI tra thuật ngữ + kiểu của chính link auto-link.
   Nạp cùng terms_sheet.js ở bất kỳ bề mặt nào bật auto-link. */

/* Link là <button>, không phải <a>: nó KHÔNG điều hướng, và cho nó hình dạng <a> sẽ hứa
   với người chơi một điều nó không làm. Nhưng phải gỡ sạch kiểu nút mặc định của trình
   duyệt, nếu không nó phá dòng chữ của bình chú. */
.xq-term {
  display: inline; margin: 0; padding: 0; font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer; text-align: inherit;
  border-bottom: 1px dashed rgba(180, 140, 60, .85);
}
.xq-term:hover { border-bottom-style: solid; background: rgba(180, 140, 60, .14); }
.xq-term:focus-visible { outline: 2px solid rgba(180, 140, 60, .9); outline-offset: 2px; }

/* Nền BẮT CLICK nhưng gần như trong suốt: panel là lớp nổi, không phải hộp thoại chặn
   đường. Làm tối nền ở đây sẽ che mất chính câu bình chú mà người chơi đang đọc dở. */
.xq-term-backdrop { position: fixed; inset: 0; z-index: 900; background: transparent; }
.xq-term-backdrop[hidden], .xq-term-pop[hidden] { display: none; }

.xq-term-pop {
  position: fixed; z-index: 901; top: 0; left: 0;
  width: max-content; max-width: 360px;
  max-height: 70vh; overflow-y: auto;
  padding: .85rem .9rem;
  border-radius: .7rem;
  background: var(--surface, #1d1b17); color: var(--text, #f2ece0);
  border: 1px solid rgba(180, 140, 60, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: .95rem; line-height: 1.55;
}

.xq-term-close {
  position: absolute; top: .25rem; right: .35rem; width: 1.9rem; height: 1.9rem;
  font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 50%;
  background: none; border: 0; color: inherit; opacity: .65;
}
.xq-term-close:hover { opacity: 1; }
.xq-term-close:focus-visible { outline: 2px solid rgba(180, 140, 60, .9); }

/* Màn hẹp: panel chiếm trọn bề ngang cho phép. `width: max-content` ở trên co panel theo
   nội dung — hợp lý cho popover một thuật ngữ (nội dung rộng nên nó tự đầy), nhưng bảng
   "Tra thuật ngữ" thì nội dung hẹp: đo trên prod 375px được 223/375 (60%), dồn vào góc
   phải, ô tìm còn 192px. `place()` đã kẹp max-width theo khung nhìn nên 100% ở đây chỉ
   nới sàn, không phá trần. */
@media (max-width: 480px) {
  .xq-term-pop { width: 100%; }
}

/* Vùng chạm 44px cho thiết bị cảm ứng. Đo trên prod: nút đóng 30×30, nút mở bảng 35×32 —
   dưới mức tối thiểu ai cũng khuyến nghị. Neo vào `pointer: coarse` chứ không vào bề
   rộng: cái quyết định là NGÓN TAY hay con trỏ, không phải màn to hay nhỏ — máy tính
   bảng ngang vẫn là ngón tay, còn cửa sổ desktop thu hẹp thì vẫn là chuột. */
@media (pointer: coarse) {
  .xq-term-close { width: 2.75rem; height: 2.75rem; top: .1rem; right: .1rem; }
  .xq-term-name { margin-right: 2.6rem; }
  /* Nhân đôi class để nâng độ ưu tiên: practice_pro.js bơm `.panel-actions .ghost
     { min-height: 32px }` bằng thẻ <style> lúc chạy, và selector hai class đó thắng
     `.xq-terms-btn` một class — nên bản đầu chỉ nới được bề ngang, chiều cao vẫn 32.
     Đo mới thấy: 44×32. */
  .xq-terms-btn.xq-terms-btn { min-width: 44px; min-height: 44px; }
}

.xq-term-name { margin: 0 1.8rem .1rem 0; font-size: 1.08rem; }
.xq-term-zh { margin: 0 0 .5rem; font-size: 1rem; opacity: .7; }
.xq-term-def { margin: 0 0 .6rem; }
.xq-term-alias { margin: 0 0 .7rem; font-size: .85rem; opacity: .72; }

.xq-term-cta { display: flex; flex-wrap: wrap; gap: .45rem; }
.xq-term-cta a {
  padding: .42rem .8rem; border-radius: .5rem; text-decoration: none;
  font-size: .9rem; color: inherit; border: 1px solid rgba(180, 140, 60, .55);
}
.xq-term-full { background: rgba(180, 140, 60, .22); }
/* Blog là CTA PHỤ — nhạt hơn, và chỉ tồn tại khi mapping đã verify. */
.xq-term-blog { opacity: .82; border-color: rgba(120, 110, 80, .45) !important; }

.xq-term-back {
  margin: .6rem 0 0; padding: 0; font: inherit; font-size: .85rem;
  background: none; border: 0; color: inherit; opacity: .7; cursor: pointer;
}
.xq-term-back:hover { opacity: 1; text-decoration: underline; }

/* ---- chế độ tra cứu ---- */

.xq-term-search {
  width: 100%; box-sizing: border-box; margin: .1rem 0 .5rem;
  padding: .45rem .6rem; font: inherit; font-size: .92rem;
  color: inherit; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(180, 140, 60, .4); border-radius: .45rem;
}
.xq-term-search:focus { outline: 2px solid rgba(180, 140, 60, .8); outline-offset: 0; }

.xq-term-results { display: flex; flex-direction: column; gap: .1rem; }
.xq-term-row {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  padding: .38rem .45rem; font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: .35rem; color: inherit;
}
.xq-term-row:hover { background: rgba(180, 140, 60, .16); }
.xq-term-row:focus-visible { outline: 2px solid rgba(180, 140, 60, .9); }
.xq-term-row-vi { font-weight: 600; font-size: .93rem; }
.xq-term-row-zh { opacity: .6; font-size: .86rem; }
.xq-term-empty { margin: .4rem .2rem; font-size: .9rem; opacity: .78; }

.xq-term-foot { margin-top: .55rem; padding-top: .5rem;
                border-top: 1px solid rgba(180, 140, 60, .22); }
.xq-term-all { font-size: .85rem; color: inherit; opacity: .8; }

/* Lối vào trang thuật ngữ trên /practice (browse.html). Nhẹ, không tranh chỗ với tiêu đề. */
/* Lối vào trang thuật ngữ ở đầu /practice — chip biểu tượng, nép phải .pb-header.
   Layout đặt ở ĐÂY chứ không ở khối STYLE của practice_browse.js: file này là <link>
   thường nên nó có mặt cả khi bundle JS chưa chạy, cùng lý do mà link được viết thẳng
   vào template thay vì do JS dựng. Đặt flex lên .pb-header là hệ quả của chip này, nên
   nó sống cùng chỗ với chip. */
.pb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pb-header-main { min-width: 0; }
.pb-terms-entry {
  flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 13px; line-height: 1; text-decoration: none; color: #5c4b28;
  border: 1px solid #c9bfa8; background: #fff; border-radius: 8px; padding: 6px 11px;
  transition: border-color .12s, box-shadow .12s;
}
.pb-terms-entry:hover { border-color: #5c4b28; box-shadow: 0 2px 8px rgba(92, 75, 40, .12); }
.pb-terms-ico { font-size: 15px; line-height: 1; }
/* Hẹp thì bỏ chữ, giữ biểu tượng: nhãn là thứ bỏ được, chỗ ngồi thì không. `title` +
   `aria-label` ở template mang nghĩa khi chữ biến mất. */
@media (max-width: 520px) { .pb-terms-lbl { display: none; } }

.xq-term-hint { margin: .1rem .2rem .3rem; font-size: .82rem; opacity: .62; }

/* Nút 📖 mượn className của nút đổi ký pháp bên cạnh (xem app_config.js), nên nó đã hoà
   vào hàng nút của từng trang. Chỉ chỉnh cỡ emoji: các neo dùng ⟳ hoặc chữ "VI EN", cả
   hai nhỏ hơn emoji ở cùng font-size, và để nguyên thì 📖 nhô cao hơn hàng. */
.xq-terms-btn { font-size: 15px; line-height: 1; }