/* =====================================================================
   C2 Vocabulary — ศูนย์ C2 · บทเรียน 12 ขั้น · Challenge (ใช้คลาส gl-/lk- ร่วมกับแกรมม่า)
   มือถือก่อน: ทุกอย่างเรียงแนวตั้ง · ปุ่ม ≥ 44px · ไม่มี overflow แนวนอน
   ===================================================================== */
.c2-screen { --lv: var(--c2-strong); --lv-soft: var(--c2-soft); }
:root[data-theme="dark"] .c2-screen { --lv: #93C5FD; --lv-soft: #172554; }

.c2-hero { display: grid; gap: 6px; justify-items: start; margin: 8px 0 14px; }
.c2-hero .page-title { margin: 0; }
.c2-lock-note { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--lv-soft); color: var(--color-text); font-size: 0.9rem; line-height: 1.6; }

.c2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .c2-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.c2-stat { position: relative; display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.c2-stat b { font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--lv); }
.c2-stat span { font-size: 0.82rem; color: var(--color-text-muted); }
.c2-stat i { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p, 0) * 1%); background: var(--lv); }

.c2-modes { display: grid; gap: 8px; margin-bottom: 16px; }
@media (min-width: 640px) { .c2-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c2-mode { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font: inherit; cursor: pointer; }
.c2-mode .icon { grid-row: span 2; color: var(--lv); width: 24px; height: 24px; }
.c2-mode b { font-size: 0.98rem; }
.c2-mode small { color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.5; }
.c2-mode:hover:not(:disabled) { border-color: var(--lv); }
.c2-mode:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.c2-mode:disabled { opacity: 0.55; cursor: not-allowed; }
.c2-mode-main { background: var(--lv-soft); border-color: var(--lv); }

.c2-weak { margin-bottom: 16px; }
.c2-weak-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.c2-weak-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.c2-weak-list li:last-child { border-bottom: 0; }
.c2-weak-list b, .c2-weak-list a { font-weight: 800; color: var(--lv); }
.c2-weak-list small { margin-left: auto; color: var(--color-text-muted); }
.c2-facets { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

.c2-unit-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.c2-unit { display: grid; gap: 4px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 12px; text-align: left; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; }
.c2-unit.completed { border-color: var(--color-success); }
.c2-unit.locked { opacity: 0.8; border-style: dashed; }
.c2-unit-title { font-weight: 800; }
.c2-unit-meta { font-size: 0.82rem; color: var(--color-text-muted); }
.c2-unit:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.c2-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.c2-tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; line-height: 1.7;
  background: var(--color-surface-2); color: var(--color-text-muted); white-space: nowrap; }
.c2-kind { background: var(--lv-soft); color: var(--lv); }
.c2-ext { background: var(--color-warning-soft); color: var(--color-warning); }
.c2-reg-formal, .c2-reg-academic, .c2-reg-professional { background: var(--lv-soft); color: var(--lv); }
.c2-reg-informal { background: var(--color-success-soft, #DCFCE7); color: var(--color-success); }

/* การ์ดคำในขั้นเรียน */
.c2-cards { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.c2-card { padding: 12px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); min-width: 0; overflow-wrap: anywhere; }
.c2-form { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.c2-form b { font-size: 1.1rem; color: var(--lv); }
.c2-ipa { font-size: 0.85rem; color: var(--color-text-muted); }
.c2-short { margin: 0 0 6px; font-weight: 700; }
.c2-th { margin: 4px 0; font-weight: 700; line-height: 1.7; }
.c2-en { margin: 0 0 6px; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; }
.c2-base { margin: 0 0 4px; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; }
.c2-colls { margin: 4px 0 8px; padding-left: 1.1em; display: grid; gap: 2px; }
.c2-near { margin: 6px 0; padding-left: 1.1em; display: grid; gap: 4px; line-height: 1.6; }
.c2-syn { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.6; }
.c2-syn > span:first-child { display: inline-block; min-width: 6.5em; font-weight: 700; color: var(--color-text-muted); }
.c2-sense-chips { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.c2-sense-chips li { padding: 4px 10px; border-radius: 99px; background: var(--lv-soft); color: var(--lv); font-weight: 700; font-size: 0.88rem; }
.c2-steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; counter-reset: c2s; }
.c2-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.c2-steps li small { grid-column: 2; color: var(--color-text-muted); font-size: 0.82rem; }
.c2-steps li.is-done .icon { color: var(--color-success); }

/* ข้อ: ประโยค/ข้อความภาษาอังกฤษยาวต้องตัดบรรทัดได้บนจอแคบ */
.c2-item .gl-q, .c2-item .gl-ctx p, .c2-item .gl-choice span { overflow-wrap: anywhere; }
.c2-hub-btn { margin: 10px 0 4px; width: 100%; }

/* รายละเอียด C2 ในหน้าคำศัพท์ */
.vd-c2 { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-border); display: grid; gap: 4px; overflow-wrap: anywhere; }
.vd-c2-row { margin: 0; line-height: 1.7; }
.vd-c2-near { margin: 2px 0 4px; padding-left: 1.1em; display: grid; gap: 4px; line-height: 1.6; }

/* Admin: C2 Content Audit */
.admin-c2 { display: grid; gap: 8px; padding: 8px 0; }
.c2-admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c2-issues { margin: 4px 0; padding-left: 1.2em; font-size: 0.85rem; color: var(--color-text-muted); }
.c2-issues.bad { color: var(--color-danger); }
.c2-admin-form { display: grid; gap: 8px; margin-top: 8px; }
.c2-admin-form label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 700; }