/* ============================================================================
   AI-ENG Exams - exams.css : مكونات خاصة بموقع نظام الاختبارات فوق تنسيق الأسرة المشترك (site.css)
   EN: Exams-website components on top of the shared product-family styles (site.css)
   ----------------------------------------------------------------------------
   - لوحة "المراقبة الحية" في البطل، ورحلة الاختبار (خط زمني)، وأنواع الأسئلة العشرة، و"جرّب بنفسك" (اختبار
     قصير تفاعلي)، ومجسّم تطبيق الدارس وورقة الإجابة الضوئية، ومخطط تحليل الأسئلة، والشعار صورةً بنسخة كل مظهر،
     ودرس «تعلّم بالفيديو» (learn.js: المراحل والفصول وحقيبة الدرس).
   - الرموز اللونية من site.css فقط (المظهران يعملان تلقائياً)، والألوان دلالية: الأخضر صحيح/مكتمل، الذهبي
     تنبيه/جزئي، الأحمر خطأ/مخالفة - لا تدرّج للزينة. الاتجاه منطقي (inline-start/end) للعربية والإنجليزية.
   ============================================================================ */

/* ---------- 1) لوحة المراقبة الحية (البطل) ---------- */
.mon-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.mon-head b { font-family: "Cairo", sans-serif; direction: ltr; unicode-bidi: isolate; }
.mon-live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; font-size: 12.5px; }
.mon-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green-soft); animation: mon-pulse 1.8s infinite; }
@keyframes mon-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 168, 98, .45); } 70% { box-shadow: 0 0 0 9px rgba(34, 168, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 168, 98, 0); } }
.mon-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mon-row { display: grid; grid-template-columns: 1.3fr 1.6fr auto; gap: 12px; align-items: center; padding: 9px 14px; font-size: 13.5px; border-top: 1px solid var(--line); }
.mon-row:first-child { border-top: 0; }
.mon-row .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.bar.done i { background: var(--green); }
.mon-row .st { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mon-row .st.ok { color: var(--green); } .mon-row .st.warn { color: var(--gold-text); } .mon-row .st.bad { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .mon-live::before { animation: none; } }

/* ---------- 2) رحلة الاختبار: خط زمني من أول سؤال إلى الشهادة ---------- */
.journey { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; position: relative; }
.journey li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px 20px; counter-increment: step; min-width: 0; }
.journey li::before {
  content: counter(step); position: absolute; top: -17px; inset-inline-start: 20px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 800 15px/1 "Cairo", sans-serif; background: var(--gold); color: var(--on-gold); border: 3px solid var(--bg);
}
/* خط يصل الخطوات في كل صف (يختفي على الشاشات الضيقة) */
.journey li::after { content: ""; position: absolute; top: 0; inset-inline-start: calc(100% + 1px); width: 17px; height: 1px; background: var(--line-strong); }
.journey li:nth-child(4n)::after, .journey li:last-child::after { display: none; }
.journey h3 { font-size: 18px; margin-top: 4px; }
.journey p { color: var(--text-soft); font-size: 14.8px; margin-top: 8px; }
.journey .role { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--gold-text); background: var(--gold-soft); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 1024px) { .journey { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } .journey li::after { display: none; } }
@media (max-width: 600px) { .journey { grid-template-columns: 1fr; } }

/* ---------- 3) أنواع الأسئلة العشرة ---------- */
.qtypes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.qtype { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.qtype i { font-size: 28px; color: var(--gold-text); }
.qtype b { font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.35; }
.qtype .badge { font-size: 11.5px; }
@media (max-width: 1024px) { .qtypes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .qtypes { grid-template-columns: repeat(2, 1fr); } }
.media-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }

