/* -----------------------------------------------------------
   Mục Kanji (/kanji, /ja/kanji…). Trang sinh bởi
   tools/site/build_kanji_pages.py — sửa giao diện ở đây, sửa chữ ở bộ dựng,
   sửa nội dung ở tools/kanken/.

   Tách khỏi style.css cùng lý do với flashcards.css: sửa style.css là đổi dấu
   `?v=` trên mọi trang của site. CSP `style-src 'self'` cấm `<style>` và thuộc
   tính `style=` nhúng, nên mọi thứ nằm ở file này — kể cả kết quả tìm kiếm do
   kanji-search.js dựng (script chỉ thêm phần tử và class, không đặt style).
----------------------------------------------------------- */

.kj { padding: 36px 0 64px; }
.kj h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.25; margin: 0 0 14px; }
.kj h2 { margin-top: 40px; }
.kj h3 { margin: 26px 0 8px; font-size: 19px; }
.kj rt { font-size: 0.55em; color: var(--ink-soft); }
.kj-ro { color: var(--ink-faint); font-size: 0.9em; }
.kj-note { font-size: 14px; color: var(--ink-faint); }

/* Ô tìm: ô nhập đủ to cho ngón tay (≥ 48 px), kết quả là danh sách liên kết
   thật — Tab và mũi tên đều đi được, trình đọc màn hình đọc số kết quả qua
   vùng `role=status`. */
.kj-search { margin: 26px 0 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
             background: var(--bg-tint); }
.kj-search label { display: block; font-weight: 700; margin: 0 0 6px; }
.kj-search input {
  width: 100%; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 18px;
  border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
.kj-search input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(61, 139, 253, .25); }
.kj-hint { margin: 8px 0 0; font-size: 14px; color: var(--ink-faint); }
.kj-status { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 1.4em; }
.kj-status:empty { min-height: 0; margin: 0; }
.kj-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.kj-results:empty { display: none; }
.kj-results a {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 12px; align-items: center;
  padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink-soft); line-height: 1.35; min-height: 64px;
}
.kj-results a:hover, .kj-results a:focus { border-color: var(--brand-500); outline: none; background: #fff; }
.kj-results a:focus-visible { box-shadow: 0 0 0 3px rgba(61, 139, 253, .35); }
.kj-results .c { grid-row: span 2; font-size: 36px; color: var(--ink); text-align: center; line-height: 1; }
.kj-results .m { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.kj-results .r { font-size: 14px; overflow-wrap: anywhere; }
.kj-results .l { grid-row: span 2; font-size: 13px; color: var(--brand-600); white-space: nowrap; }
.kj-more { font-size: 14px; color: var(--ink-faint); padding: 4px 2px; }

/* Ô Level trên trang tổng. */
.kj-levels {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.kj-levels a {
  display: block; height: 100%; padding: 12px 16px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink-soft);
  font-size: 14px; line-height: 1.45;
}
.kj-levels a:hover { border-color: var(--brand-300); background: var(--bg-tint); }
.kj-levels a[aria-current="page"] { border-color: var(--brand-500); background: var(--bg-tint); }
.kj-levels b { display: block; color: var(--ink); font-size: 17px; }
.kj-sample { display: block; font-size: 26px; color: var(--ink); letter-spacing: .08em; margin: 2px 0; }
.kj-levels span:last-child { display: block; }

/* Lưới chữ của một Level: ô ~ 88 px như nút trong app. */
.kj-grid {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
}
.kj-grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px;
  padding: 8px 6px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--ink-faint); font-size: 12px; line-height: 1.3; text-align: center;
}
.kj-grid a:hover, .kj-grid a:focus-visible { border-color: var(--brand-500); background: var(--bg-tint); }
.kj-grid b { font-size: 38px; font-weight: 500; line-height: 1.15; color: var(--ink); }
.kj-grid span { overflow-wrap: anywhere; }

/* Trang một chữ. */
.kj-hero { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 24px; align-items: start; margin-top: 18px; }
.kj-big {
  margin: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(110px, 18vw, 170px); line-height: 1; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  /* Ô chữ mẫu có đường kẻ giữa như vở tập viết — vẽ bằng nền, không thêm ảnh. */
  background-image: linear-gradient(transparent calc(50% - 1px), #edf1f6 calc(50% - 1px), #edf1f6 calc(50% + 1px), transparent calc(50% + 1px)),
                    linear-gradient(90deg, transparent calc(50% - 1px), #edf1f6 calc(50% - 1px), #edf1f6 calc(50% + 1px), transparent calc(50% + 1px));
}
.kj-facts, .kj-langs { margin: 0; display: grid; gap: 4px; }
.kj-facts div, .kj-langs div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--line); }
.kj-facts dt, .kj-langs dt { color: var(--ink-faint); font-size: 14px; }
.kj-facts dd, .kj-langs dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.kj-strokes { display: block; width: 100%; max-width: 510px; height: auto; margin-top: 12px; }
.kj-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kj-words li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); }
.kj-words p { margin: 0; }
.kj-w { font-size: 24px; color: var(--ink); line-height: 1.6; }
.kj-wm { color: var(--ink-soft); }
.kj-s { margin-top: 6px !important; font-size: 18px; line-height: 2; color: var(--ink); }
.kj-s b { color: var(--brand-600); font-weight: 700; }
.kj-t { color: var(--ink-soft); font-size: 15px; }
.kj-nav { margin-top: 32px; }

@media (max-width: 560px) {
  .kj-hero { grid-template-columns: 1fr; }
  .kj-big { width: 170px; margin: 0 auto; }
  .kj-facts div, .kj-langs div { grid-template-columns: 7.2em 1fr; gap: 8px; }
  .kj-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .kj-results a { grid-template-columns: 48px 1fr; }
  .kj-results .l { grid-row: auto; grid-column: 2; }
  .kj-search { padding: 14px; }
}