/* =====================================================================
   10. sections.css — arxitektura sxemasi, spec jadval, timeline, callout,
   CTA (qorongʻi plitka), accordion, dars/oʻyin/diagnostika bloklari
   ===================================================================== */

/* =====================================================================
   Arxitektura qatlamlari (loyiha.php)
   ===================================================================== */

.arch {
  display: grid;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}
.arch-layer {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--parchment);
  padding: var(--sp-4);
}
.arch-layer[class*="accent-"] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--canvas));
}
.arch-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.arch-tag b { color: var(--ink); }
.arch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.arch-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  gap: var(--sp-2);
}
.arch-node {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
}
.arch-node small {
  display: block;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: 3px;
  line-height: 1.4;
}
.arch-link { display: grid; justify-items: center; padding-block: var(--sp-2); }
.arch-link .bar { width: 2px; height: 14px; background: var(--hairline-strong); }
.arch-link .pill {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  padding: 4px 12px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-full);
  background: var(--canvas);
  color: var(--text-muted);
}
.arch-split { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .arch-split { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   Ma'lumot jadvali (spec)
   ===================================================================== */

.spec {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--canvas);
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  border-bottom: 1px solid var(--hairline);
}
.spec-row:last-child { border-bottom: 0; }
.spec-k {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--parchment);
  border-right: 1px solid var(--hairline);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.spec-k .ico { color: var(--primary); margin-top: 2px; }
.spec-v {
  padding: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.spec-v strong { color: var(--ink); }
@media (max-width: 720px) {
  .spec-row { grid-template-columns: 1fr; }
  .spec-k { border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* =====================================================================
   Timeline — dars kunlari
   ===================================================================== */

.timeline { display: grid; position: relative; }
.tl-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  position: relative;
  padding-bottom: var(--sp-5);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
}
.tl-item:last-child::before { display: none; }

.tl-day {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  z-index: 1;
}
.tl-day small { display: block; font-size: 10px; font-weight: 600; opacity: .8; margin-bottom: 2px; }
.tl-day span  { font-size: 20px; }

.tl-body {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  min-width: 0;
}
.tl-body h4 { font-size: var(--fs-md); }
.tl-body h4 a:hover { color: var(--primary); }
.tl-body p { color: var(--text-muted); font-size: var(--fs-base); margin-top: var(--sp-2); line-height: 1.5; }
.tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.tl-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* =====================================================================
   Callout — parchment, hairline; faqat ikonka rangi farqlanadi
   ===================================================================== */

.callout {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--parchment);
  border: 1px solid var(--hairline);
}
.callout-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--warning-soft);
  color: var(--warning);
  flex-shrink: 0;
}
.callout h4 { font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.callout p  { color: var(--text-muted); font-size: var(--fs-base); line-height: var(--lh-base); }

.callout-info  .callout-ico { background: var(--sky-100);   color: var(--sky-700); }
.callout-brand .callout-ico { background: var(--primary-soft); color: var(--primary-ink); }

/* =====================================================================
   CTA — product-tile-dark
   ===================================================================== */

.cta {
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  background: var(--tile-1);
  color: var(--body-on-dark);
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
}
.cta h2 { color: var(--body-on-dark); max-width: 20ch; }
.cta p  { color: var(--body-muted-dark); font-size: var(--fs-lg); font-weight: 400; max-width: 50ch; line-height: 1.4; }
.cta .badge { background: rgba(255,255,255,.12); color: var(--body-on-dark); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* =====================================================================
   Accordion — <details>
   ===================================================================== */

.accordion { display: grid; gap: var(--sp-2); }
.accordion details {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.accordion details[open] { border-color: var(--hairline-strong); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.4;
  min-height: 44px;
}
.accordion summary:hover { background: var(--parchment); }
.accordion summary::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: -4px;
  transition: transform var(--t-base);
}
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.accordion-body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.accordion-body > * + * { margin-top: var(--sp-3); }

/* =====================================================================
   Bog'liqlik xaritasi
   ===================================================================== */

.maprow {
  display: grid;
  grid-template-columns: 1fr 46px 1fr;
  align-items: center;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.maprow + .maprow { margin-top: var(--sp-2); }
.maprow-a { padding: var(--sp-4); font-weight: 600; font-size: var(--fs-base); }
.maprow-arrow { display: grid; place-items: center; align-self: stretch; background: var(--parchment); color: var(--text-subtle); }
.maprow-b { padding: var(--sp-4); border-left: 1px solid var(--hairline); color: var(--text-muted); font-size: var(--fs-base); }
.maprow-b code { background: var(--primary-soft); color: var(--primary-ink); font-size: .82em; }
@media (max-width: 720px) {
  .maprow { grid-template-columns: 1fr; }
  .maprow-arrow { height: 28px; transform: rotate(90deg); }
  .maprow-b { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* =====================================================================
   Bo'sh holat
   ===================================================================== */

.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
  padding: clamp(40px, 6vw, 64px) var(--sp-5);
  background: var(--canvas);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-lg);
  color: var(--text-muted);
}
.empty .ico { color: var(--text-subtle); }
.empty h3 { font-size: var(--fs-lg); color: var(--ink); }

/* =====================================================================
   Dars ishlanmasi (dars.php)
   ===================================================================== */

.aims {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.aim {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
}
.aim h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.aim p  { font-size: var(--fs-base); color: var(--text-muted); line-height: var(--lh-base); }

.stages { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); }
.stages table { width: 100%; }
.stages th {
  background: var(--parchment);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.stages td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.stages tr:last-child td { border-bottom: 0; }
.stages .st-name { font-weight: 600; white-space: nowrap; }
.stages .st-time { white-space: nowrap; font-weight: 600; color: var(--accent-ink); }
.stages .st-act  { color: var(--text-muted); }
@media (max-width: 640px) {
  .stages thead { display: none; }
  .stages tr { display: grid; grid-template-columns: 1fr auto; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); }
  .stages td { padding: 2px 0; border: 0; }
  .stages .st-act { grid-column: 1 / -1; margin-top: 4px; }
}

.steam-grid { display: grid; gap: var(--sp-3); }
.steam-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.steam-letter {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.steam-letter.s { background: var(--green-600); }
.steam-letter.t { background: var(--sky-500); }
.steam-letter.e { background: var(--coral-500); }
.steam-letter.a { background: var(--violet-500); }
.steam-letter.m { background: var(--sun-500); }
.steam-row strong { display: block; font-size: var(--fs-sm); color: var(--text-subtle); margin-bottom: 4px; }
.steam-row p { font-size: var(--fs-base); line-height: var(--lh-base); }

.lesson-nav { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.lesson-nav a {
  display: grid; gap: 4px;
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  transition: border-color var(--t-fast);
}
.lesson-nav a:hover { border-color: var(--primary); }
.lesson-nav a.is-next { text-align: right; }
.lesson-nav small { font-size: var(--fs-xs); color: var(--text-subtle); }
.lesson-nav strong { font-size: var(--fs-base); line-height: 1.35; }
@media (max-width: 560px) { .lesson-nav { grid-template-columns: 1fr; } .lesson-nav a.is-next { text-align: left; } }

/* darslar.php — modul guruhlari orasida aniq ajratgich */
.lesson-groups { display: grid; gap: 0; }
.lesson-groups > * { padding-block: var(--sp-6); }
.lesson-groups > *:first-child { padding-top: 0; }
.lesson-groups > * + * { border-top: 1px solid var(--hairline); }

.lesson-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.lesson-row:hover { border-color: var(--primary); transform: translateX(3px); }
.lesson-row h3 { font-size: var(--fs-md); line-height: 1.3; }
.lesson-row p  { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; }
.lesson-row .lr-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 6px; }
.lesson-row .lr-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lesson-row .ico-arrow { color: var(--primary); }
@media (max-width: 560px) { .lesson-row { grid-template-columns: 48px 1fr; } .lesson-row .ico-arrow { display: none; } }

/* =====================================================================
   Oʻyin-simulyatsiya (oyinlar.php)
   ===================================================================== */

.game {
  scroll-margin-top: 96px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.game-head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-5); }
.game-head .module-icon { width: 56px; height: 56px; }
.game-head h2 { font-size: var(--fs-2xl); line-height: 1.15; }
.game-head p  { color: var(--text-muted); margin-top: 4px; font-size: var(--fs-base); }
.game-badges  { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.game-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 880px) { .game-grid { grid-template-columns: 1.15fr 0.85fr; } }

.game-block h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); margin-bottom: var(--sp-3); }
.game-block p  { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-muted); }
.game-block + .game-block { margin-top: var(--sp-5); }

