/* Agbalumo Languages: the parts the Learn pages add to site.css. */

/* Scripts beyond Latin and Greek fall back to the reader's own system fonts. */
.script { font-family: 'Gentium Plus', 'Noto Sans', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans Ethiopic', 'Nyala', 'Noto Naskh Arabic', 'Geeza Pro', serif; }
.big { font-size: 1.6em; line-height: 1.2; }

/* Catalog */
.unit { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.unit .part { font: 600 14px/1.3 var(--sans); color: var(--muted); margin: 0 0 var(--s1); }
.unit h2 { margin-bottom: var(--s2); }
.unit .start { color: var(--ink-2); margin: 0 0 var(--s3); }
.meter { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; max-width: 280px; margin: var(--s2) 0 var(--s3); }
.meter span { display: block; height: 100%; background: var(--accent); width: 0; }
ol.lessons { list-style: none; padding: 0; margin: 0; counter-reset: l; }
ol.lessons li { counter-increment: l; display: flex; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--line); max-width: none; }
ol.lessons li::before { content: counter(l); font: 600 14px var(--sans); color: var(--muted); min-width: 1.6em; }
ol.lessons li .t { flex: 1; }
ol.lessons li.soon .t { color: var(--muted); }
ol.lessons li.done::before { content: '✓'; color: var(--accent-text); }
ol.lessons.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--s4); }

/* Lesson */
.lesson-meta { display: flex; gap: var(--s3); flex-wrap: wrap; font: 14px var(--sans); color: var(--muted); }
.media { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) 0; background: var(--surface); }
.media video, .media audio { width: 100%; }
.media .soon { color: var(--muted); font-size: 15px; margin: 0; }
.notes h3 { margin-top: var(--s5); }
.notes table.t td:first-child { width: 30%; }
.callout { border-left: 3px solid var(--accent); padding: var(--s2) var(--s3); background: var(--surface); margin: var(--s4) 0; }
.chain { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s3) 0; }
.chain span { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s1) var(--s2); background: var(--surface); }
.chain i { color: var(--muted); font-style: normal; }

/* Self-check */
.q { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.q p.ask { font-weight: 600; margin: 0 0 var(--s2); }
.q label { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s1) 0; cursor: pointer; }
.q .why { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--radius); font-size: 15px; }
.q .why.ok { background: color-mix(in srgb, var(--yes) 12%, transparent); }
.q .why.no { background: color-mix(in srgb, var(--paris) 12%, transparent); }
.score { font: 600 18px var(--sans); margin: var(--s3) 0; }

/* Review cards */
.cardbox { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: var(--s5) var(--s4); text-align: center; max-width: 520px; }
.cardbox .front { font: 600 28px/1.2 var(--serif); }
.cardbox .back { margin-top: var(--s3); color: var(--ink-2); }
.cardbox .row { justify-content: center; margin-top: var(--s4); }
.pill { display: inline-block; font: 600 13px var(--sans); padding: 2px 10px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }

/* The six kinds, as cards that stack on a phone */
.kinds { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: var(--s4) 0; }
.kind { border-top: 3px solid var(--accent); padding-top: var(--s3); }
.kind h3 { margin: 0 0 var(--s2); }
.kind p { margin: .4em 0; font-size: 16px; }
.kind .ex .big { white-space: nowrap; }

/* .btn sets display, which would otherwise override the hidden attribute */
[hidden] { display: none !important; }
/* Language grids: the muted name already says it is not ready yet */
ol.lessons.langs li .muted { display: none; }