/* 512-kanji lesson: kanji table, the one-kanji-at-a-time deck, kanji cards, stroke
   order and writing pad (on top of minano-lesson.css and lesson-frame.css). */
.bv-kj {
  --kj-ink: #0f172a;
  --kj-stroke: #0f172a;
  --kj-current: #dc2626;
  --kj-grid: #d6d3d1;
  --kj-ghost: #d6d3d1;
  --kj-paper: #fffdf7;
}

/* Self-test: "Nghĩa và âm Hán Việt" off also hides the Hán Việt reading. */
.bv-mn.is-hidevi .bv-kj__hv { visibility: hidden; }
/* Readings in the fact list stay in place as blank bars, so the layout does not jump. */
.bv-mn.is-hidekana .bv-kj__facts .bv-mn__reading { display: block; color: transparent; background: #e2e8f0; border-radius: .3rem; user-select: none; }

/* ---------------------------------------------------------------- table */
.bv-kj__table { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.bv-kj__tile {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; height: 100%;
  padding: .7rem .35rem .6rem; border: 1px solid var(--mn-line); border-radius: 14px;
  background: #fff; color: inherit; text-align: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.bv-kj__tile:hover { transform: translateY(-2px); border-color: var(--lc-line, var(--mn)); }
.bv-kj__tile.is-current { border-color: var(--mn); background: var(--mn-soft); box-shadow: 0 0 0 2px var(--mn-soft2); }
.bv-kj__tilechar { font-family: var(--mn-jp); font-size: 2.2rem; line-height: 1.25; color: var(--kj-ink); }
.bv-kj__hv { font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mn); }
.bv-kj__tilevi { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--mn-mute); }

/* ---------------------------------------------------------------- deck */
.bv-kj__decknav {
  position: sticky; top: calc(var(--lf-nav, 76px) + 8px); z-index: 4;
  display: flex; align-items: center; gap: .4rem; margin-bottom: .9rem; padding: .4rem;
  border: 1px solid var(--border, #e5e7eb); border-radius: 16px; background: rgba(255,255,255,.97);
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
}
.bv-kj__navbtn {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--mn-line); border-radius: 12px; background: #fff; color: var(--mn-ink); cursor: pointer;
}
.bv-kj__navbtn:hover:not(:disabled) { border-color: var(--mn); }
.bv-kj__navbtn:disabled { opacity: .35; cursor: default; }
.bv-kj__deck:not(.is-focus) .bv-kj__navbtn { display: none; }
.bv-kj__picker {
  display: flex; flex: 1 1 auto; gap: .25rem; min-width: 0; margin: 0; padding: .1rem; list-style: none;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
}
.bv-kj__picker::-webkit-scrollbar { display: none; }
.bv-kj__picker li { flex: 0 0 auto; }
.bv-kj__pick {
  display: grid; place-items: center; width: 2.25rem; height: 2.4rem;
  border: 1px solid transparent; border-radius: 10px; background: var(--mn-soft);
  font-family: var(--mn-jp); font-size: 1.15rem; color: var(--kj-ink); cursor: pointer;
}
.bv-kj__pick:hover { border-color: var(--lc-line, var(--mn)); }
.bv-kj__pick[aria-current="true"] { background: var(--mn); color: #fff; }
.bv-kj__deck.is-focus .bv-kj__card:not(.is-active) { display: none; }
.bv-kj__deckfoot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; }
.bv-kj__deck:not(.is-focus) .bv-kj__deckfoot { display: none; }
.bv-kj__deckpos { font-size: .88rem; color: var(--mn-mute); font-variant-numeric: tabular-nums; }
.bv-kj__deckpos strong { color: var(--kj-ink); }

/* ---------------------------------------------------------------- cards */
.bv-kj__card { margin-bottom: 1.1rem; padding: 1.25rem; border: 1px solid var(--mn-line); border-radius: 20px; background: #fff; scroll-margin-top: 4.5rem; }
.bv-kj__deck.is-focus .bv-kj__card { margin-bottom: 0; box-shadow: 0 14px 34px rgba(15,23,42,.06); }
.bv-kj__top { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.bv-kj__glyph { display: flex; flex-direction: column; gap: .55rem; }
.bv-kj__svg, .bv-kj__ghost, .bv-kj__mini { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.bv-kj__svg { border: 1px solid #ece7dc; border-radius: 16px; background: var(--kj-paper); }
.bv-kj__grid path { fill: none; stroke: var(--kj-grid); stroke-width: .6; stroke-dasharray: 2 2; }
.bv-kj__paths path { fill: none; stroke: var(--kj-stroke); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.bv-kj__nums text { font-size: 8px; fill: #94a3b8; font-family: system-ui, sans-serif; }
.bv-kj__svg.is-animating .bv-kj__nums text { opacity: 0; transition: opacity .2s ease; }
.bv-kj__svg.is-animating .bv-kj__nums text.is-shown { opacity: 1; fill: var(--kj-current); }
.bv-kj__svg .bv-kj__stroke.is-current { stroke: var(--kj-current); }
.bv-kj__svg .bv-kj__stroke.is-dim { stroke: #e2e8f0; }
.bv-kj__glyphbtns { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.bv-kj__glyphbtns .bv-mn__btn { min-height: 2.4rem; padding-inline: .5rem; }
.bv-kj__writebtn { grid-column: 1 / -1; }
.bv-kj__writebtn[aria-expanded="true"] { border-color: var(--mn); background: var(--mn-soft); color: var(--mn-ink); }
.bv-kj__bigchar { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #ece7dc; border-radius: 16px; background: var(--kj-paper); font-family: var(--mn-jp); font-size: 6rem; line-height: 1; }

.bv-kj__info { min-width: 0; }
.bv-kj__no { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-mute); }
.bv-kj__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: .1rem 0 0; }
.bv-kj__char { font-family: var(--mn-jp); font-size: 2.8rem; font-weight: 500; line-height: 1.15; color: var(--kj-ink); }
.bv-kj__head .bv-kj__hv { font-size: 1.2rem; letter-spacing: .08em; }
.bv-kj__meaning { margin: .1rem 0 .8rem; font-size: 1.08rem; color: #0f172a; }
.bv-kj__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.bv-kj__facts > div { padding: .5rem .7rem; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f6; min-width: 0; }
.bv-kj__facts dt { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mn-mute); }
.bv-kj__facts dd { margin: .1rem 0 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.bv-kj__facts dd.bv-mn__reading { font-size: 1.02rem; color: #0f172a; }

.bv-kj__mn { margin: .9rem 0 0; padding: .8rem .95rem; border: 1px solid #fde68a; border-radius: 14px; background: #fffbeb; }
.bv-kj__mn p { margin: 0; line-height: 1.7; }
.bv-kj__mnhead { margin-bottom: .2rem !important; font-weight: 800; color: #92400e; }
.bv-kj__note { margin-top: .45rem !important; font-size: .92rem; color: #7c2d12; }

.bv-kj__usage { display: grid; gap: 1rem; margin-top: 1.15rem; padding-top: 1.05rem; border-top: 1px dashed var(--mn-line); }
.bv-kj__usagecol { min-width: 0; }
.bv-kj__words { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.bv-kj__example .bv-mn__sent { padding: .7rem .85rem; border: 1px solid transparent; border-radius: 12px; background: #f8fafc; }
.bv-kj__example .bv-mn__sent.is-playing { border-color: var(--mn); background: var(--mn-soft); }

/* ----------------------------------------------------------- writing pad */
.bv-kj__pad { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin: 1rem 0 .2rem; padding: 1rem; border: 1px dashed var(--mn); border-radius: 16px; background: var(--mn-soft); }
.bv-kj__padbox { position: relative; flex: 0 0 auto; width: min(100%, 17rem); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--mn-line); border-radius: 14px; background: #fff; overflow: hidden; }
.bv-kj__padside { flex: 1 1 14rem; min-width: 0; }
.bv-kj__ghost { position: absolute; inset: 0; pointer-events: none; }
.bv-kj__ghost .bv-kj__paths path { stroke: var(--kj-ghost); stroke-width: 4; }
.bv-kj__pad.is-noghost .bv-kj__ghost .bv-kj__paths { display: none; }
.bv-kj__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.bv-kj__padbtns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.bv-kj__padbtns [aria-pressed="true"] { background: var(--mn); border-color: var(--mn); color: #fff; }
.bv-kj__padtip { margin: 0; font-size: .9rem; line-height: 1.6; color: #334155; }

/* -------------------------------------------------------- stroke strip */
.bv-kj__steps { margin-top: 1rem; }
.bv-kj__steps > summary { width: fit-content; font-size: .9rem; font-weight: 700; color: var(--mn-ink); cursor: pointer; }
.bv-kj__strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; counter-reset: kjstep; }
.bv-kj__strip li { position: relative; border: 1px solid #ece7dc; border-radius: 10px; background: var(--kj-paper); counter-increment: kjstep; }
.bv-kj__strip li::after { content: counter(kjstep); position: absolute; top: .1rem; left: .3rem; font-size: .65rem; color: var(--mn-mute); }
.bv-kj__mini .bv-kj__paths path { stroke-width: 4.5; }
.bv-kj__mini .bv-kj__stroke.is-current { stroke: var(--kj-current); }
.bv-kj__mini .bv-kj__grid { display: none; }
.bv-kj__credit { margin: .8rem 0 0; font-size: .8rem; color: var(--mn-mute); }
.bv-kj__credit a { color: inherit; }

@media (max-width: 575.98px) {
  .bv-kj__top { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bv-kj__glyph { width: 100%; max-width: 15rem; margin: 0 auto; }
  .bv-kj__card { padding: 1rem .9rem; border-radius: 18px; }
  .bv-kj__table { grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr)); }
  .bv-kj__tilechar { font-size: 1.9rem; }
  .bv-kj__deckfoot .bv-mn__btn span:not([data-kj-nextlabel]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bv-kj__svg .bv-kj__paths path { transition: none !important; }
  .bv-kj__picker { scroll-behavior: auto; }
}