.game-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); counter-reset: gs; }
.game-steps li {
  counter-increment: gs;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--parchment);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.game-steps li::before {
  content: counter(gs);
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.game-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.game-rules li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-base); line-height: 1.5; color: var(--text-muted); }
.game-rules li .ico { color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.levels { display: grid; gap: var(--sp-2); }
.level-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.level-row b { font-size: var(--fs-xs); font-weight: 600; padding: 4px 8px; border-radius: var(--r-xs); text-align: center; }
.level-row.l1 b { background: var(--green-100); color: var(--green-800); }
.level-row.l2 b { background: var(--sun-100);   color: var(--sun-700); }
.level-row.l3 b { background: var(--coral-100); color: var(--coral-700); }

.win-box {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.win-box strong { display: block; color: var(--accent-ink); margin-bottom: 4px; }

.spy-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.spy-nav a { display: block; padding: 8px 12px; border-left: 2px solid var(--hairline); font-size: var(--fs-sm); color: var(--text-subtle); }
.spy-nav a:hover { color: var(--ink); }
.spy-nav a.is-active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }

/* =====================================================================
   Diagnostik karta (diagnostika.php)
   ===================================================================== */

.dg-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dg-head { padding: var(--sp-5); border-bottom: 1px solid var(--hairline); display: grid; gap: var(--sp-3); }
.dg-head h2 { font-size: var(--fs-xl); }
.dg-fields { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.dg-fields .input { min-height: 40px; padding: 8px 12px; font-size: var(--fs-base); }

.dg-block { border-bottom: 1px solid var(--hairline); }
.dg-block:last-of-type { border-bottom: 0; }
.dg-block-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--parchment);
}
.dg-block-head h3 { font-size: var(--fs-md); }
.dg-block-head .dg-sum { font-weight: 600; font-size: var(--fs-sm); }

