/* Minna no Nihongo grammar lesson; the exercises and sentence styles are shared with
   the 512-kanji lesson. Page frame (hero, side panel, finish block): lesson-frame.css. */
.bv-mn {
  --mn: var(--lc, #0f766e);
  --mn-ink: var(--lc-ink, #134e4a);
  --mn-soft: var(--lc-soft, #f0fdfa);
  --mn-soft2: var(--lc-soft2, #ccfbf1);
  --mn-line: #e5e7eb;
  --mn-mute: #64748b;
  --mn-ok: #15803d;
  --mn-ok-soft: #f0fdf4;
  --mn-bad: #b91c1c;
  --mn-bad-soft: #fef2f2;
  --mn-jp: var(--lf-jp, "Roboto", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif);
}
.bv-mn [hidden] { display: none !important; }
.bv-mn button:focus-visible, .bv-mn a:focus-visible, .bv-mn summary:focus-visible,
.bv-mn input:focus-visible { outline: 3px solid var(--lc-line, #5eead4); outline-offset: 2px; }

/* ------------------------------------------------------------ sections */
.bv-mn__section { margin: 0 0 2.6rem; }
.bv-mn__h2 { margin: 0 0 .45rem; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 800; color: var(--ink, #0f172a); }
.bv-mn__lead { margin: 0 0 1rem; max-width: 72ch; line-height: 1.65; color: var(--mn-mute); }
.bv-mn__ja { margin: 0; font-family: var(--mn-jp); font-size: clamp(1.08rem, 2vw, 1.26rem); line-height: 1.9; color: #0f172a; }
.bv-mn__reading { margin: .15rem 0 0; font-family: var(--mn-jp); font-size: .9rem; line-height: 1.8; color: #475569; }
.bv-mn__vi { margin: .2rem 0 0; font-size: .93rem; line-height: 1.6; color: #475569; }

/* buttons and chips used across the lesson */
.bv-mn__btn, .bv-mn__chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 2.35rem; padding: .35rem .8rem; border: 1px solid var(--mn-line); border-radius: 10px;
  background: #fff; color: #334155; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.bv-mn__btn:hover, .bv-mn__chip:hover { border-color: var(--mn); color: var(--mn-ink); }
.bv-mn__btn:disabled { opacity: .45; cursor: default; }
.bv-mn__chip { min-height: 2rem; padding: .25rem .65rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.bv-mn__chip[aria-pressed="true"] { background: var(--mn); border-color: var(--mn); color: #fff; }
.bv-mn__btn--primary { background: var(--mn); border-color: var(--mn); color: #fff; }
.bv-mn__btn--primary:hover { background: var(--mn-ink); border-color: var(--mn-ink); color: #fff; }
.bv-mn__btn--ghost { min-height: 2rem; padding: .25rem .65rem; font-size: .8rem; }
.bv-mn__playall[aria-pressed="true"] { background: var(--mn); border-color: var(--mn); color: #fff; }

.bv-mn__play {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--mn-line); border-radius: 50%;
  background: #fff; color: var(--mn); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.bv-mn__play:hover, .bv-mn__play[aria-pressed="true"] { background: var(--mn); border-color: var(--mn); color: #fff; }
.bv-mn__play--sm { width: 2.1rem; height: 2.1rem; }
.bv-mn__play--lg { width: 3rem; height: 3rem; font-size: 1.2rem; }

/* ------------------------------------------------------------ vocabulary */
.bv-mn__vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.bv-mn__word {
  position: relative; display: grid; gap: .05rem; padding: .75rem 3rem .75rem .9rem;
  border: 1px solid var(--mn-line); border-radius: 14px; background: #fff;
  transition: border-color .15s ease;
}
.bv-mn__word:hover { border-color: var(--lc-line, #99f6e4); }
.bv-mn__word.is-playing { border-color: var(--mn); background: var(--mn-soft); }
.bv-mn__wordja { font-family: var(--mn-jp); font-size: 1.15rem; color: #0f172a; }
.bv-mn__wordreading { margin: 0; font-size: .84rem; }
.bv-mn__wordvi { margin: 0; font-size: .88rem; }
.bv-mn__word .bv-mn__play { position: absolute; top: .6rem; right: .6rem; }

/* ------------------------------------------------------------ grammar */
.bv-mn__gtoc { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: gtoc; }
.bv-mn__gtoc li { counter-increment: gtoc; }
.bv-mn__gtoc a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px;
  background: var(--mn-soft); border: 1px solid var(--lc-line, #ccfbf1); color: var(--mn-ink);
  font-family: var(--mn-jp); font-size: .9rem;
}
.bv-mn__gtoc a::before { content: counter(gtoc); font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 800; color: var(--mn); }
.bv-mn__gtoc a:hover { border-color: var(--mn); }
.bv-mn__gp { margin: 0 0 1.25rem; padding: 1.25rem 1.3rem; border: 1px solid var(--mn-line); border-radius: 18px; background: #fff; }
.bv-mn__gphead { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .95rem; padding-bottom: .85rem; border-bottom: 1px dashed var(--mn-line); }
.bv-mn__gno {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: var(--lc-grad, var(--mn)); color: #fff; font-weight: 800;
}
.bv-mn__gphtext { min-width: 0; }
.bv-mn__pattern { margin: 0; font-family: var(--mn-jp); font-size: clamp(1.18rem, 2.4vw, 1.5rem); font-weight: 700; line-height: 1.5; color: var(--mn-ink); overflow-wrap: anywhere; }
.bv-mn__gtitle { margin: .1rem 0 0; font-weight: 600; color: #475569; }
.bv-mn__explain { margin: 0 0 .75rem; max-width: 76ch; line-height: 1.75; }
.bv-mn__formswrap { margin: .5rem 0 1rem; overflow-x: auto; border: 1px solid var(--mn-line); border-radius: 12px; }
.bv-mn__forms { width: 100%; border-collapse: collapse; font-size: .93rem; }
.bv-mn__forms caption { caption-side: top; padding: .55rem .8rem; background: var(--mn-soft); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mn); }
.bv-mn__forms th, .bv-mn__forms td { padding: .6rem .8rem; border-top: 1px solid var(--mn-line); vertical-align: top; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.bv-mn__forms th { width: 34%; font-weight: 600; color: #475569; }
.bv-mn__forms td { font-family: var(--mn-jp); font-size: 1.02rem; line-height: 1.75; color: #0f172a; }
.bv-mn__notes { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; }
.bv-mn__noteshead { margin: 0 0 .35rem; font-size: .88rem; font-weight: 800; color: #92400e; }
.bv-mn__notes ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.2rem; }
.bv-mn__notes li { font-size: .92rem; line-height: 1.65; }
.bv-mn__exhead { margin: 0 0 .45rem; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mn); }

.bv-mn__examples { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: ex; }
.bv-mn__sent { display: flex; align-items: flex-start; gap: .6rem; }
.bv-mn__sentbody { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bv-mn__examples > .bv-mn__sent {
  counter-increment: ex; padding: .7rem .85rem; border: 1px solid transparent; border-radius: 12px; background: #f8fafc;
  transition: border-color .15s ease, background .15s ease;
}
.bv-mn__examples > .bv-mn__sent::before { content: counter(ex); flex: 0 0 1.4rem; padding-top: .3rem; font-size: .8rem; font-weight: 800; color: var(--mn-mute); font-variant-numeric: tabular-nums; }
.bv-mn__examples > .bv-mn__sent.is-playing { border-color: var(--mn); background: var(--mn-soft); }

/* ------------------------------------------------------------ conversation */
.bv-mn__kaiwa {
  display: grid; gap: .85rem; margin: 0 0 .8rem; padding: 1.1rem; list-style: none;
  border: 1px solid var(--mn-line); border-radius: 18px;
  background: linear-gradient(180deg, var(--lf-paper, #faf7f1), #fff);
}
.bv-mn__turn { display: flex; align-items: flex-end; gap: .6rem; max-width: min(100%, 36rem); }
.bv-mn__turn.is-b { flex-direction: row-reverse; margin-left: auto; }
.bv-mn__avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--lc-line, #99f6e4); color: var(--mn-ink); font-size: .9rem; font-weight: 800;
}
.bv-mn__turn.is-b .bv-mn__avatar { background: var(--mn); border-color: var(--mn); color: #fff; }
.bv-mn__bubble {
  min-width: 0; padding: .55rem .8rem .65rem; border: 1px solid var(--mn-line);
  border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bv-mn__turn.is-b .bv-mn__bubble { border-radius: 16px 16px 4px 16px; background: var(--mn-soft); border-color: var(--lc-line, #ccfbf1); }
.bv-mn__bubble:has(.is-playing) { border-color: var(--mn); box-shadow: 0 0 0 3px var(--mn-soft2); }
.bv-mn__speaker { display: block; margin-bottom: .05rem; font-size: .74rem; font-weight: 800; color: var(--mn); }
.bv-mn__bubble .bv-mn__sent { gap: .5rem; }
.bv-mn__bubble .bv-mn__play { width: 2.2rem; height: 2.2rem; }
.bv-mn__tip { display: flex; gap: .45rem; margin: 0; font-size: .88rem; color: var(--mn-mute); }
.bv-mn__tip i { color: var(--mn); }

/* ------------------------------------------------------------ exercises */
.bv-mn__ex { margin: 0 0 1.25rem; padding: 1.15rem 1.2rem .5rem; border: 1px solid var(--mn-line); border-radius: 18px; background: #fff; }
.bv-mn__exhead2 { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; margin-bottom: .55rem; }
.bv-mn__exno { display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 11px; background: var(--mn-soft2); color: var(--mn-ink); font-weight: 800; }
.bv-mn__exhtext { flex: 1 1 12rem; min-width: 0; }
.bv-mn__extype { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mn); }
.bv-mn__extitle { margin: 0; font-size: 1.06rem; font-weight: 800; }
.bv-mn__excount { margin: 0; padding: .2rem .65rem; border-radius: 999px; background: #f1f5f9; font-size: .8rem; font-weight: 700; color: var(--mn-mute); font-variant-numeric: tabular-nums; }
.bv-mn__instr { margin: 0 0 .4rem; line-height: 1.65; color: #334155; }
.bv-mn__qs { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: q; }
.bv-mn__q { position: relative; counter-increment: q; padding: .95rem .1rem .95rem 2.65rem; border-top: 1px solid var(--mn-line); scroll-margin-top: 30vh; }
.bv-mn__q::before {
  content: counter(q); position: absolute; top: 1.05rem; left: 0;
  display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: #f1f5f9; color: var(--mn-mute); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bv-mn__q.is-correct::before { content: "✓"; background: #16a34a; color: #fff; }
.bv-mn__q.is-wrong::before { background: #fee2e2; color: var(--mn-bad); }
.bv-mn__q.is-flash { border-radius: 12px; }
.bv-mn__qbody { min-width: 0; overflow-wrap: anywhere; }
.bv-mn__blank { display: inline-block; min-width: 2.2em; border-bottom: 2px solid var(--mn); color: var(--mn); text-align: center; }
.bv-mn__cue { margin: 0 0 .25rem; font-size: .84rem; font-weight: 700; color: var(--mn); }
.bv-mn__question { margin: 0 0 .2rem; font-weight: 600; line-height: 1.6; }
.bv-mn__question--vi { font-size: 1.02rem; }
.bv-mn__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: .45rem; margin-top: .65rem; }
.bv-mn__opt {
  display: flex; align-items: center; gap: .55rem; min-height: 2.85rem; padding: .45rem .7rem;
  border: 1px solid var(--mn-line); border-radius: 12px; background: #fff; color: #0f172a;
  text-align: left; font-size: .98rem; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.bv-mn__opt[lang^="ja"] { font-family: var(--mn-jp); }
.bv-mn__opt:hover:not(:disabled) { border-color: var(--mn); background: var(--mn-soft); }
.bv-mn__opt:disabled { cursor: default; }
.bv-mn__optkey { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.65rem; height: 1.65rem; border-radius: 8px; background: #f1f5f9; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 800; color: var(--mn-mute); }
.bv-mn__opt.is-right { border-color: var(--mn-ok); background: #dcfce7; }
.bv-mn__opt.is-right .bv-mn__optkey { background: var(--mn-ok); color: #fff; }
.bv-mn__opt.is-picked-wrong { border-color: #fca5a5; background: var(--mn-bad-soft); color: #7f1d1d; text-decoration: line-through; }
.bv-mn__inputrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.bv-mn__input { flex: 1 1 14rem; width: 100%; min-width: 0; min-height: 2.85rem; padding: .45rem .8rem; border: 1px solid #cbd5e1; border-radius: 12px; font-family: var(--mn-jp); font-size: 1.05rem; }
.bv-mn__input::placeholder { font-family: "Roboto", system-ui, sans-serif; color: #94a3b8; }
.bv-mn__input:focus { border-color: var(--mn); outline: 3px solid var(--mn-soft2); outline-offset: 0; }
.bv-mn__input[readonly] { background: var(--mn-ok-soft); border-color: #86efac; }
.bv-mn__inputrow .bv-mn__btn { min-height: 2.85rem; padding-inline: 1rem; }
.bv-mn__self { margin-top: .5rem; }
.bv-mn__built { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 3.1rem; margin-top: .65rem; padding: .45rem; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; }
.bv-mn__built:empty::before { content: "Bấm các thẻ bên dưới theo đúng thứ tự"; align-self: center; padding: 0 .3rem; font-family: system-ui, sans-serif; font-size: .82rem; color: #94a3b8; }
.bv-mn__pool { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.75rem; margin-top: .5rem; }
.bv-mn__token { min-height: 2.5rem; padding: .35rem .75rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-family: var(--mn-jp); font-size: 1.02rem; cursor: pointer; box-shadow: 0 2px 0 #e2e8f0; }
.bv-mn__token:hover:not(:disabled) { border-color: var(--mn); color: var(--mn-ink); }
.bv-mn__built .bv-mn__token { border-color: var(--mn); background: var(--mn-soft); }
.bv-mn__token:disabled { cursor: default; color: #0f172a; }
.bv-mn__qacts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.bv-mn__listen { display: flex; align-items: center; gap: .7rem; margin-bottom: .45rem; }
.bv-mn__listenlabel { font-size: .9rem; color: #334155; }
.bv-mn__noaudio { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 10px; background: #f1f5f9; font-size: .85rem; color: var(--mn-mute); }
.bv-mn__script { margin: 0 0 .5rem; font-size: .9rem; }
.bv-mn__script > summary { width: fit-content; color: var(--mn); font-weight: 700; cursor: pointer; }
.bv-mn__script[open] { padding: .5rem .75rem; border-radius: 10px; background: #f8fafc; }
.bv-mn__feedback { margin: .5rem 0 0; font-size: .9rem; font-weight: 700; }
.bv-mn__feedback:empty { display: none; }
.bv-mn__q.is-correct .bv-mn__feedback { color: var(--mn-ok); }
.bv-mn__q.is-wrong .bv-mn__feedback { color: var(--mn-bad); }
.bv-mn__answer { margin-top: .55rem; font-size: .9rem; }
.bv-mn__answer > summary { width: fit-content; color: var(--mn-mute); cursor: pointer; }
.bv-mn__answer[open] { padding: .6rem .8rem; border-radius: 10px; background: #f8fafc; }
.bv-mn__answer[open] > summary { margin-bottom: .35rem; }
.bv-mn__answerline { margin: 0; }
.bv-mn__answerline strong[lang^="ja"] { font-family: var(--mn-jp); font-size: 1.05rem; color: var(--mn-ink); }
.bv-mn__alt, .bv-mn__explanation { margin: .35rem 0 0; line-height: 1.65; color: #334155; }
.bv-mn__alt span { font-family: var(--mn-jp); }

/* ------------------------------------------------------------ reading aids */
.bv-mn.is-hidekana .bv-mn__reading { display: none; }
.bv-mn.is-hidekana .bv-mn__answer .bv-mn__reading,
.bv-mn.is-hidekana .bv-mn__script .bv-mn__reading { display: block; }
.bv-mn.is-hidevi .bv-mn__sent .bv-mn__vi,
.bv-mn.is-hidevi .bv-mn__word .bv-mn__vi { display: none; }

@media (max-width: 767.98px) {
  .bv-mn__gp, .bv-mn__ex { padding-inline: .95rem; border-radius: 16px; }
  .bv-mn__forms th { width: 40%; }
  .bv-mn__kaiwa { padding: .85rem .7rem; }
  .bv-mn__turn { max-width: 100%; }
  .bv-mn__avatar { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
  .bv-mn__q { padding-left: 2.35rem; }
  .bv-mn__q::before { width: 1.6rem; height: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bv-mn * { transition: none !important; scroll-behavior: auto; }
}