/* Yolchiroq darslik — umumiy uslublar jadvali
   Manba: resources/ui-handoff/design/tokens.json ("Yo'l belgisi" dizayn tizimi, v1)
   Barcha darslar va ma'lumotnomalar shu faylga ulanadi. Darsda rang qiymati yozilmaydi. */

:root {
  /* Fon va sirtlar */
  --ground: #17191D;
  --surface: #23262C;
  --surface-muted: #2A2E35;
  --line: #33373F;
  --line-dashed: #3A3F48;
  /* Matn */
  --ink: #F2F2F0;
  --ink-muted: #A3A8B2;
  --accent-ink: #FFC72C;
  --text-success: #3DDC84;
  --text-danger: #FF5A6A;
  /* Belgi ranglari — ma'no bildiradi, bezak emas */
  --sign-yellow: #FFC72C;
  --on-yellow: #111214;
  --sign-blue: #0A5BD3;
  --sign-red: #C8102E;
  --sign-green: #0B7A3E;
  --sign-gray: #4A505A;
  --on-sign: #FFFFFF;
  /* Yo'l */
  --road: #34383F;
  --road-marking: #E8E8E4;
  /* Ritm */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-inner: 9px;
  --radius-md: 12px; --radius-lg: 14px; --radius-sheet: 24px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: Barlow, system-ui, sans-serif;
}

