/*
 * Секции страницы «Программа» (шаблон page-program). Грузится после base.css.
 *
 * @package easy-peasy
 */

/* ==========================================================================
   Страница «Программа»: hero (без формы), переключатель языков, экзам-якорь,
   анатомия урока, точки входа. Опирается на общие токены (--primary/--blue/…).
   ========================================================================== */


/* --- Дисклеймер под лестницей уровней --- */
.exam-disclaimer{display:flex;gap:11px;align-items:flex-start;max-width:940px;margin:18px auto 0;font-size:.82rem;line-height:1.55;color:var(--text-muted)}
.exam-disclaimer svg{width:17px;height:17px;color:var(--text-muted);flex:none;margin-top:2px}

/* ===========================================================================
   Лестница уровней — master-detail «Level Explorer» (страница «Программа»)
   Две оси: язык обучения (переключатель выше) × уровень (список слева).
   Per-language акцент — --lang-accent (совпадает с .lang-tab/.exam-panel).
   =========================================================================== */
.level-explorer{--lang-accent:#DC2647;max-width:1040px;margin:0 auto}
.level-explorer[data-lang="english"]{--lang-accent:var(--blue)}
/* Немецкий: затемнён до #A5730A (vs #C7920A у пилюль) ради контраста белого
   текста на акцентной заливке шапки/рельса — WCAG AA. */
.level-explorer[data-lang="german"]{--lang-accent:#A5730A}
.level-explorer[data-lang="spanish"]{--lang-accent:var(--violet)}
.level-explorer[data-lang="french"]{--lang-accent:var(--green)}
/* Тёмная тема: захардкоженные polish/german не «светлеют» сами (в отличие от
   var(--blue/violet/green)), поэтому осветляем их для контраста тёмного текста
   (--on-primary) на заливке. */
[data-theme="dark"] .level-explorer[data-lang="polish"]{--lang-accent:#FF6B70}
[data-theme="dark"] .level-explorer[data-lang="german"]{--lang-accent:#E0A93C}
.lx-grid{display:flex;flex-direction:column;gap:16px}

/* --- Ось «Уровень»: список ступеней. Мобайл — горизонтальный скролл-таб --- */
.lx-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--lang-accent) 40%,transparent) transparent}
.lx-rail::-webkit-scrollbar{height:6px}
.lx-rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--lang-accent) 40%,transparent);border-radius:99px}
.lx-step{scroll-snap-align:start;flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 13px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.lx-step:hover{border-color:color-mix(in srgb,var(--lang-accent) 55%,var(--line));transform:translateY(-1px)}
.lx-step:focus-visible{outline:none;box-shadow:var(--ring)}
.lx-step-num{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--text-muted);font-family:var(--font-head);font-weight:800;font-size:.82rem}
.lx-step-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.lx-step-name{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.92rem;line-height:1.15;white-space:nowrap}
.lx-step-star{width:13px;height:13px;color:var(--amber);flex:none}
.lx-step-gloss{display:none;font-size:.76rem;color:var(--text-muted);line-height:1.2;white-space:nowrap}
.lx-step .level-badge{flex:none;width:auto;height:auto;padding:3px 9px;font-size:.78rem;border-radius:var(--r-pill)}
.lx-step[aria-selected="true"]{background:var(--lang-accent);border-color:transparent;color:var(--on-primary);box-shadow:var(--sh-sm)}
/* см. комментарий у .lx-head-num: плашка подмешивает --text, не --on-primary */
.lx-step[aria-selected="true"] .lx-step-num{background:color-mix(in srgb,var(--text) 30%,transparent);color:var(--on-primary)}
.lx-step[aria-selected="true"] .lx-step-gloss{color:color-mix(in srgb,var(--on-primary) 80%,transparent)}
.lx-step[aria-selected="true"] .lx-step-star{color:var(--on-primary)}
/* Метка CEFR на выбранной ступени: сплошная плашка --paper, цвет текста остаётся
   собственный (--badge-*-text из .chip-a1…c1). Было — полупрозрачная белая плашка
   с белым же текстом: на акцентной заливке это давало 3.70:1 (правка 16.08.2026,
   дефект D-2). Заодно возвращает цветовое кодирование уровня выбранной ступени:
   замеры 6.34–6.70:1 в светлой и 6.45–10.27:1 в тёмной теме. */
