/*
 * CCL practice styles. Loaded after the site theme (theme.css) and built only from its tokens:
 * no colour literals here (a test checks), no inline styles anywhere (the CSP forbids them).
 *
 * The one idea: the rhythm of the test itself. A segment, a chime, then your interpretation.
 * The hub hero shows one real segment with its ring drawing once and the two model answers sweeping in;
 * every dialogue page runs that rhythm for real in drill mode (hide the text, a 5-second ring, the model).
 *
 *  Section bar   .ccl-bar > .ccl-bar-in > .cb-home + .cb-links > .cb-link (.is-current)
 *  Hub           .ccl-hero > .ccl-hero-in > .ccl-hero-copy + .demo > .demo-card (.demo-src, .demo-chime > .ring, .demo-out)
 *                .lang-cards > .lang-card (.lc-native, .lc-name, .lc-facts, .lc-topics, .lc-go)
 *  Lists         .rows > .row > a > .row-tag + .row-title + .row-sum + .row-meta
 *  Prose         .prose-wrap / .art-body (h2, p, ul, .steps-list, .key, .tbl-wrap > .tbl, .cite)  .art-sources > .src
 *  Guide         .art > .art-head + .art-grid > .art-aside (.toc) + .art-main (.answer)  .practise-band  .related
 *  Dialogue      .dlg-head (.dlg-tags, .dlg-scene)  .dlg-grid > .dlg-main (.ai-note, .dlg-tools, .dlg > .seg, .drill-bar) + .dlg-aside
 *  Word list     .gl-find > .gl-field > input   .chips-nav > .chip-link   .gl-sec > .gl-tbl
 *  Language text :lang(ml) uses the system Malayalam fonts; no letter-spacing on Malayalam ever (it breaks the shaping).
 */

/* ---------- target-language text ---------- */
:lang(ml) { font-family: "Malayalam Sangam MN", "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Manjari", system-ui, sans-serif; letter-spacing: 0; line-height: 1.75; overflow-wrap: anywhere; font-feature-settings: normal; }
.display :lang(ml), .h2 :lang(ml), h1:lang(ml), h2:lang(ml) { letter-spacing: 0; line-height: 1.3; }

/* ---------- section bar ---------- */
.ccl-bar { border-bottom: 1px solid var(--line); background: var(--page); }
.ccl-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; }
.cb-home { display: inline-flex; align-items: center; gap: 8px; margin-left: -10px; padding: 8px 12px 8px 10px; border-radius: 999px; font-weight: 750; font-size: 15.5px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color 150ms var(--ease); }
.cb-home:hover { background: var(--wash); }
.cb-home svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-links { display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cb-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 999px; font-weight: 650; font-size: 14.5px; color: var(--ink); text-decoration: none; transition: background-color 150ms var(--ease); }
.cb-link:hover { background: var(--wash); }
.cb-link.is-current { background: var(--ink); color: var(--page); }
@media (max-width: 399px) { .cb-home span { font-size: 14px; } .cb-link { padding: 0 9px; font-size: 13.5px; min-height: 36px; } .cb-home { gap: 6px; padding-right: 6px; } }
@media (max-width: 339px) { .cb-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ---------- answer-first paragraph ---------- */
.answer { margin-top: 20px; max-width: 40em; font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.art-main .answer { margin-top: 0; padding: clamp(18px, 3vw, 26px); border-radius: 22px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-mid); }
.val { font-weight: 750; }

/* ---------- hub hero ---------- */
.ccl-hero { padding-bottom: clamp(36px, 5vw, 64px); }
.ccl-hero-in { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) { .ccl-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } }
.ccl-hero .display { font-size: clamp(38px, 9.4vw, 78px); max-width: 11em; }
.hero-meta { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; max-width: 34em; }
.hero-meta svg, .art-meta svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the demo: one segment, the chime, two model answers */
.demo { margin: 0; }
.demo-card { position: relative; display: grid; gap: 14px; padding: clamp(20px, 3.4vw, 32px); border-radius: 28px; background: var(--page); box-shadow: var(--sh-2), inset 0 0 0 1px var(--line); }
.demo-label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.demo-who { color: var(--accent-deep); }
.demo-text { font-size: clamp(18px, 2.3vw, 22px); line-height: 1.45; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.demo-text:lang(ml) { font-weight: 500; font-size: clamp(17px, 2.1vw, 20px); letter-spacing: 0; line-height: 1.7; }
.demo-text:lang(fil) { font-weight: 550; }
.demo-chime { display: flex; align-items: center; gap: 12px; padding-block: 4px; border-block: 1px dashed var(--line-2); }
.demo-chime .ring { width: 40px; height: 40px; flex: none; }
.demo-chime-t { font-weight: 700; font-size: 15px; color: var(--accent-deep); }
.demo-out { position: relative; padding: 14px 16px; border-radius: 18px; background: var(--wash); }
.demo-out .demo-label { color: var(--accent-deep); margin-bottom: 2px; }
.demo figcaption { margin-top: 12px; max-width: 34em; }

/* the ring (hub demo and drill mode): pathLength 100, drawn with stroke-dashoffset */
.ring { display: block; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--accent-mid); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }

/* the one authored moment, once on load: the chime ring draws, then each model answer sweeps in */
@media (prefers-reduced-motion: no-preference) {
  .demo-chime .ring-fg { animation: ring-draw 900ms 500ms var(--ease) both; }
  .demo-chime-t { animation: fade-in 300ms 1200ms var(--ease) both; }
  .demo-out { animation: sweep-in 650ms var(--ease) both; }
  .demo-out-1 { animation-delay: 1400ms; }
  .demo-out-2 { animation-delay: 1650ms; }
}
@keyframes ring-draw { from { stroke-dashoffset: 100; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sweep-in { from { clip-path: inset(0 100% 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }

/* ---------- language cards ---------- */
.lang-cards { display: grid; gap: 16px; margin-block: clamp(28px, 4vw, 44px); max-width: none; }
@media (min-width: 720px) { .lang-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.lang-card { position: relative; display: grid; gap: 10px; padding: clamp(22px, 3.4vw, 34px); border-radius: 28px; background: var(--page); color: var(--ink); text-decoration: none; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); transition: transform 250ms var(--ease), box-shadow 250ms var(--ease); }
.lang-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--accent); }
.lc-native { justify-self: start; font-size: clamp(40px, 8vw, 64px); font-weight: 800; line-height: 1.15; color: var(--accent-deep); background-image: linear-gradient(var(--accent-mid), var(--accent-mid)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 30%; transition: background-size 450ms var(--ease); }
.lc-native:lang(fil) { letter-spacing: -0.035em; }
.lc-native:lang(ml) { font-weight: 700; line-height: 1.35; }
.lang-card:hover .lc-native, .lang-card:focus-visible .lc-native { background-size: 100% 30%; }
.lc-name { font-size: clamp(21px, 2.4vw, 26px); font-weight: 750; letter-spacing: -0.02em; }
.lc-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 15.5px; }
.lc-facts b { color: var(--ink); font-weight: 800; }
.lc-topics { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.lc-go { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; transition: background-color 200ms var(--ease); }
.lang-card:hover .lc-go { background: var(--accent-deep); }

/* ---------- prose ---------- */
.prose-wrap { padding-bottom: clamp(56px, 8vw, 104px); }
.prose-wrap > *, .art-body > * { max-width: 42em; }
.prose-wrap > .lang-cards, .prose-wrap > .guide-list, .prose-wrap > .dlg-list, .prose-wrap > .gl-band { max-width: none; }
.prose-wrap h2, .art-body h2, .guide-list h2, .dlg-list h2 { font-weight: 800; font-size: clamp(23px, 2.7vw, 30px); line-height: 1.15; letter-spacing: -0.02em; margin: 48px 0 12px; scroll-margin-top: 96px; text-wrap: balance; }
.art-body > h2:first-child { margin-top: 36px; }
.prose-wrap p + p, .art-body p + p, .prose-wrap p + ul, .art-body p + ul, .prose-wrap ul + p, .art-body ul + p { margin-top: 14px; }
.prose-wrap ul, .art-body ul { padding-left: 1.2em; }
.prose-wrap li + li, .art-body li + li { margin-top: 8px; }
.prose-wrap a, .art-body a, .answer a { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.steps-list { list-style: none; padding: 0; counter-reset: st; display: grid; gap: 10px; }
.steps-list li { counter-increment: st; position: relative; padding-left: 46px; min-height: 32px; }
.steps-list li + li { margin-top: 0; }
.steps-list li::before { content: counter(st); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 15px; }
.key { margin-top: 22px; padding: 18px 20px; border-radius: 20px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; color: var(--ink); }
.key + p, .key + ul { margin-top: 18px; }
.cite { display: inline-flex; gap: 2px; margin-left: 2px; vertical-align: super; font-size: 11.5px; line-height: 1; }
.cite a { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 750; text-decoration: none; }
.cite a:hover { background: var(--accent); color: var(--accent-ink); }
.answer .cite a, .key .cite a { background: var(--page); box-shadow: inset 0 0 0 1px var(--accent-mid); }
.t-ml, .t-fil { font-weight: 650; }
.nw { white-space: nowrap; }

/* tables: scroll sideways if needed; three or more columns stack into labelled blocks on a phone */
.tbl-wrap { margin-top: 20px; overflow-x: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--line); }
.tbl thead th { border-top: 0; background: var(--wash); font-size: 14.5px; color: var(--ink-2); }
.tbl tbody th { font-weight: 700; }
@media (max-width: 599px) {
  .tbl-wrap.cols-3, .tbl-wrap.cols-4 { overflow: visible; box-shadow: none; }
  .cols-3 .tbl thead, .cols-4 .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cols-3 .tbl tr, .cols-4 .tbl tr { display: block; padding: 12px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
  .cols-3 .tbl tr + tr, .cols-4 .tbl tr + tr { margin-top: 10px; }
  .cols-3 .tbl th, .cols-3 .tbl td, .cols-4 .tbl th, .cols-4 .tbl td { display: block; padding: 2px 0; border: 0; }
  .cols-3 .tbl td::before, .cols-4 .tbl td::before { content: attr(data-label) ": "; color: var(--ink-2); font-weight: 600; }
}

/* sources */
.art-sources { margin-top: 56px; padding-top: 24px; border-top: 1.5px solid var(--ink); }
.art-sources h2 { margin-top: 0; font-size: clamp(20px, 2.2vw, 24px); }
.src { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.src li { position: relative; padding-left: 36px; scroll-margin-top: 96px; }
.src li + li { margin-top: 0; }
.src li:target { color: var(--ink); }
.src-n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: 13px; }
.art-note { margin-top: 24px; }

/* ---------- lists of guides and dialogues ---------- */
.guide-list, .dlg-list { margin-top: 8px; }
.rows { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.prose-wrap .rows, .art-body .rows { padding-left: 0; }
.rows .row + .row { margin-top: 0; border-top: 1px solid var(--line); }
.row a { display: grid; gap: 3px; padding: 18px 12px; margin-inline: -12px; border-radius: 18px; color: var(--ink); text-decoration: none; transition: background-color 200ms var(--ease); }
.row a:hover { background: var(--wash); }
.row-tag { justify-self: start; font-size: 13.5px; font-weight: 700; color: var(--accent-deep); }
.row-title { font-size: clamp(19px, 2.1vw, 22px); font-weight: 750; letter-spacing: -0.015em; line-height: 1.25; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color 200ms var(--ease); }
.row a:hover .row-title { text-decoration-color: var(--accent); }
.row-sum { color: var(--ink-2); }
.row-meta { font-size: 14px; color: var(--ink-2); }
@media (min-width: 800px) { .dlg-list .row a { grid-template-columns: 12em minmax(0, 1fr); column-gap: 24px; } .dlg-list .row-tag { grid-row: span 3; padding-top: 4px; } }

.gl-band { display: grid; gap: 18px; align-items: center; margin-top: 48px; padding: clamp(22px, 3.4vw, 32px); border-radius: 28px; background: var(--wash); }
@media (min-width: 800px) { .gl-band { grid-template-columns: minmax(0, 1fr) auto; } }
.gl-band h2 { margin: 0 0 6px; }
.gl-band p { color: var(--ink-2); }

/* ---------- language page ---------- */
.lang-head .display { font-size: clamp(36px, 8vw, 68px); }
.lh-native { display: block; margin-bottom: 6px; font-size: 0.62em; color: var(--accent-deep); }
.ai-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; max-width: 46em; padding: 14px 18px; border-radius: 18px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.ai-note strong { color: var(--ink); }
.ai-note svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--accent-deep); stroke-width: 2; stroke-linecap: round; }

/* ---------- guide pages ---------- */
.crumbs a { color: var(--ink-2); }
.crumbs { margin-bottom: 16px; }
.art-h1 { max-width: 15em; font-size: clamp(34px, 7vw, 62px); }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.art-meta span { display: inline-flex; align-items: center; gap: 6px; }
.art-meta svg { margin-top: 0; stroke: var(--ink-2); }
.art-grid { display: grid; gap: 32px; padding-bottom: clamp(48px, 7vw, 88px); }
@media (min-width: 1000px) { .art-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; } }
.art-aside { display: none; }
@media (min-width: 1000px) { .art-aside { display: block; } .toc { position: sticky; top: 100px; } }
.toc-h { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1.5px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: color 150ms var(--ease), border-color 150ms var(--ease); }
.toc a:hover { color: var(--ink); border-left-color: var(--accent); }
.practise-band { background: var(--accent-soft); }
.practise-in { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .practise-in { grid-template-columns: minmax(0, 1fr) auto; } }
.practise-actions, .next-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.related .rows { max-width: 48em; }
.related h2 { margin-bottom: 8px; }

/* ---------- dialogue pages ---------- */
.dlg-h1 { max-width: 14em; font-size: clamp(34px, 7.4vw, 64px); }
.dlg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dlg-scene { margin-top: 16px; max-width: 40em; color: var(--ink-2); }
.dlg-scene strong { color: var(--ink); }
.dlg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: clamp(48px, 7vw, 88px); }
@media (min-width: 1000px) { .dlg-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } }
.dlg-main .ai-note { margin-top: 0; }
.dlg-tools { display: inline-flex; gap: 2px; margin-top: 22px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.mode-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 15.5px; color: var(--ink); transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.mode-btn:hover { background: var(--wash); }
.mode-btn[aria-pressed="true"] { background: var(--ink); color: var(--page); }
@media (max-width: 399px) { .mode-btn { padding: 0 12px; font-size: 14.5px; } }

.dlg { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.seg { padding: clamp(16px, 2.6vw, 22px); border-radius: 22px; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 96px; }
.seg.is-lote { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-mid); }
@media (min-width: 720px) { .seg.is-en { margin-right: 8%; } .seg.is-lote { margin-left: 8%; } }
.seg-head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.seg-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--page); font-weight: 800; font-size: 13.5px; flex: none; }
.seg.is-lote .seg-n { background: var(--accent); color: var(--accent-ink); }
.seg-who { font-weight: 750; color: var(--ink); }
.seg-lang::before { content: "· "; }
.seg-body { display: grid; margin-top: 10px; }
.seg-text, .seg-cover { grid-area: 1 / 1; }
.seg-text { font-size: clamp(18px, 2.1vw, 20px); line-height: 1.55; color: var(--ink); }
.seg-text:lang(ml) { line-height: 1.8; }
.seg-cover { display: none; align-self: stretch; align-content: center; padding: 14px 16px; border-radius: 14px; background: repeating-linear-gradient(135deg, var(--wash) 0 10px, var(--wash-2) 10px 20px); font-weight: 700; color: var(--ink); }
.seg-model { margin-top: 12px; }
.seg-model summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; color: var(--accent-deep); box-shadow: inset 0 0 0 1.5px var(--accent-mid); background: var(--page); transition: box-shadow 150ms var(--ease); }
.seg-model summary::-webkit-details-marker { display: none; }
.seg-model summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); font-size: 17px; line-height: 1; transition: transform 200ms var(--ease); }
.seg-model[open] summary::before { transform: rotate(45deg); }
.seg-model summary:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.seg-model summary span { font-weight: 500; color: var(--ink-2); }
.seg-model p { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; line-height: 1.55; }
.seg-model p:lang(ml) { line-height: 1.8; }
@media (prefers-reduced-motion: no-preference) { .seg-model[open] p { animation: sweep-in 420ms var(--ease) both; } }

