/* ============================================================
   МОДАЛКА ПОЯСНЕННЯ — редизайн.
   ------------------------------------------------------------
   Що було не так: пояснення виглядало як суцільна стіна тексту.
   Дві секції («чому правильно» / «чому інші — ні») були
   візуально однакові, тож головна відповідь не читалась з
   першого погляду, а розбір невірних варіантів зливався з нею.
   Плюс власна геометрія (свої відступи, радіуси, хрестик) не
   збігалася з рештою модалок, і трималось це на суцільних
   !important — бо кожна сторінка мала свої інлайн-стилі.

   Що зараз:
     • оболонку (картка, хрестик, заголовок, бекдроп, мобільний
       аркуш) задає спільний assets/common/modal.css;
     • тут лишився лише ВМІСТ пояснення;
     • «чому правильно» — акцентна картка з лінією збоку,
       читається першою;
     • невірні варіанти — згорнуті картки з міткою «×»,
       розгортаються по одній;
     • квота знизу — тиха службова смужка, не конкурує з текстом.

   Класи задає explain-render.js (.explain-wrap / .ex-section /
   .ex-others / details / summary / .ex-empty) — розмітку НЕ
   міняли, тому JS лишається без змін.
============================================================ */

/* Сумісність: деякі сторінки мають власну обгортку тіла */
#explainModal #explainBody,
#explainModal .ex-body,
#explainModal .ex-wrap{ padding:0; background:transparent; border:0; }

/* Залишок від старого bottom-sheet — ховаємо */
#explainModal .sheet-handle,
#explainModal .sh{ display:none; }

