/* Malaka landing — spec §12 dagi 01–04 oqim.
 *
 * Kartalar tartiblangan ro'yxat (`<ol>`): oqim ketma-ket, tasodifiy to'plam
 * emas. Raqam CSS bilan emas, HTML da turadi — u mazmunning bir qismi.
 * Ranglar faqat tokens.css dan.
 */

.malaka-page {
  width: min(100% - 40px, var(--content-width));
  margin: auto;
  padding: 52px 0 100px;
}

.malaka-hero { max-width: 720px; }
.malaka-hero h1 {
  margin: 8px 0 12px;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.045em;
}
.malaka-lede {
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 68ch;
}

.malaka-error {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--canvas-raised);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* Kirish taklifi — guest uchun. Reklama emas, bitta aniq sabab va bitta amal. */
.malaka-signin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 28px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-structural);
  box-shadow: var(--shadow-card);
}
.malaka-signin div { display: grid; gap: 4px; }
.malaka-signin strong { font-size: 15px; }
.malaka-signin span { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.malaka-signin .button { min-height: 44px; }

/* ─── Oqim kartalari ──────────────────────────────────────────────────────
   Uch ustun: uch yo'l (o'qish → sinov testi → toifa javoblari) bir qatorda,
   progress — ostida butun kenglikdagi panel (2026-09-29, egasi, 4B/5B).
   Ilgari ikki ustun edi: progress ham Kabinet'ga havola bo'lgan to'rtinchi
   karta edi. */
.malaka-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.malaka-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-interactive);
  box-shadow: var(--shadow-card);
}
.malaka-card-index {
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.malaka-card h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.malaka-card > p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

/* Holat qatori — kartaning yagona o'zgaruvchan qismi. Bo'sh qolmaydi:
   ma'lumot kelmasa ham sabab yoziladi. */
.malaka-card-status {
  min-height: 20px;
  margin: 4px 0 0 !important;
  color: var(--text-primary) !important;
  font-size: 13.5px;
  font-weight: 600;
}
.malaka-card[data-malaka-locked="true"] .malaka-card-status { color: var(--text-secondary) !important; }

/* Spec §12: progress action touch target kamida 44×44px. */
.malaka-card .button {
  justify-self: start;
  min-height: 44px;
  margin-top: 8px;
}
.malaka-card .button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Butun karta bosiladi (2026-09-28). Havola bitta — «Ochish»: uning
   ko'rinmas qatlami kartani qoplaydi. Klaviaturada bitta to'xtash, ekran
   o'quvchi nomni bir marta o'qiydi, uzoq bosish ham havola kabi ishlaydi.
   Bosilganda kartaning o'zi siqiladi (`motion-surface`), tugma esa
   siqilmaydi: tugmadagi `transform` qatlamning konteynerini tugmaga
   o'tkazib yuborardi — qatlam bosish paytida qisqarib, bosish havolaga
   yetmay qolardi. */
.malaka-card [data-card-action]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.malaka-card [data-card-action]:active { transform: none; }
.malaka-card { cursor: pointer; }
/* Ochiq test bor — holat qatori ogohlantirish rangida (1B). */
.malaka-card[data-malaka-ogoh="true"] .malaka-card-status { color: var(--warning) !important; }

/* ─── Malaka progressi (4B) ─────────────────────────────────────────────
   Bosilmaydigan panel: uch guruh yonma-yon, telefonda ustma-ust. */
.malaka-progress { grid-column: 1 / -1; cursor: default; }
.malaka-progress .malaka-card-status:empty { display: none; }
.malaka-progress-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin-top: 10px; }
.malaka-progress-group h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.malaka-progress-rows { display: grid; gap: 8px; margin: 0; }
.malaka-progress-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.malaka-progress-rows dt { color: var(--text-secondary); font-size: 14px; }
.malaka-progress-rows dd { margin: 0; color: var(--text-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.malaka-progress-bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.malaka-progress-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

@media (max-width: 860px) {
  .malaka-page { width: min(100% - 24px, var(--content-width)); padding: 32px 0 88px; }
  .malaka-flow { grid-template-columns: 1fr; }
  .malaka-progress-grid { grid-template-columns: 1fr; }
  .malaka-signin { flex-direction: column; align-items: stretch; }
  .malaka-signin .button { justify-content: center; }
}

/* ── Ichki ko'rinishlar: test savollari va toifa savol-javoblari ──────────
   Ilgari ikkalasi ham eski saytga havola edi. Endi shu sahifada, shell
   ostida ochiladi. */

/* Ustun `minmax(0, 1fr)`: grid ustuni eng uzun so‘z yoki blokning minimal
   kengligiga cho‘zilmaydi — mobilda toifa javobi ekrandan chiqib, «Aa»
   tugmasi ko‘rinmay qolardi. */
.malaka-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 8px 0 40px; }
.malaka-view-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.malaka-view-bar .button { min-height: 44px; }
.malaka-search-field { flex: 1 1 240px; display: grid; gap: 6px; }
.malaka-search-field label { color: var(--text-tertiary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.malaka-search-field input { min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-primary); background: var(--surface-interactive); font: inherit; }
.malaka-count { margin: 0; color: var(--text-tertiary); font-size: 13px; font-weight: 700; }
/* Til yozuvi — mavzu o'quvchisidagi `lesson-translation-note` bilan bir xil:
   ogohlantirish emas, izoh. Tanlangan tilda nusxa yo'q bo'lsa matn qaysi
   tilda ekanini o'qishdan OLDIN aytadi. */
.malaka-language-note {
  margin: 0 0 16px; padding: 10px 0 10px 14px;
  border-left: 2px solid var(--border-strong);
  font-size: 14px; line-height: 1.5; color: var(--text-secondary);
}
.malaka-language-note[hidden] { display: none; }
.malaka-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
/* Gorizontal qatorda chipning o'z konteyneri yo'q — kutubxonada u
   `.library-rail` ichida turadi va ramkasiz ham ro'yxat bo'lib o'qiladi.
   Bu yerda esa ochiq joyda turibdi, shuning uchun tinch holatida ham
   chekkasi ko'rinadi va matn qatorga sinmaydi. */
.malaka-tiers .category-chip { border-color: var(--border-subtle); white-space: nowrap; }
/* Savollarni saralash qatori — toifa filtrlari bilan bir ko'rinishda. */
.malaka-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.malaka-filters .category-chip { border-color: var(--border-subtle); white-space: nowrap; }
/* «Yana yuklash» ro'yxatning oxirida, o'rtada — u davomi, yangi bo'lim emas. */
.malaka-more { display: flex; justify-content: center; margin-top: 20px; }
.malaka-empty { color: var(--text-secondary); font-size: 15px; }

/* Bepul chegara ochiq aytiladi — «hammasi shu» degan taassurot bermaydi. */
/* Bepul chegaraning oxiridagi band.
   Ro'yxat endi chiziqli (kartochkasiz), shuning uchun bu yagona o'ralgan
   blok ataylab ajralib turadi: u ro'yxatning davomi emas, uning chegarasi.
   Qulf ikonkasi chapda — sabab matndan oldin ko'rinadi. */
.malaka-gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin-top: 28px; padding: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--canvas-raised); }
.malaka-gate-icon { grid-row: 1 / span 2; color: var(--text-tertiary); }
.malaka-gate-icon svg { display: block; }
.malaka-gate-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.malaka-gate p { margin: 6px 0 0; color: var(--text-secondary); line-height: 1.6; max-width: 62ch; }
.malaka-gate-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ── Test savollari ro'yxati (o'qish) ────────────────────────────────────
   ⚠ `.quiz-question` va `.quiz-option` nomlarini sinov testi oqimi ham
   ishlatadi (shu faylning pastida). Ikkalasi bir xil xoslikda edi, shuning
   uchun keyingi ta'rif oldingisini bosib ketardi va RO'YXATDAGI variantlar
   56px balandlikdagi bosiladigan plitkaga o'xshab qolgandi. Endi ro'yxat
   qoidalari `.quiz-list` ostida — ikki ko'rinish bir-biriga tegmaydi.

   Savol kartochkaga o'ralmaydi: ro'yxatda 50 ta ramka «Sukunat» emas, devor
   bo'lib ko'rinardi. Savollar bir-biridan to'liq kenglikdagi chiziq bilan
   ajraladi; javob variantlari esa o'ralgan holicha qoladi — ular tanlanadigan
   bo'laklar. */