/* ---------- 4) جرّب بنفسك: اختبار قصير تفاعلي (js/tryit.js) ---------- */
.try { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start; }
@media (max-width: 960px) { .try { grid-template-columns: 1fr; } }
.player { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.pl-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 14px; flex-wrap: wrap; }
.pl-bar .pl-title { font-weight: 700; margin-inline-end: auto; }
.pl-timer { display: inline-flex; align-items: center; gap: 6px; font: 800 16px/1 "Cairo", sans-serif; direction: ltr; color: var(--gold-text); }
.pl-timer.low { color: var(--red); }
.pl-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mute); }
.pl-save.is-saved { color: var(--green); }
.pl-body { padding: 22px; display: grid; gap: 16px; min-height: 330px; align-content: start; }
.pl-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--mute); font-size: 13px; }
.pl-q { font-size: 18px; font-weight: 700; line-height: 1.6; }
.pl-opts { display: grid; gap: 10px; }
.pl-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--bg-2); font-size: 15.5px; transition: border-color .2s ease, background-color .2s ease; }
.pl-opt:hover { border-color: var(--line-strong); }
.pl-opt input { accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
.pl-opt.is-on { border-color: var(--gold); background: var(--gold-soft); }
.pl-num { width: 160px; }
.pl-order { display: grid; gap: 8px; }
.pl-order .pl-opt { cursor: default; justify-content: space-between; }
.pl-order .mv { display: inline-flex; gap: 4px; }
.pl-order .mv button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.pl-order .mv button:hover { border-color: var(--gold); color: var(--gold-text); }
.pl-order .mv button:disabled { opacity: .35; cursor: default; }
.pl-foot { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pl-nav { display: flex; gap: 6px; margin-inline-end: auto; flex-wrap: wrap; }
.pl-nav button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: 700 14px "Cairo", sans-serif; cursor: pointer; position: relative; }
.pl-nav button.is-cur { border-color: var(--gold); color: var(--gold-text); }
.pl-nav button.is-ans { background: var(--gold-soft); }
.pl-nav button.is-flag::after { content: ""; position: absolute; top: -4px; inset-inline-end: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); }
.pl-flag.is-on { border-color: var(--gold); color: var(--gold-text); }
/* شاشة النتيجة */
.pl-result { display: grid; gap: 16px; }
.ring { --p: 0; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin-inline: auto;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring.mid { background: conic-gradient(var(--gold) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring > div { width: 104px; height: 104px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; line-height: 1.2; }
.ring b { font: 800 28px/1 "Cairo", sans-serif; direction: ltr; }
.ring small { color: var(--mute); font-size: 12px; }
.pl-review { list-style: none; display: grid; gap: 8px; }
.pl-review li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; background: var(--bg-2); }
.pl-review li i { margin-top: 3px; }
.pl-review li.ok i { color: var(--green); } .pl-review li.no i { color: var(--red); }
.pl-review li small { display: block; color: var(--mute); font-size: 13px; }
.try-notes { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.try-notes li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; color: var(--text-soft); font-size: 15px; }
.try-notes li i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--gold-text); background: var(--gold-soft); border: 1px solid var(--line-strong); font-size: 18px; }

