/* Mavzular katalogi.
 *
 * Ranglar faqat tokens.css dan — bu yerda hex yo'q. Motion primitivlari
 * (.motion-control, .motion-surface) motion.css da.
 *
 * Ikki ustun: bo'limlar (chap) va tanlangan bo'limning mavzulari (o'ng).
 * 900px dan tor ekranda `data-topics-view` bittasini ko'rsatadi.
 */

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

.topics-hero { max-width: 720px; }
.topics-hero h1 {
  margin: 8px 0 12px;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.045em;
}
.topics-lede {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 68ch;
}
/* Tarjima yozuvi — mavzu sahifasidagi bilan bir xil ko'rinishda: chap qirra,
   ogohlantirish rangi yo'q. */
.topics-translation-note {
  margin: 16px 0 0; padding: 10px 0 10px 14px;
  border-left: 2px solid var(--border-strong);
  font-size: 14px; line-height: 1.5; color: var(--text-secondary);
  max-width: 68ch;
}

/* ─── Qidiruv ───────────────────────────────────────────────────────────── */
.topics-toolbar {
  margin: 30px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-structural);
  box-shadow: var(--shadow-card);
}
.topics-search { display: grid; gap: 8px; }
.topics-search-label { font-weight: 700; font-size: 14px; }
.topics-search input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-interactive);
  color: var(--text-primary);
}
.topics-search input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ─── Joylashuv ─────────────────────────────────────────────────────────── */
.topics-layout {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: start;
}

.topics-panel-heading {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.02em;
}
.topics-panel-heading:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: 6px; }

/* ─── Bo'limlar ─────────────────────────────────────────────────────────── */
.topics-sections-panel {
  position: sticky;
  top: calc(var(--header-height) + 12px);
  display: grid;
  gap: 12px;
}
.section-list {
  display: grid;
  gap: 8px;
  list-style: none;
  /* Bo'limlar 27 ta — ustun o'z ichida aylanadi, sahifa emas. */
  max-height: calc(100vh - var(--header-height) - 96px);
  overflow-y: auto;
  /* Aylanadigan quti chetidan tashqaridagini qirqadi: fokus halqasi kartadan
     5 px chiqadi va eng yuqori plitkada tepa-chapdan kesilardi (egasi,
     29.09.2026). Halqaga joy — ichki chekka, joylashuv manfiy chekka bilan
     o'z o'rnida qoladi (kartalar kengligi ilgarigidek, o'ngda 4 px). */
  padding: 6px 10px 6px 6px;
  margin: -6px;
}
.section-card {
  width: 100%;
  min-height: 64px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-interactive);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.section-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.section-card[aria-current="true"] {
  border-color: var(--accent);
  background: var(--surface-selected);
}
.section-card.is-planned { color: var(--text-secondary); }
@media (hover: hover) and (pointer: fine) {
  .section-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
  .section-card[aria-current="true"]:hover { background: var(--surface-selected); }
}
.section-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.section-index { color: var(--text-tertiary); font-size: 12px; font-weight: 750; letter-spacing: .1em; }
/* Bo'lim ikonkasi — raqam o'rnida (spec 2026-09-21-bolim-belgisi §2). Rang holatni
   aytadi: kulrang — oddiy, accent — tanlangan, tertiary — rejalashtirilgan. */
.section-mark { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; color: var(--text-secondary); }
.section-card[aria-current="true"] .section-mark { color: var(--accent); }
.section-card.is-planned .section-mark { color: var(--text-tertiary); }
.section-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--canvas-raised);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
}
.section-title { font-weight: 720; font-size: 15px; letter-spacing: -.01em; }
.section-subtitle { color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.section-meta { display: grid; gap: 6px; margin-top: 4px; }
.section-count { color: var(--text-tertiary); font-size: 12px; font-weight: 700; }
/* O'z sahifasi bor ma'lumotnoma: pastdagi yozuv hisob emas, amal —
   «Katalogni ochish». Faol holat har doim `--accent` (skill §3). */
.section-count.is-action { color: var(--accent); }
/* Tarjima ulushi — hisob emas, holat: matni ham, chizig'i ham asosiy
   sondan past turadi. */
.section-count.is-translation { color: var(--text-secondary); font-weight: 600; }
.section-progress {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--border-subtle);
  overflow: hidden;
}
.section-progress-bar { display: block; height: 100%; background: var(--accent); }
/* Ikki qatlam bitta chiziqda: pastki — yozilgan mavzular, ustki — tanlangan
   tilda o'qiladiganlari. Bittasini ikkinchisi bilan almashtirib bo'lmaydi —
   ular boshqa-boshqa savolga javob beradi. */
