/* A Story of Numbers — chapter-specific additions only.
   Shared tokens, layout and components come from lessons/shared/class8-maths.css (loaded first). */
.dm-explain .son-ic,.dm-explain .son-row,.dm-explain .son-abacus-row{background:transparent}

/* ---- Numeral-symbol components (symbols.js) ---- */
.son-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 6px;margin:10px 0}
.son-ic{height:30px;width:auto;display:block}
.son-ic-stick{height:34px}
.son-egy-group{display:inline-flex;flex-wrap:wrap;gap:4px 6px;padding:2px 8px;border-radius:8px}
.son-egy-group:nth-child(odd){background:rgba(0,0,0,.04)}
.dm-explain .son-egy-group:nth-child(odd){background:rgba(255,255,255,.06)}
.son-more{font-size:13px;color:var(--dm-muted);margin:2px 0 0}
.son-row-meso{gap:8px 14px}
.son-meso-digit{display:inline-flex;align-items:flex-end;gap:2px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.04);min-width:20px;min-height:24px}
.dm-explain .son-meso-digit{background:rgba(255,255,255,.06)}
.son-meso-blank{background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 4px,transparent 4px 8px);min-width:34px}
.dm-explain .son-meso-blank{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 4px,transparent 4px 8px)}
.son-mayan-stack{display:inline-flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid currentColor;border-radius:6px;padding:8px 12px;margin:8px 0}
.son-mayan-level{display:flex;align-items:center;justify-content:center;min-height:20px;border-top:1px dashed rgba(0,0,0,.25)}
.son-mayan-level:first-child{border-top:0}
.dm-explain .son-mayan-level{border-top-color:rgba(255,255,255,.25)}
.son-row-chinese{gap:10px 16px;align-items:center}
.son-chinese-digit{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px}
.son-abacus-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;margin:12px 0}
.son-abacus{background:#FDF3D0;border-radius:10px;max-width:100%;height:auto}
.dm-explain .son-abacus{background:#3A6E5E}
.son-abacus-plus{font-size:22px;font-weight:700;color:var(--dm-ink)}
.dm-explain .son-abacus-plus{color:var(--dm-cream)}
.son-roman{font-family:var(--serif);font-weight:700;letter-spacing:.04em}

@media (max-width:600px){
  .son-ic{height:24px}
  .son-mayan-stack{padding:6px 10px}
}