/* ── Загальний контейнер пояснення ─────────────────────────── */
.explain-wrap{
  display:flex; flex-direction:column; gap:14px;
  font-size:14.5px; line-height:1.62; color:var(--ms-ink, #0f172a);
}
.explain-wrap p{ margin:0 0 9px; }
.explain-wrap p:last-child{ margin-bottom:0; }
.explain-wrap ol,
.explain-wrap ul{ margin:8px 0 0; padding-left:20px; }
.explain-wrap li{ margin:0 0 5px; }
.explain-wrap code{
  padding:1px 5px; border-radius:5px; font-size:.9em;
  background:var(--ms-surface-2, #f6faf9); border:1px solid var(--ms-line, #e2e8f0);
}
.explain-wrap img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0; }

/* ── «Чому це правильно» — головний блок ───────────────────── */
.explain-wrap .ex-section{
  position:relative;
  padding:14px 16px 14px 17px;
  border-radius:12px;
  background:var(--ms-accent-soft, #ecfdf5);
  border:1px solid var(--ms-line, #e2e8f0);
}
/* Акцентна лінія збоку — око чіпляється за неї першою */
.explain-wrap .ex-section::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; border-radius:99px; background:var(--ms-accent, #0d9488);
}
.explain-wrap .ex-section h4{
  margin:0 0 8px;
  font-size:11.5px; font-weight:800; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ms-accent-ink, #0f766e);
}

/* ── «Чому інші варіанти — ні» ─────────────────────────────── */
.explain-wrap .ex-others{
  padding:0; background:transparent; border:0;
}
.explain-wrap .ex-others::before{ display:none; }
.explain-wrap .ex-others h4{
  margin:0 0 9px; padding-left:2px;
  font-size:11.5px; font-weight:800; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ms-muted, #64748b);
}

.explain-wrap details{
  margin:0 0 7px;
  border:1px solid var(--ms-line, #e2e8f0); border-radius:11px;
  background:var(--ms-surface, #fff);
  overflow:hidden;
  transition:border-color .15s ease;
}
.explain-wrap details:last-child{ margin-bottom:0; }
.explain-wrap details[open]{ border-color:var(--ms-soft, #94a3b8); }

.explain-wrap summary{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px;
  cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--ms-ink, #0f172a);
  transition:background .15s ease;
}
.explain-wrap summary:hover{ background:var(--ms-surface-2, #f6faf9); }
.explain-wrap summary::-webkit-details-marker{ display:none; }

/* Мітка «невірно» — геометричний глиф, не емодзі */
.explain-wrap summary::before{
  content:'\00D7';
  flex:none; width:21px; height:21px; border-radius:6px;
  display:grid; place-items:center;
  font-size:14px; font-weight:700; line-height:1;
  background:var(--ms-danger-soft, #fff7ed); color:var(--ms-danger, #b45309);
}
/* Стрілка розгортання — праворуч */
.explain-wrap summary::after{
  content:''; margin-left:auto; flex:none;
  width:7px; height:7px;
  border-right:2px solid var(--ms-soft, #94a3b8);
  border-bottom:2px solid var(--ms-soft, #94a3b8);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.explain-wrap details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }

.explain-wrap details > div{
  padding:0 13px 12px 44px;
  font-size:13.8px; line-height:1.6; color:var(--ms-muted, #64748b);
}

/* ── Порожньо ──────────────────────────────────────────────── */
.explain-wrap .ex-empty,
#explainModal .ex-empty{
  padding:26px 14px; text-align:center;
  font-size:14px; color:var(--ms-soft, #94a3b8);
}

/* ── Заблокований блок (заклик прив'язати Telegram / підписка) ──
   Самодостатній: вставляється прямо в #explainBody, поза .explain-wrap.
   Раніше повторно використовував .ex-section і після редизайну
   виглядав як зелена картка «правильна відповідь» — тепер окремий,
   із власною іконкою та помітною кнопкою. */
.ex-lock{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:11px; padding:26px 20px 22px;
}
.ex-lock__ic{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
}
.ex-lock--tg    .ex-lock__ic{ background:#e8f3fc; color:#229ed9; }
.ex-lock--quota .ex-lock__ic{ background:var(--ms-danger-soft, #fff7ed); color:var(--ms-danger, #b45309); }
.ex-lock--sub   .ex-lock__ic{ background:var(--ms-accent-soft, #ecfdf5); color:var(--ms-accent-ink, #0f766e); }
body.dark-mode .ex-lock--tg .ex-lock__ic{ background:#12303f; }

.ex-lock__h{
  font-size:16.5px; font-weight:800; letter-spacing:-.01em;
  color:var(--ms-ink, #0f172a);
}
.ex-lock__t{
  max-width:340px; font-size:14px; line-height:1.6;
  color:var(--ms-muted, #64748b);
}
.ex-lock__t b{ color:var(--ms-ink, #0f172a); font-weight:700; }

.ex-lock__btn{
  margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:11px;
  font-size:14.5px; font-weight:700; text-decoration:none;
  transition:background .15s ease, transform .1s ease;
}
.ex-lock__btn:active{ transform:translateY(1px); }
.ex-lock--tg    .ex-lock__btn{ background:#229ed9; color:#fff; }
.ex-lock--tg    .ex-lock__btn:hover{ background:#1c8bc0; }
.ex-lock--quota .ex-lock__btn,
.ex-lock--sub   .ex-lock__btn{ background:var(--ms-accent, #0d9488); color:#fff; }
.ex-lock--quota .ex-lock__btn:hover,
.ex-lock--sub   .ex-lock__btn:hover{ background:var(--ms-accent-ink, #0f766e); }

/* ── Квота безкоштовних пояснень ───────────────────────────── */
.ex-quota{
  display:flex; align-items:center; gap:7px;
  margin-top:2px; padding:9px 12px;
  border-radius:10px;
  background:var(--ms-surface-2, #f6faf9); border:1px solid var(--ms-line, #e2e8f0);
  font-size:12.5px; color:var(--ms-muted, #64748b);
}
.ex-quota b{ color:var(--ms-ink, #0f172a); font-weight:700; }
.ex-quota a{ color:var(--ms-accent-ink, #0f766e); font-weight:600; text-decoration:none; }
.ex-quota a:hover{ text-decoration:underline; }

@media (max-width:600px){
  .explain-wrap{ font-size:14px; gap:12px; }
  .explain-wrap .ex-section{ padding:12px 13px 12px 15px; }
  .explain-wrap details > div{ padding-left:13px; }
}

/* ═══════════════════════════════════════════════════════════
   ШІ-ПОЯСНЕННЯ — сучасний вигляд розбору.
   Блок іде в кінці файлу, тож перекриває базові правила вище
   без !important. Токени спільні (--ms-*) — темна тема сама.
   ═══════════════════════════════════════════════════════════ */

.explain-wrap{
  gap:16px;
  font-size:15px;
  line-height:1.7;
  /* Текст займає ВСЮ ширину модалки. Раніше ширину тут обмежувала межа в 66 символів —
     через це в широкому діалозі праворуч лишалась порожнеча. Комфортну
     довжину рядка задає сама ширина модалки (див. --lg у modal.css),
     а не обмеження всередині. */
  width:100%;
}
.explain-wrap p{ margin:0 }
.explain-wrap p + p{ margin-top:10px }

/* Вступний абзац — просто трохи більший і напівжирний. Раніше він був
   у зеленій рамці з фоном і смужкою: у модалці це виглядало як банер,
   а не як початок тексту. */
.explain-wrap > p:first-child{
  margin:0 0 2px;
  font-size:15.5px; font-weight:600; color:var(--ms-ink,#0f172a);
}
.explain-wrap > p:first-child b{ color:var(--ms-accent-ink,#0f766e); font-weight:800 }

/* Секція розбору — без підкладки й рамки, лише відступ і заголовок.
   Вкладені сірі картки всередині білої модалки читались як шум. */
.explain-wrap .ex-section,
.explain-wrap .ex-others{
  padding:0; background:none; border:0; border-radius:0;
}
.explain-wrap .ex-section::before,
.explain-wrap .ex-others::before{ display:none }
.explain-wrap .ex-section h4,
.explain-wrap .ex-others h4{
  display:block; margin:0 0 7px; padding:0;
  background:none; border:0; border-radius:0;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ms-muted,#64748b);
}

/* Списки — компактні маркери акцентного кольору */
.explain-wrap ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px }
.explain-wrap li{
  position:relative; margin:0; padding-left:18px;
  font-size:14.5px; line-height:1.65;
}
.explain-wrap li::before{
  content:''; position:absolute; left:3px; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:var(--ms-accent,#0d9488); opacity:.7;
}

/* «Інші варіанти» — рядки з тонким роздільником, без рамок і тіней */
.explain-wrap details{
  margin:0; padding:0;
  background:none; border:0; border-radius:0;
  border-top:1px solid var(--ms-line,#e2e8f0);
  box-shadow:none;
}
.explain-wrap details:first-of-type{ border-top:0 }
.explain-wrap details + details{ margin-top:0 }
.explain-wrap details[open]{ border-color:var(--ms-line,#e2e8f0); box-shadow:none }
.explain-wrap summary{
  padding:11px 0;
  font-size:14.5px; font-weight:600; color:var(--ms-ink,#0f172a);
  border-radius:0;
}
.explain-wrap summary:hover{ background:none; color:var(--ms-accent-ink,#0f766e) }
.explain-wrap details > div{ padding:0 0 12px; font-size:14.5px; line-height:1.65;
                             color:var(--ms-muted,#64748b) }

/* Код і формули */
.explain-wrap code{
  padding:2px 7px; border-radius:7px;
  background:var(--ms-surface-2,#f6faf9);
  border:1px solid var(--ms-line,#e2e8f0);
  font:600 13px ui-monospace,Menlo,monospace; color:var(--ms-accent-ink,#0f766e);
}
.explain-wrap img{ border-radius:12px; border:1px solid var(--ms-line,#e2e8f0) }

/* Порожній стан */
#explainModal .ex-empty{
  padding:44px 16px; text-align:center;
  font-size:14.5px; font-weight:500; color:var(--ms-soft,#94a3b8);
}

/* ── Телефон: щільніше ────────────────────────────────────────
   Модалка тепер на весь екран (assets/common/modal.css), тож
   поля з боків уже не з'їдають ширину. Тут прибираємо зайві
   внутрішні відступи секцій і трохи стискаємо міжрядковий
   інтервал — щоб на екран влазило більше тексту, а не повітря.
   ─────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .explain-wrap{ font-size:14px; line-height:1.55; gap:10px }
  .explain-wrap > p:first-child{ padding:10px 11px 10px 13px; font-size:14px }
  .explain-wrap .ex-section{ padding:10px 11px }
  .explain-wrap .ex-section h4{ margin-bottom:5px }
  .explain-wrap ul, .explain-wrap ol{ padding-left:18px }
  .explain-wrap li{ margin-bottom:3px }
  .explain-wrap details > div{ padding-left:10px }
  .explain-wrap p{ margin:0 0 6px }
}
@media (max-width:380px){
  .explain-wrap{ font-size:13.5px; gap:9px }
  .explain-wrap > p:first-child{ padding:9px 10px 9px 11px; font-size:13.5px }
  .explain-wrap .ex-section{ padding:9px 10px }
}