.section-progress.has-translation .section-progress-bar { background: var(--border-strong); }
.section-progress-translated {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--accent);
}

/* ─── Mavzular ──────────────────────────────────────────────────────────── */
.topics-list-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-structural);
  box-shadow: var(--shadow-card);
}
.topics-back { display: none; justify-self: start; }
.topics-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.topics-panel-meta { color: var(--text-tertiary); font-size: 13px; }
.topics-hint, .topics-status { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.topics-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.topics-status[role="alert"] { color: var(--danger); }

.topic-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.topic-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-interactive);
  color: var(--text-primary);
  text-decoration: none;
}
a.topic-row:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  a.topic-row:hover { border-color: var(--border-strong); background: var(--surface-hover); }
}
.topic-row.is-planned { color: var(--text-secondary); background: var(--canvas-raised); }
.topic-id { color: var(--text-tertiary); font-size: 12px; font-weight: 750; letter-spacing: .06em; }
.topic-body { display: grid; gap: 3px; min-width: 0; }
.topic-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.topic-section { color: var(--accent-strong); font-size: 12px; font-weight: 700; }
.topic-covers {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--canvas-raised);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.topic-status.is-ready { background: var(--surface-selected); color: var(--accent-strong); }
.topic-icon { display: inline-grid; place-items: center; }

/* «Rejada» (2026-09-24) — admin yashirgan, hali yozilmagan bo'limlar.
   Plitka bo'limlar bilan bir shaklda; farqi uzuq chegara va amber yorliqda.
   Amber faqat yorliqda: butun plitka bo'yalsa u haqiqiy kontentdan ko'ra
   ko'proq ko'z tortardi. Tanlanganda odatdagi `--accent` — faol holat
   hamma joyda bitta rang. */