.quiz-list { display: grid; }
.quiz-list .quiz-item { padding: 26px 0; }
.quiz-list .quiz-item + .quiz-item { border-top: 1px solid var(--border-subtle); }
.quiz-item-head { display: flex; align-items: baseline; gap: 12px; }
/* Qidiruvdan kelgan savol: ro'yxatda darrov ko'zga tashlanadi. Ramka o'rniga
   chap qirra — chiziqli ro'yxatga kartochka qaytarmaydi. */
.quiz-list .quiz-item[data-malaka-highlight="true"] { padding-left: 16px; border-left: 2px solid var(--accent); }
.quiz-position { color: var(--text-tertiary); font-size: 13px; font-weight: 750; }
.quiz-list .quiz-question { margin: 0; max-width: 68ch; font-size: calc(16px * var(--lesson-scale, 1)); line-height: var(--lesson-leading, 1.55); letter-spacing: -.01em; font-weight: 500; }
.quiz-list .quiz-options { margin: 14px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.quiz-list .quiz-option { display: flex; align-items: baseline; gap: 12px; min-height: 0; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); color: var(--text-secondary); background: var(--canvas-raised); font-size: calc(15px * var(--lesson-scale, 1)); line-height: var(--lesson-leading, 1.5); cursor: default; }
.quiz-list .quiz-option-text { flex: 1; }
/* To'g'ri javob manbadagi `correct_index` bilan belgilanadi — rangdan
   tashqari matn bilan ham aytiladi (spec §16). */
