/* Разбор по группам подобных членов (макет урока 03): строка на группу, метка и выкладка одним цветом.
   Цвета совпадают с макросами \first … \fourth в math-render.js; цвет дублирует метка «с x²». */
.visual-explanation {
    --visual-1: #1f5fd0; --visual-2: #00747a; --visual-3: #7a3db8; --visual-4: #9a5200;
    display: grid; gap: 8px; margin: 10px 0; min-width: 0; max-width: 100%;
}
.visual-explanation__source { margin: 0 0 2px; min-width: 0; }
.visual-explanation__groups { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.visual-explanation__group {
    display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); align-items: stretch;
    border-radius: 12px; overflow: hidden; background: color-mix(in srgb, currentColor 8%, var(--surface)); min-width: 0;
}
.visual-explanation__chip {
    display: flex; align-items: center; justify-content: center; gap: .25em; padding: 8px 12px;
    background: color-mix(in srgb, currentColor 14%, var(--surface)); font-weight: 600; font-size: 17px; white-space: nowrap;
}
.visual-explanation__formula { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 8px 14px; font-size: 20px; line-height: 1.45; }
.visual-explanation__part { white-space: nowrap; }
.visual-explanation__formula--flow { display: block; overflow: visible; }
.visual-explanation__source .visual-explanation__formula, .visual-explanation__result .visual-explanation__formula { padding: 0; }
.visual-explanation__note { grid-column: 2; padding: 0 14px 8px; margin-top: -6px; color: var(--muted); font-size: 13px; }
.visual-explanation__result { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 0; min-width: 0; }
.visual-explanation__result-label { flex-shrink: 0; color: var(--muted); font-size: 15px; }
.visual-explanation__result .visual-explanation__formula { flex: 1 1 auto; font-size: 20px; }
.visual-explanation__tone--1 { color: var(--visual-1); }
.visual-explanation__tone--2 { color: var(--visual-2); }
.visual-explanation__tone--3 { color: var(--visual-3); }
.visual-explanation__tone--4 { color: var(--visual-4); }
.visual-explanation__tone--neutral { color: var(--text); }
.visual-explanation__formula:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Полные подписи в статье: смысл группы виден до формулы, старый вид урока сохранён. */
.visual-explanation--explanatory .visual-explanation__group { grid-template-columns: 1fr; }
.visual-explanation--explanatory .visual-explanation__chip { display: block; padding: 10px 14px; white-space: normal; font-size: 16px; }
.visual-explanation--explanatory .visual-explanation__formula { padding: 12px 14px; font-size: 20px; }
.visual-explanation--explanatory .visual-explanation__formula.math-copyable { padding-inline-end: 52px; }
.visual-explanation--explanatory .visual-explanation__source .visual-explanation__formula { min-height: 44px; }
.visual-explanation--explanatory .visual-explanation__group .math-copy-content { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; }
.visual-explanation--explanatory .visual-explanation__note { grid-column: 1; }
@media (max-width: 520px) {
    .visual-explanation__group { grid-template-columns: minmax(52px, auto) minmax(0, 1fr); }
    .visual-explanation__chip { padding: 6px 9px; font-size: 15px; }
    .visual-explanation__formula { padding: 7px 10px; font-size: 18px; }
    .visual-explanation__note { padding: 0 10px 7px; }
    .visual-explanation--explanatory .visual-explanation__formula { font-size: 18px; }
}