/* /kanji/ and /kanji/<chữ> (server/kanji_pages.py) */
.kj-page { padding-top: var(--space-5); }
.kj-crumbs { font-size: var(--text-sm); color: var(--ink-faint); margin-bottom: var(--space-4); }
.kj-crumbs a { color: var(--ink-soft); }
.kj-title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2;
  margin: 0 0 var(--space-4); text-wrap: balance; }
.kj-lede { color: var(--ink-soft); max-width: 40em; margin: 0 0 var(--space-5); }
.kj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); }
.kj-hero { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.kj-big { font-family: var(--font-jp); font-weight: 700; font-size: 150px; line-height: 1;
  color: var(--ink); flex: none; }
.kj-facts { flex: 1; min-width: 220px; }
.kj-hv { font-size: var(--text-3xl); font-weight: 700; color: var(--accent); margin: 0;
  letter-spacing: 0.02em; }
.kj-hv-none { font-size: var(--text-base); color: var(--ink-soft); font-weight: 600; letter-spacing: 0; }
.kj-meaning { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.kj-reads { display: grid; gap: var(--space-2); margin: 0; }
.kj-reads div { display: flex; gap: var(--space-3); }
.kj-reads dt { width: 70px; flex: none; color: var(--ink-faint); font-size: var(--text-sm); }
.kj-reads dd { margin: 0; font-weight: 600; }
.kj-section { margin-top: var(--space-6); }
.kj-section h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.kj-count { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-faint); font-weight: 400; }
.kj-note { color: var(--ink-soft); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.kj-example { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4); margin: 0; }
.kj-ex-word { font-family: var(--font-jp); font-size: var(--text-2xl); font-weight: 700; }
.kj-ex-read { font-family: var(--font-jp); color: var(--ink-faint); }
.kj-ex-mean { font-weight: 600; color: var(--accent); }
.kj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: var(--space-2); }
.kj-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  color: var(--ink); transition: border-color .14s ease; }
.kj-cell:hover, .kj-cell:focus-visible { border-color: var(--accent); outline: none; }
.kj-cell-k { font-family: var(--font-jp); font-size: 30px; font-weight: 700; line-height: 1.2; }
.kj-cell-hv { font-size: var(--text-xs); font-weight: 700; color: var(--accent); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kj-cell[hidden] { display: none; }
.kj-cta { margin-top: var(--space-6); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: var(--space-4); }
.kj-cta p { margin: 0; flex: 1; min-width: 220px; }
.kj-cta-btn { background: var(--accent); color: var(--ink-inverse); font-weight: 700; text-decoration: none;
  padding: 10px 18px; border-radius: var(--radius-pill); white-space: nowrap; }
.kj-cta-btn:hover { background: var(--accent-hover); }
.kj-pager { display: flex; justify-content: space-between; margin-top: var(--space-5); font-family: var(--font-jp); }
.kj-pager a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: var(--text-lg); }
.kj-search { display: flex; flex-direction: column; gap: 4px; max-width: 420px; font-size: var(--text-sm);
  font-weight: 600; color: var(--ink-soft); }
.kj-search input { font: inherit; font-size: var(--text-base); font-weight: 400; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.kj-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Gồm các bộ: one row per part, the other kanji that hold it beside it. */
.kj-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kj-part { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-2) var(--space-3); }
.kj-part-shape { font-family: var(--font-jp); font-size: 30px; font-weight: 700; line-height: 1.2; width: 1.3em;
  text-align: center; flex: none; }
.kj-part-vi { font-size: var(--text-sm); font-weight: 700; color: var(--accent); min-width: 7.5em; }
.kj-part-others { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.kj-part-others a { font-family: var(--font-jp); font-size: 20px; color: var(--ink); text-decoration: none;
  min-width: 36px; min-height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); }
.kj-part-others a:hover, .kj-part-others a:focus-visible { background: var(--accent-soft); color: var(--accent); }
.kj-source { font-size: var(--text-xs); color: var(--ink-faint); margin: var(--space-2) 0 0; }
.kj-source a { color: inherit; }
@media (pointer: coarse), (max-width: 720px) {
  .kj-part-others a { min-width: 44px; min-height: 44px; }
}
@media (max-width: 520px) { .kj-big { font-size: 110px; } }

/* "Cách viết" (server/kanji_pages.py strokes_html, js/kanji-write.js): the
   kanji drawn stroke by stroke over its faint shape, in KanjiVG's 109 box. */
.kj-write-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.kj-strokes { width: min(220px, 60vw); aspect-ratio: 1; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); }
.kj-strokes path, .kj-pad svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kj-guide { stroke: var(--line); stroke-width: .6; stroke-dasharray: 2 2; }
.kj-ghost path { stroke: var(--line-strong); stroke-width: 3; opacity: .55; }
.kj-ink path { stroke: var(--ink); stroke-width: 3.2; }
.kj-nums text { font-family: var(--font-mono); font-size: 7px; fill: var(--accent); }
.kj-strokes.no-nums .kj-nums { display: none; }
/* Each stroke's place in the order, set on it by the server: it delays its turn. */
.kj-ink path, .kj-nums text { --i: 0; }
.is-playing .kj-ink path { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: kj-draw .45s ease-in-out both; animation-delay: calc(var(--i) * .55s); }
.is-playing .kj-nums text { opacity: 0; animation: kj-show .01s forwards; animation-delay: calc(var(--i) * .55s); }
/* Hidden until its turn: a round cap would otherwise leave a dot where the stroke starts. */
@keyframes kj-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes kj-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .is-playing .kj-ink path { animation: none; stroke-dashoffset: 0; }
  .is-playing .kj-nums text { animation: none; opacity: 1; }
}
.kj-write-tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.kj-write-tools[hidden] { display: none; }

/* The writing pad: the learner's strokes on a canvas over the faint kanji. */
.kj-pad { margin-top: var(--space-4); display: grid; gap: var(--space-3); justify-items: start; }
.kj-pad[hidden] { display: none; }
.kj-pad-box { position: relative; width: min(300px, 82vw); aspect-ratio: 1; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); touch-action: none; }
.kj-pad-box svg, .kj-pad-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.kj-pad-box .kj-ghost path { opacity: .35; stroke-width: 4; }
.kj-pad-box.no-guide .kj-pad-guide .kj-ghost { display: none; }
.kj-pad-model[hidden] { display: none; }
.kj-pad-model .kj-ink path { stroke: var(--accent); stroke-width: 3; opacity: .8; }
.kj-pad-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kj-pad-count { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }