/* owner: Phase 5 (Tra cứu + Luyện tập). Uses only :root tokens from style.css. */

/* ---- Tra cứu ---- */
.bsearch { margin: .4rem 0; }
.bsearch input[type=search] { min-height: 46px; font-size: 1rem; }
.b-row { min-height: 56px; }
.st3-learning { color: var(--mid); border-color: var(--mid); }
.st3-known { color: var(--good); border-color: var(--good); }
.dstat { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 2.4rem .8rem 0; }
.dstat .statusline { margin: 0; flex: 1 1 12rem; color: var(--ink); font-weight: 500; }
.dstat .btn { min-height: 40px; }

/* ---- Luyện tập: chooser ---- */
.qpick { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 .4rem; }
.qcustom { padding: .2rem 1rem; }
.qcustom summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--accent); }
.qcustom summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.qcustom .form { padding-bottom: .8rem; }
.qcustom .form select { min-height: 44px; }
.qcustom .form .cta { margin-top: .8rem; }

/* ---- Luyện tập: in a session ---- */
.qbody { flex: 1; display: flex; flex-direction: column; }
.qcard { margin-top: .4rem; }
.opt { min-height: 48px; }
.qbar { min-height: 132px; }
.qbar #fb { min-height: 112px; }
.qbar .fb { margin: 0 0 .6rem; }
.qresult { position: relative; min-height: 120px; }
.qend { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 2rem; }
@media (hover: none), (pointer: coarse) { .opt kbd { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .qend { flex-direction: row; flex-wrap: wrap; }
  .qend .cta { width: auto; flex: 1 1 12rem; }
}