/* css/reader.css — o'qish: hikoya, dialog, 3 darajali tarjima, cloze, talaffuz */
/* ---------- O'qish (hikoyalar) — P5.1 ---------- */
.st-head{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow); margin-bottom:12px}
.st-head h2{margin:4px 0 4px; font-family:var(--display); font-size:19px}
.st-text{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow)}
.st-p{margin:0 0 14px; font-size:17px; line-height:1.95}
.st-p:last-child{margin-bottom:0}
/* So'zlar oddiy matn ko'rinishida — faqat YANGI so'z yengil belgilanadi */
.wd{cursor:pointer; padding:0; border-radius:4px; color:inherit; font:inherit}
.wd.new{background:linear-gradient(transparent 60%, var(--accent-wash) 60%)}
.wd.on{background:var(--primary); color:var(--on-primary)}
/* Suzuvchi izoh oynasi (so'z ustida) */
.st-tip{position:fixed; z-index:80; max-width:min(280px, 86vw); background:var(--ink);
  color:var(--ground); border-radius:12px; padding:9px 13px; box-shadow:var(--shadow-lift);
  font-size:14px; line-height:1.4; pointer-events:none}
.st-tip b{display:block; font-family:var(--display); font-size:16.5px; margin-bottom:1px}
.st-tip span{display:block; opacity:.8; font-size:12.5px}
.st-tip .st-arrow{position:absolute; width:10px; height:10px; background:var(--ink);
  transform:rotate(45deg); bottom:-5px; left:50%; margin-left:-5px}
.st-tip.below .st-arrow{bottom:auto; top:-5px}
.st-uz{margin-top:12px; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:12px; font-size:14.5px; color:var(--muted)}
.st-uz p{margin:0 0 10px}
.st-uz p:last-child{margin:0}
.st-q{margin-bottom:10px}
.st-q .st-opt{display:block; width:100%; text-align:left; margin-bottom:6px}
.st-opt.ok{border-color:var(--ok); background:var(--ok-wash); color:var(--ok)}
.st-opt.bad{border-color:var(--err); background:var(--err-wash); color:var(--err)}
.st-tabs{display:flex; gap:8px; overflow-x:auto; margin-bottom:10px}
.st-tabs button{flex:0 0 auto; font-size:12.5px}

/* ---------- Interaktiv dialog (P5.2) ---------- */
.dl{display:flex; flex-direction:column; gap:10px}
.dl-row{display:flex; flex-direction:column; align-items:flex-start; max-width:90%}
.dl-row.me{align-self:flex-end; align-items:flex-end}
.dl-sp{font-size:11.5px; color:var(--faint); margin-bottom:3px}
.dl-b{background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 14px 5px;
  padding:9px 13px; font-size:15.5px; line-height:1.5}
.dl-row.me .dl-b{background:var(--primary-wash); border-color:var(--primary);
  border-radius:14px 14px 5px 14px}
.dl-uz{font-size:12.5px; color:var(--muted); margin-top:3px}
.dl-line{min-height:46px; background:var(--surface-2); border:1px dashed var(--line);
  border-radius:var(--r-sm); padding:10px 12px; font-size:15.5px; line-height:1.7}
.dl-line i{color:var(--faint)}
.dl-tiles{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.dl-tile{font-size:14px; padding:7px 13px}
.dl-tile[disabled]{opacity:.32}
.dl-opt.ok{border-color:var(--ok); background:var(--ok-wash); color:var(--ok)}
.dl-opt.bad{border-color:var(--err); background:var(--err-wash); color:var(--err)}

/* ---------- O'qish: 3 darajali tarjima (P5.3) ---------- */
.st-modes{display:flex; gap:8px; margin:0 0 10px}
.st-modes button{flex:1; font-size:13px}
.st-s{border-radius:4px}
.st-par{font-size:12.5px; margin:0 0 12px; padding:5px 10px}
.st-paruz{background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:10px 12px; margin:0 0 14px; font-size:14px; color:var(--muted)}

/* ---------- bo'sh joyni to'ldirish (P5.5) ---------- */
.cz-blank{display:inline-block; min-width:72px; padding:0 8px; border-bottom:2px dashed var(--accent);
  color:transparent}
.cz-filled{color:var(--ok); border-bottom:2px solid var(--ok); padding:0 4px}
.cz-opt.bad{border-color:var(--err); color:var(--err)}

/* ---------- talaffuz / tinglash (P5.6) ---------- */
.spk{background:var(--surface-2); border:1px solid var(--line); border-radius:999px; cursor:pointer;
  font-size:14px; line-height:1; padding:6px 9px; margin-left:6px; vertical-align:middle;
  color:var(--primary); transition:.15s}
.spk:hover{background:var(--primary-wash); border-color:var(--primary)}
.spk.on{background:var(--ok-wash); border-color:var(--ok)}
.spk-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0}
.w .spk{margin-left:0; flex:0 0 auto}
.st-p.on-read{background:var(--accent-wash); border-radius:8px; transition:.2s}