.lx-step[aria-selected="true"] .level-badge{background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.16)}

/* --- Детальная колонка --- */
.lx-detail{min-width:0}

/* Стандартизированный формат курса (один компонент, не дублируется по уровням) */
.lx-format{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:15px 17px;margin-bottom:16px}
.lx-format-h{display:block;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:13px}
.lx-format-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.lx-param{display:flex;gap:9px;align-items:flex-start;min-width:0}
.lx-param-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--lang-accent) 13%,transparent);color:var(--lang-accent)}
.lx-param-ic svg{width:17px;height:17px}
.lx-param-txt{display:flex;flex-direction:column;min-width:0}
.lx-param-label{font-size:.72rem;color:var(--text-muted);line-height:1.3}
.lx-param-val{font-size:.9rem;font-weight:800;color:var(--text);line-height:1.25;font-variant-numeric:tabular-nums}

/* Панели уровней */
.lx-panels{position:relative}
.lx-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(18px,3vw,26px);overflow:hidden}
.lx-panel[hidden]{display:none}
html:not(.js) .lx-panel[hidden]{display:block}
html:not(.js) .lx-panel{margin-bottom:16px}
.lx-panel.is-target{border-color:transparent}
.lx-variant{display:flex;flex-direction:column;gap:22px}
.lx-variant[hidden]{display:none}
html:not(.js) .lx-variant[hidden]:not([data-ds="phase2"]){display:flex;margin-top:22px;padding-top:22px;border-top:1px dashed var(--line)}

/* Индикатор целей «Какого уровня Вам хватит для» — над заголовком уровня.
   Главный практический акцент панели; чипы активируются с порога цели. */
.lx-goals{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;margin-bottom:18px}
.lx-goals-h{font-family:var(--font-head);font-weight:800;font-size:.86rem;letter-spacing:.01em;color:var(--text)}
.lx-goals-chips{display:flex;flex-wrap:wrap;gap:8px}
.lx-goal{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;line-height:1;padding:7px 13px;border-radius:var(--r-pill);border:1.5px solid transparent;transition:background .16s ease,border-color .16s ease,color .16s ease}
.lx-goal-star{width:12px;height:12px;flex:none}
/* Достигнут порог — залит акцентом языка */
.lx-goal.is-on{background:var(--lang-accent);border-color:transparent;color:var(--on-primary)}
/* Ниже порога — контурный/приглушённый */
.lx-goal.is-off{background:transparent;border-color:color-mix(in srgb,var(--lang-accent) 30%,var(--line));color:var(--text-muted)}
@media(prefers-reduced-motion:reduce){.lx-goal{transition:none}}

/* Шапка панели — акцентная заливка */
.lx-head{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--lang-accent);color:var(--on-primary);border-radius:var(--r-lg);padding:15px 19px}
.lx-head-main{display:flex;flex-direction:column;gap:7px;min-width:0}
.lx-head-name{font-family:var(--font-head);font-weight:800;font-size:clamp(1.1rem,.98rem + .7vw,1.45rem);line-height:1.15;color:var(--on-primary);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Плашки внутри акцентной шапки затемняют/осветляют заливку через --text, а не
   через --on-primary (правка 16.08.2026, дефект D-2). Раньше плашка подмешивала
   --on-primary, т.е. осветляла фон под собственным светлым текстом: белое на
   белом-20% поверх акцента давало 3.6–3.7:1. --text противоположен --on-primary
   в обеих темах, поэтому плашка всегда уводит фон ОТ цвета текста.
   Замеры на пяти акцентах языков: светлая 5.4–7.6:1, тёмная 8.9–12.2:1. */
.lx-head-num{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--text) 30%,transparent);font-size:.92rem;font-weight:800}
.lx-head-cefr{flex:none;font-family:var(--font-head);font-weight:800;font-size:1.1rem;letter-spacing:.02em;padding:7px 15px;border-radius:var(--r-md);background:color-mix(in srgb,var(--text) 30%,transparent);color:var(--on-primary)}
/* плашка — через --text, как .lx-head-num/.lx-head-cefr выше */
.lx-flag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;background:color-mix(in srgb,var(--text) 30%,transparent);color:var(--on-primary);padding:4px 10px;border-radius:var(--r-pill)}
.lx-flag svg{width:12px;height:12px}