/* ---------- 5) تطبيق الدارس والأوراق الضوئية ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 960px) { .duo { grid-template-columns: 1fr; } }
.duo .card { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
@media (max-width: 560px) { .duo .card { grid-template-columns: 1fr; } }
.ph-mock { width: 150px; border: 2px solid var(--line-strong); border-radius: 26px; padding: 10px 8px 14px; background: var(--bg-2); box-shadow: var(--shadow); }
.ph-mock .notch { width: 46px; height: 5px; border-radius: 9px; background: var(--line-strong); margin: 0 auto 10px; }
.ph-mock .ph-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--surface); margin-bottom: 7px; font-size: 10.5px; line-height: 1.45; }
.ph-mock .ph-card b { display: block; font-size: 11px; }
.ph-mock .ph-card .bar { margin-top: 5px; height: 5px; }
.ph-mock .ph-btn { display: block; text-align: center; border-radius: 8px; padding: 5px; font-size: 10.5px; font-weight: 700; background: var(--gold); color: var(--on-gold); }
.sheet { width: 150px; background: #FBFAF6; color: #222; border-radius: 6px; padding: 10px; box-shadow: var(--shadow); border: 1px solid #ddd; font: 600 9px/1.3 "Cairo", sans-serif; direction: ltr; }
.sheet .sh-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sheet .qr { width: 26px; height: 26px; background:
  conic-gradient(#222 25%, transparent 0 50%, #222 0 75%, transparent 0) 0 0 / 8px 8px; border: 2px solid #222; }
.sheet .sh-row { display: grid; grid-template-columns: 14px repeat(4, 1fr); gap: 4px; align-items: center; margin-top: 4px; }
.sheet .bub { width: 13px; height: 13px; border-radius: 50%; border: 1.3px solid #555; justify-self: center; }
.sheet .bub.f { background: #222; border-color: #222; }
.sheet .corner { width: 8px; height: 8px; background: #222; }

/* ---------- 6) التحليلات: مخطط صعوبة الأسئلة وتمييزها ---------- */
.psy { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 960px) { .psy { grid-template-columns: 1fr; } }
.chart { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: 20px 20px 14px; box-shadow: var(--shadow); }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-head .lg { display: inline-flex; gap: 12px; color: var(--mute); font-size: 12.5px; }
.chart-head .lg span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 5px; background: var(--gold); }
.chart-head .lg span.d::before { background: var(--green); }
.bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; align-items: end; height: 170px; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.bars .it { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-items: end; height: 100%; }
.bars .it i { display: block; border-radius: 4px 4px 0 0; background: var(--gold); }
.bars .it i.d { background: var(--green); }
.bars .it.flag i { background: var(--red); }
.bars-x { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-top: 6px; color: var(--mute); font: 600 11.5px/1 "Cairo", sans-serif; text-align: center; direction: ltr; }
.chart-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.chart-foot div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--bg-2); text-align: center; }
.chart-foot small { display: block; color: var(--mute); font-size: 12px; }
.chart-foot b { font: 800 18px/1.2 "Cairo", sans-serif; direction: ltr; display: inline-block; }

/* ---------- 7) التكامل: بطاقات المعايير ---------- */
.std .card { display: grid; gap: 6px; }
.std .card .k { font: 800 13px/1 "Cairo", sans-serif; letter-spacing: .06em; color: var(--gold-text); direction: ltr; text-align: start; }

/* تلميح صغير في المشغّل (نوع السؤال، ملاحظة النتيجة) */
.pl-hint { color: var(--mute); font-size: 13.5px; }
.pl-result h4 { font-family: var(--f-body); font-size: 15px; font-weight: 800; }

/* شريط الأدلة على الجوال: أعمدة الشبكة تنكمش، وشارة الحالة الطويلة تلتف بدل أن تدفع الصفحة أفقياً */
.docs-band > * { min-width: 0; }
@media (max-width: 560px) { .doc-item .badge { white-space: normal; text-align: center; max-width: 45%; } }


/* ---------- تعلّم بالفيديو (learn.js): شريط المراحل + الفيديو + «يُعرض الآن» + فهرس الفصول، ثم حقيبة الدرس ----------
   لون واحد للتقدّم (الذهبي = الهوية) بلا تدرّج؛ الفصل الجاري بحدّ ذهبي، وشريطه السفلي يمتلئ بنسبة ما عُرض منه. */