/* ---------- tirik ovoz: eshitib tanlash / diktant (P5.8) ---------- */
#audSeg{margin-top:8px}
.spk.live{color:var(--ok); border-color:var(--ok)}
.ls-row{display:flex; align-items:center; justify-content:center; gap:12px; margin:12px 0 4px}
.ls-play{width:64px; height:64px; border-radius:999px; background:var(--primary); color:#fff; border:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:26px;
  box-shadow:var(--shadow); transition:transform .15s}
.ls-play:active{transform:scale(.95)}
.ls-play.on{outline:3px solid var(--primary-wash); outline-offset:3px}
.ls-slow{margin-left:0}
.ls-src{margin:12px 0 0; font-size:12px}
.ls-src a{color:inherit}

/* ---------- savol taymeri va tezlik bonusi (P5.9) ---------- */
.qtm{position:fixed; top:60px; right:12px; z-index:30; pointer-events:none;
  font:600 12.5px/1 var(--mono, ui-monospace, monospace); letter-spacing:.01em;
  padding:6px 10px; border-radius:999px; background:var(--surface); color:var(--muted);
  border:1px solid var(--line); box-shadow:var(--shadow); transition:background .2s, color .2s, border-color .2s}
.qtm.t3{color:var(--ok); border-color:var(--ok)}
.qtm.t2{color:var(--primary); border-color:var(--primary)}
.qtm.t1{color:var(--ink)}
.qtm.done.gain{background:var(--ok); color:var(--ground); border-color:var(--ok)}



/* lug'at: bo'lib yodlash tugmalari — ixcham bitta qator (sig'masa ikkinchisiga o'tadi) */
.vgroups{gap:6px; margin:10px 0 6px}
.vgroups .btn.vg{width:auto; flex:1 1 38px; min-width:38px; padding:8px 6px; font-size:14px; border-radius:9px}
.vgroups .btn.vg:first-child{flex:2 1 76px}
.vgroups .btn.vg.ghost.full{border-color:var(--ok); color:var(--ok)}

/* lug'at testi va rasmli test: javoblar bir qatorda ikkitadan (so'zlar qisqa) */
#vtOpts, #ptOpts{grid-template-columns:1fr 1fr}
#vtOpts .opt, #ptOpts .opt{text-align:center; padding:12px 8px; overflow-wrap:anywhere}
#ptOpts > .btn{grid-column:1 / -1}
#ptOpts > .verdict{grid-column:1 / -1}

/* noto'g'ri fe'llar jadvali */
.irr-tbl td{vertical-align:middle}
.irr-tbl .irr-spk .spk{margin-left:4px}
.irr-tbl td{vertical-align:top}
.irr-tbl .irr-uz{display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--muted, #777); line-height:1.3}

/* ---------- savollar ko'zga tashlanadi (2026-09-23): savol — yirik va to'q, variantlar — undan past ---------- */
.qtext{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.4; letter-spacing:-.01em;
  color:var(--ink); margin:4px 0 6px; text-wrap:pretty}
.qsub{font-size:14px; line-height:1.4; color:var(--muted); margin:0 0 12px}
.qhead{font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink); margin:22px 0 10px}
.qhead small{font-family:var(--body); font-size:12.5px; font-weight:500; color:var(--muted); margin-left:6px}
.qcard{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--primary);
  border-radius:var(--r); padding:14px 14px 8px; box-shadow:var(--shadow); margin-bottom:12px}
.qcard .qtext{margin:4px 0 12px}
.btn.ans{font-weight:500; font-size:15px; justify-content:flex-start; text-align:left; line-height:1.35;
  padding:12px 14px}
.covr > .q-lab + .qtext, .covr .qtext + .qsub{margin-top:2px}
.qtext .cz-blank{min-width:64px; color:transparent}
.covr .qtext{margin-bottom:12px}