:root[data-theme="light"] {
  --ground: #F2F1ED; --surface: #FFFFFF; --surface-muted: #E8E7E1;
  --line: #DCDAD3; --line-dashed: #CFCDC5;
  --ink: #17191D; --ink-muted: #5C616B; --accent-ink: #111214;
  --text-success: #0B7A3E; --text-danger: #C8102E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 680px; margin: 0 auto; padding: var(--space-6) var(--space-4) 64px; }

/* --- Sarlavhalar --- */
.kicker {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
h1 {
  font-family: var(--display); font-size: 34px; line-height: 1; font-weight: 700;
  text-transform: uppercase; margin: 0 0 var(--space-3);
}
h2 {
  font-family: var(--display); font-size: 28px; line-height: 1.05; font-weight: 700;
  text-transform: uppercase; margin: var(--space-6) 0 var(--space-3);
}
h3 {
  font-family: var(--display); font-size: 22px; line-height: 1; font-weight: 700;
  text-transform: uppercase; margin: var(--space-5) 0 var(--space-2);
}
.lede { font-size: 18px; color: var(--ink-muted); margin: 0 0 var(--space-5); }
p { margin: 0 0 var(--space-4); }
a { color: var(--sign-yellow); text-decoration: none; border-bottom: 1px solid currentColor; }
:root[data-theme="light"] a { color: #0A5BD3; }

/* Yo'l chizig'i ajratgichi */
hr.road {
  border: 0; border-top: 2px dashed var(--line-dashed);
  margin: var(--space-6) 0;
}

/* --- Kartalar --- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
.card > :last-child { margin-bottom: 0; }

/* Belgi plitasi: rangli tashqi qatlam + 4px bo'shliq + 2px oq ramka */
.tile {
  border-radius: var(--radius-md); padding: var(--space-1);
  margin: 0 0 var(--space-4);
}
.tile > .tile-in {
  border: 2px solid var(--on-sign); border-radius: var(--radius-inner);
  padding: var(--space-3) var(--space-4); color: var(--on-sign);
}
.tile.blue { background: var(--sign-blue); }
.tile.red { background: var(--sign-red); }
.tile.green { background: var(--sign-green); }
.tile.gray { background: var(--sign-gray); }
.tile.yellow { background: var(--sign-yellow); }
.tile.yellow > .tile-in { border-color: var(--on-yellow); color: var(--on-yellow); }
.tile .tile-in > :last-child { margin-bottom: 0; }
.tile h3, .tile h2 { margin-top: 0; color: inherit; }

/* --- Jadval --- */
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 15px; }
th {
  font-family: var(--display); font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--line);
}
td { padding: var(--space-3) var(--space-2); border-bottom: 1px dashed var(--line-dashed); vertical-align: top; }
td:first-child { width: 72px; }

/* --- Belgi chizmalari (SVG) --- */
.signrow {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.signbox {
  background: var(--surface-muted); border-radius: var(--radius-md);
  padding: var(--space-3); text-align: center; flex: 1 1 128px; min-width: 128px;
}
.signbox svg { display: block; margin: 0 auto var(--space-2); }
.signbox .cap {
  font-size: 13px; line-height: 1.3; color: var(--ink-muted);
}
.signbox .num {
  font-family: var(--display); font-size: 13px; letter-spacing: .06em;
  color: var(--accent-ink); display: block;
}

/* --- Eslatma / manba --- */
.note {
  border-left: 3px solid var(--sign-yellow);
  padding: 0 0 0 var(--space-4); margin: 0 0 var(--space-4);
  color: var(--ink-muted); font-size: 15px;
}
.cite { font-size: 13px; color: var(--ink-muted); }

/* --- Pastki navigatsiya --- */
.footnav {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 2px dashed var(--line-dashed); font-size: 15px; color: var(--ink-muted);
}
.footnav a { display: inline-block; margin-right: var(--space-4); }

/* --- Chop etish --- */
@media print {
  :root {
    --ground: #fff; --surface: #fff; --surface-muted: #f4f3ef;
    --ink: #000; --ink-muted: #444; --line: #bbb; --line-dashed: #ccc; --accent-ink: #000;
  }
  body { font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .quiz, .footnav { display: none; }
  h2, h3 { break-after: avoid; }
  .card, .signbox, table { break-inside: avoid; }
}

/* ===== Mashq bloki (quiz.js tomonidan to'ldiriladi) ===== */
.quiz { margin: var(--space-5) 0; }
.quiz-progress {
  font-family: var(--display); font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2);
}
.quiz-q {
  font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-4);
}
.quiz-figure { margin: 0 0 var(--space-4); text-align: center; }
.quiz-opts { display: grid; gap: var(--space-2); }
.quiz-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--text); font-size: 16px; font-weight: 500; line-height: 1.35;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--sign-yellow); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-right {
  background: var(--sign-green); color: var(--on-sign);
  border: 2px solid var(--on-sign); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
}
.quiz-opt.is-wrong {
  background: var(--sign-red); color: var(--on-sign);
  border: 2px solid var(--on-sign); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
}
.quiz-why {
  margin-top: var(--space-4); background: var(--surface-muted);
  border-radius: var(--radius-md); padding: var(--space-4); font-size: 15px;
}
.quiz-why strong { color: var(--accent-ink); }
.quiz-btn {
  margin-top: var(--space-4); width: 100%; cursor: pointer;
  background: var(--sign-yellow); color: var(--on-yellow); border: 0;
  border-radius: var(--radius-md); padding: var(--space-3);
  font-family: var(--display); font-size: 20px; line-height: 24px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.quiz-score { text-align: center; }
.quiz-score .pct {
  font-family: var(--display); font-size: 72px; line-height: .9; font-weight: 700;
  font-variant-numeric: tabular-nums; display: block;
}
.quiz-score .pct.ok { color: var(--text-success); }
.quiz-score .pct.no { color: var(--text-danger); }

/* Eslab olish kartasi: javob yopiq turadi */
.recall {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4); margin: 0 0 var(--space-3);
}
.recall-q { font-weight: 600; margin: 0 0 var(--space-3); }
.recall-btn {
  cursor: pointer; background: transparent; color: var(--ink);
  border: 2px dashed var(--line-dashed); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.recall-a { margin: var(--space-3) 0 0; color: var(--ink-muted); }
.recall-a[hidden] { display: none; }
@media print { .recall-a[hidden] { display: block; } .recall-btn { display: none; } }