/* sinaq-movzu.css — /movzu as the answer sheet (config movzu_index 'b', Learn\TopicIndex): the exam control, the subject chips, the progress
   line, the legend and the topic rows with their bubbles, in the answer-sheet design's colours and type (its variables when site_design is
   on, the same values otherwise). Phone first: nothing here is wider than the column. */
.sq-mv { --mv-red: var(--h9-red, #a80f3c); --mv-rule: var(--h9-rule, #e2487a); --mv-tint: var(--h9-tint, #fdeef3); --mv-ink: var(--h9-lead, #24242a);
  --mv-muted: var(--muted, #55555e); --mv-green: #159a47; --mv-head: "Barlow Condensed", "H9 Cond", system-ui, sans-serif;
  --mv-text: Barlow, "H9 Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  max-width: 760px; margin: 0; color: var(--mv-ink); }
.sq-mv h1 { margin: 8px 0 6px; }
.sq-mv .sq-lead { margin: 0 0 16px; }
.sq-mv :focus-visible { outline: 3px solid #0b6fd6; outline-offset: 2px; }
.sq-mv [hidden] { display: none; }

/* the exam control: four parts of one strip */
.sq-mv .sq-mv-exams { display: flex; gap: 3px; margin: 0 0 12px; padding: 3px; border: 1.6px solid var(--mv-rule); border-radius: 8px; background: var(--mv-tint); }
.sq-mv .sq-mv-exams a { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0 2px; overflow: hidden;
  border-radius: 6px; color: var(--mv-red); font: 600 16px/1.1 var(--mv-head); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.sq-mv .sq-mv-exams a[aria-current] { background: #fff; box-shadow: inset 0 0 0 1.6px var(--mv-ink); color: var(--mv-ink); font-weight: 700; }

/* the subjects of the exam: one scrolling row on a phone, wrapped on a wide screen */
.sq-mv .sq-mv-subjs { display: flex; gap: 6px; margin: 0 0 14px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sq-mv .sq-mv-subjs::-webkit-scrollbar { display: none; }
.sq-mv .sq-mv-subjs[hidden] { display: none; }
.sq-mv .sq-mv-subjs a { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border: 1.6px solid var(--mv-rule); border-radius: 20px;
  background: #fff; color: var(--mv-ink); font: 600 15px/1 var(--mv-text); text-decoration: none; white-space: nowrap; }
.sq-mv .sq-mv-subjs a[aria-current] { border-color: var(--mv-red); background: var(--mv-red); color: #fff; }
.sq-mv .sq-mv-k { color: var(--mv-muted); font-weight: 400; }
.sq-mv .sq-mv-subjs a[aria-current] .sq-mv-k { color: #f6d3de; }

/* the line "Riyaziyyat: 3 / 124 keçdin" and its thin green bar */
.sq-mv .sq-mv-progress { margin: 0 0 6px; }
.sq-mv .sq-mv-line { margin: 0; font: 600 17px/1.3 var(--mv-text); }
.sq-mv .sq-mv-done { color: var(--mv-green); font-weight: 700; }
.sq-mv .sq-mv-bar { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: var(--mv-tint); }
.sq-mv .sq-mv-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--mv-green); }

/* the bubbles: empty, half (oxudun), full (keçdin) */
.sq-mv .sq-mv-bub { display: inline-block; flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 1.8px solid var(--mv-rule); border-radius: 50%; background: #fff; }
.sq-mv .sq-mv-bub.sq-mv-s1 { border-color: var(--mv-green); background: linear-gradient(90deg, var(--mv-green) 50%, #fff 50%); }
.sq-mv .sq-mv-bub.sq-mv-s2 { border-color: var(--mv-green); background: var(--mv-green); }
.sq-mv .sq-mv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 6px; color: var(--mv-muted); font-size: 14px; line-height: 1.3; }
.sq-mv .sq-mv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sq-mv .sq-mv-legend .sq-mv-bub { width: 14px; height: 14px; border-width: 1.6px; }
.sq-mv .sq-mv-signin { margin: 0 0 6px; font-size: 15px; }
.sq-mv .sq-mv-signin .sq-link { min-height: 44px; padding: 0; color: var(--mv-red); font-weight: 600; vertical-align: baseline; }

/* a chapter and its rows */
.sq-mv .sq-mv-chap { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--mv-red); color: var(--mv-red); font: 600 19px/1.15 var(--mv-head); }
.sq-mv .sq-mv-chap span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sq-mv .sq-mv-chap .sq-mv-k { font: 400 14px/1 var(--mv-text); white-space: nowrap; }
.sq-mv .sq-mv-sheet { margin: 0; padding: 0; list-style: none; }
.sq-mv .sq-mv-sheet li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; border-bottom: 1.6px solid var(--mv-rule); }
.sq-mv .sq-mv-sheet a { flex: 1; min-width: 0; padding: 11px 0; color: var(--mv-ink); font-weight: 400; text-decoration: none; overflow-wrap: anywhere; }
.sq-mv .sq-mv-sheet a:hover { color: var(--mv-red); text-decoration: underline; }

/* without the script a #view link still shows its view */
.sq-mv:not(.sq-mv-js) .sq-mv-view:target { display: block; }
.sq-mv:not(.sq-mv-js):has(.sq-mv-view:target) .sq-mv-view:not(:target) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .sq-mv .sq-mv-bar i { transition: width .2s; }
}
@media (max-width: 360px) {
  .sq-mv .sq-mv-exams a { font-size: 14.5px; }
}
@media (min-width: 720px) {
  .sq-mv .sq-mv-subjs { flex-wrap: wrap; overflow: visible; }
  .sq-mv .sq-mv-exams a { font-size: 17px; }
}