.dg-table { width: 100%; }
.dg-table th {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.dg-table th:nth-child(2) { text-align: left; }
.dg-table td { padding: var(--sp-3); border-bottom: 1px solid var(--hairline); font-size: var(--fs-base); vertical-align: middle; }
.dg-row:last-child td { border-bottom: 0; }
.dg-row:hover { background: var(--primary-soft); }
.dg-num  { width: 36px; text-align: center; color: var(--text-subtle); font-weight: 600; }
.dg-cell { width: 64px; text-align: center; cursor: pointer; }
.dg-cell input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }

.dg-scale { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.dg-scale b { color: var(--ink); }

.dg-total {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--parchment);
  align-items: center;
  grid-template-columns: auto 1fr;
}
.dg-total .result-ring { width: 96px; height: 96px; margin: 0; }
.dg-total .result-ring::before { inset: 9px; }
.dg-total .result-ring span { font-size: 21px; }
.dg-total dl { margin: 0; display: grid; gap: 6px; }
.dg-total .rule-line { border-bottom: 0; padding: 0; }
.dg-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* Chop etish */
@media print {
  .site-header, .site-footer, .edit-bar, .offline-bar, .dg-actions,
  .no-print, .flash-stack { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; letter-spacing: 0; }
  .page-head { padding: 0 0 12px; border: 0; background: none; }
  .page-head h1 { font-size: 18pt; }
  .page-head p, .crumbs { display: none; }
  .section { padding: 0; }
  .container { max-width: none; padding: 0; }
  .dg-card { border: 1px solid #999; border-radius: 0; }
  .dg-block-head { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dg-table td, .dg-table th { padding: 4px 6px; border-bottom: 1px solid #ccc; }
  .dg-cell input { width: 14px; height: 14px; }
  .dg-total { background: none; grid-template-columns: 1fr; }
  .result-ring { display: none; }
  .dg-fields .input { border: 0; border-bottom: 1px solid #000; border-radius: 0; background: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Huquqiy asoslar */
.acts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.act {
  padding: var(--sp-4) var(--sp-5);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: grid; gap: var(--sp-2);
}
.act b {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  justify-self: start;
}
.act:nth-child(even) b { background: var(--sky-700); }
.act small { font-size: var(--fs-xs); color: var(--text-subtle); }
.act p { font-size: var(--fs-base); line-height: 1.5; }