.section-card-plan { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.section-card-plan .section-mark { color: var(--warning); }
.plan-badge {
  padding: 2px 8px;
  border: 1px solid var(--warning);
  border-radius: 999px;
  color: var(--warning);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Reja qatori bosilmaydi: kursor, hover va bosish javobi yo'q. */
.plan-row { cursor: default; }
.plan-row .topic-icon { color: var(--text-tertiary); }
.plan-status.is-writing { color: var(--warning); background: transparent; border: 1px solid var(--warning); }
/* Tarjima kesimi — reja panelining pastida. Chiziq bo'lim plitkasidagi
   `.section-progress` ning o'zi: bir sahifada ikki xil progress bo'lmasin. */
.plan-translations { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.plan-translations[hidden] { display: none; }
.plan-translations-title { margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 750; }
.plan-translations-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-lang {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
}
.plan-lang-name { color: var(--text-primary); font-weight: 700; font-size: 14px; }
.plan-lang-pct { min-width: 6.5em; text-align: right; color: var(--text-secondary); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.plan-lang-meta { grid-column: 2 / -1; color: var(--text-tertiary); font-size: 12px; }
/* Ochiq mavzu (spec 2026-09-15 §6). Belgi matn bilan — rang yagona ishora emas. */
.topic-free {
  justify-self: start;
  width: fit-content;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.5;
}

/* «UZ» — qator qaysi tilda ochilishini aytadi. `topic-free` bilan bir shakl,
   lekin boshqa rang: bepul — taklif (`--accent`), til esa ogohlantirish emas,
   oddiy ma'lumot. Rang yagona ishora emas — harflar matn bo'lib turadi. */
.topic-uz {
  justify-self: start;
  width: fit-content;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* «Yangi» / «Tahrirlandi» (spec 2026-10-01-mavzu-katalog-reja-yorliq §0.4) —
   nom ustidagi kichik yorliq, kartaga yopishtirilgandek. «Yangi» to'la
   `--accent`: katalogdagi yagona to'la belgi, ko'z darhol topadi.
   «Tahrirlandi» chegarali `--success`: muhim, lekin yangi emas. Holat
   matn bilan aytiladi — rang yagona ishora emas. */
.topic-badge, .topic-held {
  justify-self: start;
  width: fit-content;
  margin-bottom: 2px;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
}
.topic-badge.is-new { background: var(--accent); color: var(--text-on-accent); }
.topic-badge.is-edited { border-color: var(--success); color: var(--success); }
/* Rejadagi mavzu katalogda faqat admin'ga ko'rinadi — reja rangi bilan. */
.topic-held { border-color: var(--warning); color: var(--warning); }
/* Bo'lim kartasidagi «3 yangi» — qaysi bo'limda yangi mavzu borligi. */
.section-new {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

/* Bo'lim ichidagi «Rejada» plitkasi — ro'yxat oxirida, bo'limlar ustunidagi
   reja plitkasi bilan bir shaklda: uzuq chegara, amber yorliq. Bosilmaydi. */
.topic-plan {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}
.topic-plan-head { display: flex; align-items: center; gap: 8px; }
.topic-plan-head .topic-icon { color: var(--warning); }
.topic-plan-count { margin-left: auto; color: var(--text-tertiary); font-size: 12px; font-weight: 700; }
.topic-plan-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.topic-plan-item {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}
.topic-plan-note { margin: 0; color: var(--text-tertiary); font-size: 12.5px; line-height: 1.5; }

/* ─── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .topics-page { width: min(100% - 28px, 720px); padding: 28px 0 96px; }
  .topics-layout { display: block; }
  .topics-sections-panel { position: static; }
  .section-list { max-height: none; overflow: visible; padding: 0; margin: 0; }
  .topics-back { display: inline-flex; }
  [data-topics-view="sections"] .topics-list-panel { display: none; }
  [data-topics-view="topics"] .topics-sections-panel { display: none; }
  .topic-row { grid-template-columns: auto minmax(0, 1fr); }
  .topic-status { grid-column: 2; justify-self: start; }
}

/* «Test savollari» plitkasi: raqam o'rnida ikonka (spec 2026-09-20 §7.1). */
.section-index-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }

/* Statik ro'yxat JSsiz ko'rinishda (build-yangi-seo, spec 2026-09-21 §3.2–3.3):
   bo'lim guruhlari ketma-ket, «bo'limni tanlang» maslahati ma'nosiz, mobil
   view almashinuvi yo'q — ikkala panel turadi. */
.topic-group { display: grid; gap: 8px; }
.topic-group > .topics-panel-heading { margin: 16px 0 4px; }
html:not([data-js]) [data-topics-hint] { display: none; }
html:not([data-js]) .topics-layout { display: block; }
html:not([data-js]) .topics-list-panel, html:not([data-js]) .topics-sections-panel { display: block; }

/* Bo'limlar ustuni birinchi chizishda skelet ko'rinishida (2026-09-28).
   Ilgari statik ro'yxat shaffof edi (tokens.css) va modul kelguncha ustun
   bo'm-bo'sh turardi, keyin JS skeleti, keyin kartalar — ikki marta sakrash.
   Endi o'sha kartalar o'zi skelet: joyi va balandligi haqiqiy kartaniki,
   `mavzular.js` ularni almashtirmaydi (`data-skelet`), faqat ma'lumot
   kelganda bir marta haqiqiy kartalar tushadi. Modul umuman kelmasa 2,5 s
   dan keyin ro'yxat o'zi ochiladi — tokens.css dagi zaxira bilan bir xil. */
html[data-js] .section-list:is([data-prerendered], [data-skelet]) > li {
  opacity: 1; transform: none;
  border-radius: var(--radius-control); background: var(--border-subtle);
  pointer-events: none;
}
html[data-js] .section-list:is([data-prerendered], [data-skelet]) > li > * { visibility: hidden; }
html[data-js] .section-list[data-prerendered] > li { animation: skelet-zaxira 0s linear 2.5s forwards; }
html[data-js] .section-list[data-prerendered] > li > * { animation: skelet-zaxira-ichi 0s linear 2.5s forwards; }
@keyframes skelet-zaxira { to { background: transparent; pointer-events: auto; } }
@keyframes skelet-zaxira-ichi { to { visibility: visible; } }