.learn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.learn-main { display: grid; gap: 14px; min-width: 0; }
.learn-rail { display: flex; gap: 5px; }
.learn-seg { flex: var(--w) 1 0; min-width: 104px; display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--mute); text-align: start; }
.learn-seg-label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learn-seg-label span { overflow: hidden; text-overflow: ellipsis; }
.learn-seg::after { content: ""; height: 5px; border-radius: 3px; background: var(--line-strong); grid-row: 2; grid-column: 1; }
.learn-seg-fill { grid-row: 2; grid-column: 1; height: 5px; border-radius: 3px; background: var(--gold); width: calc(var(--p, 0) * 100%); z-index: 1; transition: width .25s linear; }
.learn-seg:hover, .learn-seg.on { color: var(--text); }
.learn-seg.on .learn-seg-label { color: var(--gold-text); }
.learn-seg:focus-visible, .learn-ch:focus-visible, .learn-jump:focus-visible, .learn-role:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.learn-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-strong); }
.learn-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.learn-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: #ECE7DA; font-weight: 700; }
.learn-fallback[hidden] { display: none; }
.learn-fallback .bi { font-size: 34px; color: var(--gold); }
.learn-now { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.learn-now-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; font-weight: 800; color: var(--mute); }
.learn-now-label { color: var(--gold-text); }
.learn-now-time { margin-inline-start: auto; font-family: ui-monospace, Consolas, monospace; }
.learn-now h3 { margin: 6px 0 4px; font-size: 21px; }
.learn-now p { margin: 0; color: var(--text-soft); }
.learn-role-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gold-text); background: var(--gold-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 12px; }
.learn-role-tag[hidden] { display: none; }
.learn-links { display: flex; flex-wrap: wrap; gap: 10px; }
.learn-links .btn { gap: 8px; }
.learn-index { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 680px; overflow: auto; overscroll-behavior: contain; position: relative; }
.learn-index-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; background: var(--surface); padding: 13px 16px; font-weight: 800; border-bottom: 1px solid var(--line); }
.learn-index-head .bi { color: var(--gold-text); }
.learn-group { padding: 6px 10px 10px; }
.learn-group + .learn-group { border-top: 1px solid var(--line); }
.learn-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px; font-size: 14.5px; }
.learn-group-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--gold-soft); color: var(--gold-text); font-size: 14px; flex: none; }
.learn-count { margin-inline-start: auto; font-size: 12px; font-weight: 800; color: var(--mute); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 9px; white-space: nowrap; }
.learn-ch { position: relative; width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 11px; align-items: start; padding: 8px; margin-top: 4px;
            border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; overflow: hidden; }
.learn-ch:hover { background: var(--surface-2); }
.learn-ch.on { border-color: var(--gold); background: var(--surface-2); }
.learn-thumb { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.learn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.learn-time { font: 700 11.5px/1.5 ui-monospace, Consolas, monospace; }
.learn-thumb .learn-time { position: absolute; inset-inline-end: 4px; bottom: 4px; background: rgba(8, 8, 10, .85); color: #fff; padding: 0 5px; border-radius: 4px; }
.learn-ch-body { display: grid; gap: 2px; min-width: 0; }
.learn-ch-body b { font-size: 14.5px; line-height: 1.45; }
.learn-ch-body span { font-size: 13px; color: var(--mute); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.learn-ch.on .learn-ch-body span { -webkit-line-clamp: unset; }
.learn-ch-bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--gold); }

/* حقيبة الدرس: الأهداف (كل هدف ينقل إلى فصله)، ومن يفعل ماذا، وما يلزم قبل البدء */
.learn-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 14px; box-shadow: var(--shadow); }
.learn-card h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 12px; }
.learn-card h3 .bi { color: var(--gold-text); }
.learn-goals { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; counter-reset: g; }
.learn-goals li { counter-increment: g; }
.learn-jump { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 9px; border: 1px solid transparent; border-radius: 10px;
              background: none; color: var(--text-soft); font: inherit; font-size: 14.5px; text-align: start; cursor: pointer; }
.learn-jump:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
.learn-jump .learn-time { color: var(--gold-text); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 5px; }
.learn-roles { display: grid; gap: 8px; }
.learn-role { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px; border: 1px solid var(--line); border-radius: 12px;
              background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.learn-role:hover { border-color: var(--line-strong); background: var(--surface-2); }
.learn-role.on { border-color: var(--gold); background: var(--gold-soft); }
.learn-role-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--gold-soft); color: var(--gold-text); font-size: 18px; }
.learn-role-body { display: grid; gap: 1px; min-width: 0; }
.learn-role-body b { font-size: 15px; }
.learn-role-body span { font-size: 13.5px; color: var(--text-soft); }
.learn-role-body small { font-size: 12px; color: var(--mute); }
.learn-before { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.learn-before li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14px; color: var(--text-soft); line-height: 1.65; }
.learn-before .bi { color: var(--gold-text); margin-top: 3px; }
.learn-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
@media (max-width: 1080px) { .learn-kit { grid-template-columns: 1fr 1fr; } .learn-kit .learn-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 980px) { .learn-grid { grid-template-columns: 1fr; } .learn-index { max-height: 520px; } }
@media (max-width: 680px) { .learn-kit { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .learn-seg { min-width: 0; }
  .learn-seg-label span { display: none; }
  .learn-seg-label { justify-content: center; font-size: 15px; }
  .learn-ch { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .learn-seg-fill { transition: none; } }