/* drill mode: one segment at a time, the text hidden on request, a 5-second ring */
.dlg.is-drill .seg { display: none; }
.dlg.is-drill .seg.is-cur { display: block; margin-inline: 0; }
.seg.is-hidden .seg-text { visibility: hidden; }
.seg.is-hidden .seg-cover { display: grid; }
.drill-bar { display: grid; gap: 14px; margin-top: 12px; padding: 14px 16px 16px; border-radius: 22px; background: var(--page); box-shadow: var(--sh-1), inset 0 0 0 1.5px var(--accent-mid); scroll-margin-bottom: 16px; }
.drill-top { display: flex; align-items: center; gap: 12px; }
.drill-pos { flex: 1; font-weight: 700; font-size: 15.5px; line-height: 1.35; }
.drill-stop { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--page); font-weight: 700; font-size: 14.5px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.drill-stop:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.drill-ring { position: relative; flex: none; width: 48px; height: 48px; }
.drill-ring .ring { width: 48px; height: 48px; }
.drill-ring-t { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: var(--accent-deep); }
.drill-ring:not(.is-running):not(.is-over) .ring-fg { stroke-dashoffset: 0; }
.drill-ring.is-running .ring-fg { animation: ring-down 5s linear both; }
.drill-ring.is-over .ring-fg { stroke-dashoffset: 100; }
@keyframes ring-down { to { stroke-dashoffset: 100; } }
.drill-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.drill-actions .btn { flex: 1 1 auto; }
@media (min-width: 720px) { .drill-actions .btn { flex: 0 0 auto; } }
.dlg-aside { display: grid; gap: 28px; align-content: start; }
.terms-box, .more-box { padding: 20px 22px; border-radius: 22px; background: var(--wash); }
.terms { margin: 12px 0 10px; display: grid; gap: 0; }
.terms div { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.terms dt { font-weight: 700; }
.terms dd { margin: 0; color: var(--ink); }
.more-box ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.more-box [aria-current] { font-weight: 750; }
.next-in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .next-in { grid-template-columns: minmax(0, 1fr) auto; } }
.next-in h2 a { text-decoration: none; }
.next-in h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- word list ---------- */
.gl-find { margin-top: 26px; max-width: 40rem; }
.gl-find label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 15.5px; }
.gl-field { position: relative; }
.gl-field svg { position: absolute; left: 20px; top: 50%; width: 24px; height: 24px; margin-top: -12px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.gl-field input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 60px; padding: 8px 20px 8px 56px; border: 0; border-radius: 999px; background: var(--page); color: var(--ink); font-size: 19px; font-weight: 600; box-shadow: var(--sh-1), inset 0 0 0 2px var(--line-2); transition: box-shadow 200ms var(--ease); }
.gl-field input:focus { outline: none; box-shadow: var(--sh-1), inset 0 0 0 2.5px var(--accent), 0 0 0 6px var(--accent-mid); }
.gl-field input::-webkit-search-decoration { -webkit-appearance: none; }
.gl-find .fine { margin-top: 10px; min-height: 1.6em; }
.chips-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; background: var(--page); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow 150ms var(--ease); }
.chip-link:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
html.is-filtering .chips-nav { display: none; }
.gl-wrap { padding-bottom: clamp(56px, 8vw, 104px); display: grid; gap: 8px; }
@media (min-width: 900px) { .gl-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .gl-empty { grid-column: 1 / -1; } }
.gl-sec { scroll-margin-top: 96px; padding-top: 22px; }
.gl-sec h2 { font-weight: 800; font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -0.02em; margin-bottom: 10px; }
.gl-tbl { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.gl-tbl th, .gl-tbl td { text-align: left; vertical-align: top; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.gl-tbl thead th { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.gl-tbl tbody th { width: 44%; font-weight: 650; }
.gl-tbl td { font-size: 17px; }
.gl-tbl td:lang(ml) { line-height: 1.7; }
.gl-empty { padding: 24px 0; color: var(--ink-2); font-weight: 600; }