/* Прогресс-бары */
.lx-bars{display:grid;gap:14px}
.lx-bar{display:flex;flex-direction:column;gap:7px}
.lx-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lx-bar-label{font-size:.82rem;font-weight:600;color:var(--text-muted)}
.lx-bar-val{font-family:var(--font-head);font-weight:800;font-size:.92rem;color:var(--text);font-variant-numeric:tabular-nums}
.lx-bar-track{height:9px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--lang-accent) 13%,var(--surface-2));overflow:hidden}
.lx-bar-fill{display:block;height:100%;border-radius:var(--r-pill);min-width:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--lang-accent) 62%,#fff),var(--lang-accent));transition:width .55s cubic-bezier(.4,0,.2,1)}

/* Чек-листы «Темы» / «Грамматика» — 2 колонки на десктопе */
.lx-cols{display:grid;gap:22px}
.lx-block-h{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:13px}
.lx-block-h svg{width:16px;height:16px;color:var(--lang-accent)}
.lx-list{list-style:none;margin:0;padding:0;display:grid;gap:9px 22px}
.lx-list li{display:flex;gap:9px;align-items:flex-start;font-size:.89rem;line-height:1.45;color:var(--text-muted)}
.lx-check{width:16px;height:16px;flex:none;margin-top:2px;color:var(--lang-accent)}

/* Результат — акцентный callout */
.lx-result{background:color-mix(in srgb,var(--lang-accent) 7%,var(--surface));border-top:1px solid color-mix(in srgb,var(--lang-accent) 20%,var(--line));border-right:1px solid color-mix(in srgb,var(--lang-accent) 20%,var(--line));border-bottom:1px solid color-mix(in srgb,var(--lang-accent) 20%,var(--line));border-left:4px solid var(--lang-accent);border-radius:var(--r-lg);padding:15px 18px}
.lx-result-h{display:block;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
.lx-result p{font-size:.94rem;line-height:1.6;color:var(--text)}
.lx-result b{font-weight:800;color:var(--text)}

/* Заглушка phase2 (нем./исп./фр.) */
.lx-notice{background:var(--surface-2);border:1px dashed color-mix(in srgb,var(--lang-accent) 40%,var(--line));border-radius:var(--r-lg);padding:18px}
.lx-notice>svg{width:26px;height:26px;color:var(--lang-accent);margin-bottom:8px}
.lx-notice p{font-size:.94rem;line-height:1.6;color:var(--text)}
.lx-notice p b{font-weight:800}
.lx-bars-note{display:block;margin-top:10px;font-size:.78rem;color:var(--text-muted)}
.lx-notice-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lx-notice-cta .btn{min-height:44px}

/* --- Планшет: списки тем/грамматики в 2 колонки --- */
@media(min-width:620px){
  .lx-list{grid-template-columns:1fr 1fr}
}
@media(min-width:560px){
  .lx-bars{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media(min-width:600px){
  .lx-format-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .lx-format-grid{grid-template-columns:repeat(5,1fr);gap:14px 10px}
}

/* --- Десктоп: вертикальный рельс + деталь в две колонки --- */
@media(min-width:1024px){
  .lx-grid{display:grid;grid-template-columns:270px 1fr;gap:24px;align-items:start}
  .lx-rail{flex-direction:column;overflow:visible;gap:8px;padding:0;position:sticky;top:92px;scroll-snap-type:none}
  .lx-step{width:100%;min-height:56px;padding:10px 14px}
  .lx-step-name{white-space:normal}
  .lx-step-gloss{display:block;white-space:normal}
  .lx-step .level-badge{margin-left:auto}
}
@media(max-width:1023.98px){
  .lx-step .level-badge{order:3}
}

@media(prefers-reduced-motion:reduce){
  .lx-step,.lx-bar-fill{transition:none}
}