.quiz-list .quiz-option[data-correct="true"] { color: var(--text-primary); border-color: var(--success); background: var(--success-soft); }

/* Savol ostidagi amallar. Toifa o'quvchisidagi `.toifa-action` bilan bir
   ko'rinishda, lekin kichikroq: ro'yxatda ular har savol ostida takrorlanadi
   va 44px li uchta tugma qatorni og'irlashtirardi. Bosish maydoni baribir
   40px — barmoq uchun yetarli, chunki ular alohida qatorda turadi. */
.quiz-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.quiz-action {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.quiz-action svg { display: block; }
.quiz-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.quiz-action[disabled] { cursor: default; }
/* Yoqilgan holat rangdan tashqari yorliq MATNI bilan ham aytiladi: tugma
   matni «O'qidim» dan «O'qildi» ga o'zgaradi (spec §16). */
.quiz-action.is-read[data-on="1"] { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.quiz-action.is-bookmark[data-on="1"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.quiz-action.is-mastered[data-on="1"] { border-color: var(--success); color: var(--success); background: var(--success-soft); }
@media (hover: hover) and (pointer: fine) {
  .quiz-action:not([disabled]):hover { border-color: var(--text-primary); color: var(--text-primary); }
}
/* Yorliq javobdan keyin, o'ng chetda. Sinov testidagi `.quiz-option-mark`
   bilan bir ko'rinishda: ikonka va so'z, katta harf emas — «TO'G'RI JAVOB»
   ro'yxatda javobning o'zidan balandroq baqirardi. */
.quiz-correct-mark { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: 13px; font-weight: 650; }
.quiz-correct-mark svg { display: block; }
.quiz-explanation { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.65; }

/* ─── Toifa: mundarija ───────────────────────────────────────────────────
   Har qatori javob o'quvchisiga havola. Javob shu yerda ochilmaydi —
   bittasi ~11 KB va ostidagi 137 ta savolni ekrandan surib yuborardi. */
.oral-view { display: grid; gap: 24px; }
.oral-group { display: grid; gap: 8px; }
.oral-tier { margin: 0 0 4px; font-size: 15px; letter-spacing: -.01em; }
.oral-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oral-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-interactive); }
.oral-question {
  min-height: 44px;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
}
/* O'quvchidan qaytilgan savol — chap qirra accent, ramka o'zgarmaydi. */
.oral-item[data-malaka-highlight="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.oral-question:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-card); }
@media (hover: hover) and (pointer: fine) {
  .oral-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }
}
.oral-position { flex: 0 0 auto; color: var(--text-tertiary); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.oral-question-text { flex: 1 1 auto; }

/* Holat belgilari — rang yagona signal emas, matni ham bor (spec §16). */
.oral-flags { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.oral-flag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--canvas-raised);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  white-space: nowrap;
}
.oral-flag.is-review { color: var(--accent-strong); background: var(--surface-selected); }
.oral-flag.is-mastered { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }

/* ─── Toifa: javob o'quvchisi ────────────────────────────────────────────
   Matn oqimi `css/blocks.css` dan keladi — mavzu o'quvchisi bilan bir xil
   tipografiya. Bu yerda faqat shu sahifaning karkasi. */
.toifa-layout { display: block; }

.toifa-origin {
  display: inline-block;
  max-width: 68ch;
  margin: 28px 0 0;
  color: var(--accent-strong);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.toifa-origin:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

.toifa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 68ch;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.toifa-actions-note { flex: 1 1 100%; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

.toifa-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-interactive);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.toifa-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.toifa-action[disabled] { cursor: default; }
.toifa-action.is-read.on { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.toifa-action.is-review.on { border-color: var(--accent); color: var(--accent-strong); background: var(--surface-selected); }
@media (hover: hover) and (pointer: fine) {
  .toifa-action:not([disabled]):hover { border-color: var(--accent); background: var(--surface-hover); }
}

.toifa-flag {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  font-size: 12px;
  font-weight: 750;
}

.toifa-note { max-width: 68ch; margin: 10px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.toifa-note.is-error { color: var(--danger); }

.toifa-practice-verdict { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.toifa-practice-verdict.is-error { color: var(--danger); }

@media (max-width: 900px) {
  .malaka-view-bar { flex-direction: column; align-items: stretch; }
  /* Kartochka yo'q — gorizontal ich bo'shliq ham kerak emas; faqat
     savollar orasidagi masofa qisqaradi. */
  .quiz-list .quiz-item { padding: 20px 0; }
  .quiz-list .quiz-item[data-malaka-highlight="true"] { padding-left: 12px; }
  /* Uzun javobda yorliq matnni siqib qo'ymasin — o'z satriga tushadi. */
  .quiz-list .quiz-option { flex-wrap: wrap; }
  .quiz-correct-mark { align-self: flex-start; }
  .malaka-gate { padding: 18px; }
  .malaka-gate-actions .button { flex: 1 1 160px; }
}


/* ─── Sinov testi ─────────────────────────────────────────────────────────
   Savol o'qish materiali kabi ko'rsatiladi: matn 640px ustunda, variantlar
   ro'yxat. Karta yo'q, chegara faqat bosiladigan elementda. */

.quiz { width: min(var(--reading-width), calc(100% - 48px)); margin-inline: auto; padding-bottom: 96px; }
.quiz-title { margin: 18px 0 0; font-size: 40px; line-height: 1.1; font-weight: 300; letter-spacing: -.03em; }
.quiz-lede { margin: 16px 0 0; color: var(--text-secondary); line-height: 1.6; }

/* Rejim tanlash: qoldiq oldindan ko'rinadi — foydalanuvchi nima
   sarflanishini bilib bosadi. */
.quiz-modes { display: grid; gap: 12px; margin-top: 32px; }
.quiz-mode { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 20px 22px; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.quiz-mode strong { font-size: 17px; font-weight: 500; }
.quiz-mode span { font-size: 14px; color: var(--text-secondary); }
.quiz-mode-left { font-size: 12px; color: var(--text-tertiary); }
.quiz-mode:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .quiz-mode:not(:disabled):hover { border-color: var(--text-primary); } }
/* Natija soni va yozuvi (ilgari Kabinet'ning `account-hero` sinfi — bu
   sahifada uslubsiz, «1 / 50to‘g‘ri javob» bo'lib yopishardi). */
.quiz-score-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 0; }
.quiz-score-line b { font-size: 44px; font-weight: 300; letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.quiz-score-line span { font-size: 15px; color: var(--text-secondary); }
/* Natija jadvali ixcham: yorliq chapda, son o'ngda — telefonda ham (umumiy
   `.dl-rows` u yerda ustma-ust qo'yadi va yetti qator ekrandan oshardi). */
.quiz-result .dl-rows > div { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; }
.quiz-result .dl-rows dd { text-align: right; font-weight: 600; }
/* Xatolar ro'yxati (6B). Sizning javobingiz — xato rangida, to'g'risi —
   muvaffaqiyat rangida; yorliq so'z bilan ham aytadi. */
.quiz-review { margin-top: 24px; }
.quiz-review-body { margin-top: 16px; }
.quiz-review-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.quiz-review-item { padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.quiz-review-question { display: flex; gap: 10px; margin: 0 0 8px; color: var(--text-primary); font-size: 15px; line-height: 1.55; }
.quiz-review-number { flex: none; color: var(--text-tertiary); }
.quiz-review-answer { display: grid; gap: 2px; margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.quiz-review-label { color: var(--text-tertiary); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.quiz-review-answer.is-wrong > span:last-child { color: var(--danger); }
.quiz-review-answer.is-correct > span:last-child { color: var(--success); font-weight: 600; }
.quiz-review-note { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; }
.quiz-review-body > .button { margin-top: 14px; }
.quiz-review-status { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.quiz-review-status[data-state="error"] { color: var(--warning); }
/* Test savollari sahifasining izohi (3B). */
.malaka-intro { display: grid; gap: 10px; margin: 18px 0 4px; padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--accent-soft); }
.malaka-intro p { margin: 0; color: var(--text-primary); font-size: 15px; line-height: 1.6; }
.malaka-intro-steps { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.malaka-intro .button { justify-self: start; min-height: 44px; }

/* Malaka sinov testi mavzular testlaridan alohida (egasi, 29.09.2026, C varianti):
   belgi, izoh qutisi va bepul tugmadagi «faqat Malaka». */
.quiz-eyebrow { margin-bottom: 8px; }
.quiz-scope { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--accent-soft); }
.quiz-scope-icon { flex: none; display: inline-grid; margin-top: 2px; color: var(--accent); }
.quiz-scope p { margin: 0; color: var(--text-primary); font-size: 14px; line-height: 1.6; }
/* Mavzular testlariga yo'l — aniq ko'k tugma (egasi: «kichik havola emas»). */
.quiz-scope-cta { margin-top: 12px; min-height: 44px; border-color: transparent; color: var(--canvas); background: var(--accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .quiz-scope-cta:hover { filter: brightness(1.08); } }
.quiz-mode .quiz-mode-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-primary); font-size: inherit; }
.quiz-mode-tag { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Tanlangan rejim tasdiq kutyapti — qaysi tugma bosilgani ko'rinib tursin. */
.quiz-mode[aria-pressed="true"] { border-color: var(--warning); }
/* Boshlashdan oldingi ogohlantirish (egasi, 29.09.2026): sariq — urinish
   qaytmasligi aniq ko'rinsin. Fon ogohlantirish rangining xira qatlami. */
.quiz-confirm { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--warning); border-radius: var(--radius-card); background: color-mix(in srgb, var(--warning) 10%, var(--canvas)); }
.quiz-confirm-title { display: block; color: var(--warning); font-size: 16px; font-weight: 600; }
.quiz-confirm p { margin: 8px 0 0; color: var(--text-primary); font-size: 14px; line-height: 1.6; }
.quiz-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Izoh — nega rejim yopiq yoki boshlanmadi. Kulrang edi va ko'zdan qochardi
   (egasi, 29.09.2026): endi ogohlantirish rangida, o'lchami o'sha. */
.quiz-setup [data-quiz-signin] { margin-top: 16px; }
.quiz-note { margin: 20px 0 0; padding-left: 16px; border-left: 2px solid var(--warning); color: var(--warning); font-size: 14px; font-weight: 500; line-height: 1.6; }
/* Mashq rejimi ikkalasidan sokinroq: u paketdan hech narsa yemaydi va
   shuning uchun bir xil og'irlikda turishi noto'g'ri bo'lardi. */
.quiz-mode.is-practice { border-style: dashed; }
.quiz-mode.is-practice strong { font-weight: 550; }

/* Test oqimi */
.quiz-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.quiz-bar .mono { font-size: 13px; color: var(--text-tertiary); }
.quiz-clock { font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.quiz-clock[data-state="urgent"] { color: var(--danger); }
.quiz-actions { display: flex; gap: 8px; }
/* O'lcham va qator oralig'i «Ko'rinish» sozlamasidan (`js/reading-view.js`). */
.quiz-question { margin: 32px 0 24px; font-size: calc(22px * var(--lesson-scale, 1)); line-height: var(--lesson-leading, 1.5); font-weight: 400; color: var(--text-primary); }
.quiz-options { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quiz-option { display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 56px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: transparent; color: var(--text-primary); text-align: left; font-size: 16px; line-height: 1.5; cursor: pointer; }
.quiz-option-letter { font-size: 13px; color: var(--text-tertiary); }
.quiz-option-text { flex: 1; font-size: calc(16px * var(--lesson-scale, 1)); line-height: var(--lesson-leading, 1.5); }
.quiz-option:disabled { cursor: default; }
/* Javob holati.
   Ilgari holat FAQAT chegara rangi bilan berilardi va natija pastdagi bitta
   qatorda (`.quiz-verdict`) turardi — ataylab qaramasa ko'rinmasdi. Endi
   signal ko'z allaqachon qaragan joyda: variantning o'zi bo'yaladi va
   yonida belgi bilan so'z turadi.

   Rang yagona belgi emas (spec §16): har bo'yalgan variantda `.quiz-option-mark`
   ichida ikonka va matn bor, shuning uchun rangni ajratmaydigan o'quvchi ham
   holatni o'qiydi.

   To'ldirish yengil: matn `--text-primary` da qoladi (16:1 dan yuqori), rang
   esa faqat yuzani belgilaydi. Bu «shisha plitka» emas — dizayn tili taqiqlagan
   narsa bezak foni edi, holat yuzasi emas. */
.quiz-option[data-state] { transition: background-color var(--press-surface) var(--ease-standard), border-color var(--press-surface) var(--ease-standard); }
.quiz-option[data-state="chosen"] { border-color: var(--accent); background: var(--accent-soft); }
.quiz-option[data-state="correct"] {
  border-color: var(--success);
  background: linear-gradient(180deg, var(--success-soft), color-mix(in srgb, var(--success-soft) 45%, var(--canvas)));
}
.quiz-option[data-state="wrong"] {
  border-color: var(--danger);
  background: linear-gradient(180deg, var(--danger-soft), color-mix(in srgb, var(--danger-soft) 45%, var(--canvas)));
}
/* Belgi variantning o'ng chetida — matndan keyin, uni surib yubormaydi. */
.quiz-option-mark { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; align-self: center; font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.quiz-option-mark svg { display: block; }
.quiz-option[data-state="correct"] .quiz-option-mark { color: var(--success); }
.quiz-option[data-state="wrong"] .quiz-option-mark { color: var(--danger); }
@media (hover: hover) and (pointer: fine) { .quiz-option:not(:disabled):hover { border-color: var(--text-primary); } }
/* Pastdagi qator endi ikkinchi darajali: u ekran o'quvchisi uchun `aria-live`
   e'loni bo'lib qoladi, ko'z esa variantning o'zidan o'qiydi. */
.quiz-verdict { margin: 18px 0 0; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.quiz-verdict[data-state="correct"] { color: var(--success); }
.quiz-verdict[data-state="wrong"] { color: var(--danger); }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.quiz-result .dl-rows { margin-top: 28px; }

@media (max-width: 900px) {
  .quiz { width: calc(100% - 48px); padding-bottom: 72px; }
  .quiz-title { font-size: 30px; }
  .quiz-question { font-size: calc(19px * var(--lesson-scale, 1)); margin: 24px 0 18px; }
  .quiz-bar { flex-wrap: wrap; gap: 8px; }
  .quiz-actions { width: 100%; justify-content: space-between; }
}

/* Sinov testi natijasi: foiz chizig'i (motion-enter.js to'ldiradi). */
.quiz-result-line { height: 6px; margin: 14px 0 4px; border-radius: 999px; overflow: hidden; }
.quiz-result-line > i { height: 100%; border-radius: 999px; }