/* ============================================================
   ЄДИНА СИСТЕМА МОДАЛОК — один дизайн на весь сайт.
   ------------------------------------------------------------
   Проблема, яку це вирішує: модалок 13+, вони розкидані по 4
   вʼюхах, мають три різні структури розмітки
       .modal > .content        + .close-x     (сторінка тесту)
       .modal > .modal-content  + .close       (хаб)
       .rm-overlay > .rm-dialog                (результат)
   і ЧОТИРИ різні способи відкриття з JS:
       .modal--open   — explain / similar / spec / pharm / drug / twin
       .open          — resultModal
       inline display — historyModal / archResultModal
       .active/.is-active — решта сайту
   Раніше поверх цього лежав krok-modals.css — шар !important-
   перекриттів. Він латав симптоми: будь-яка нова модалка знову
   виглядала інакше.

   Тут навпаки: один набір токенів і один вигляд, а всі історичні
   структури та класи-відкривачі підтримані ЯК Є. Тому підключення
   цього файлу нічого не ламає — JS міняти не треба.

   Нова розмітка (для нових модалок) — views/partials/modal.php:
       .ms-modal > .ms-modal__dialog > __head / __body / __foot
============================================================ */

:root{
  --ms-surface:#fff;
  --ms-surface-2:#f6faf9;
  --ms-ink:#0f172a;
  --ms-muted:#64748b;
  --ms-soft:#94a3b8;
  --ms-line:#e2e8f0;
  --ms-accent:#0d9488;
  --ms-accent-ink:#0f766e;
  --ms-accent-soft:#ecfdf5;
  --ms-danger:#b45309;
  --ms-danger-soft:#fff7ed;
  --ms-backdrop:rgba(15,23,42,.62);
  --ms-radius:20px;
  --ms-shadow:0 10px 15px -3px rgba(15,23,42,.12), 0 25px 50px -12px rgba(15,23,42,.28);
}
body.dark-mode{
  --ms-surface:#111827;
  --ms-surface-2:#0f1623;
  --ms-ink:#e5e7eb;
  --ms-muted:#9ca3af;
  --ms-soft:#6b7280;
  --ms-line:#1f2937;
  --ms-accent:#2dd4bf;
  --ms-accent-ink:#5eead4;
  --ms-accent-soft:#052e2b;
  --ms-danger:#fdba74;
  --ms-danger-soft:#2a1a0d;
  --ms-backdrop:rgba(0,0,0,.68);
  --ms-shadow:0 10px 15px -3px rgba(0,0,0,.4), 0 25px 50px -12px rgba(0,0,0,.6);
}

/* ── Оболонка: приховано за замовчуванням ─────────────────── */
.modal,
.ms-modal{
  /* Модалки — найвищий шар. Значення збігається з тим, що вже
     ставив КРОК-хаб (.modal{z-index:10000}): цей файл вантажиться
     ПІСЛЯ krok/css/main.css, тож менше число тихо занизило б усі
     модалки хаба. Закріплена панель прогресу має 1001, тобто
     лишається під діалогом. */
  position:fixed; inset:0; z-index:10000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background:var(--ms-backdrop);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ВСІ історичні способи відкриття — щоб не чіпати JS */
.modal.modal--open, .modal.open, .modal.active, .modal.is-active, .modal.modal-open,
.ms-modal.modal--open, .ms-modal.open, .ms-modal.active, .ms-modal.is-active,
.ms-modal.is-open{
  display:flex;
}
/* historyModal/archResultModal відкриваються інлайновим display —
   інлайн і так перебиває таблицю стилів, тут нічого не треба. */

/* ── Діалог ───────────────────────────────────────────────── */
.modal > .content,
.modal > .modal-content,
.ms-modal__dialog{
  position:relative;
  width:100%; max-width:660px;
  max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--ms-surface);
  color:var(--ms-ink);
  border:1px solid var(--ms-line);
  border-radius:var(--ms-radius);
  box-shadow:var(--ms-shadow);
  overflow:hidden;
  animation:msPop .22s cubic-bezier(.16,1,.3,1);
}
@keyframes msPop{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .modal > .content, .modal > .modal-content, .ms-modal__dialog{ animation:none }
}

/* Розміри — на обгортці модалки */
.ms-modal--sm .ms-modal__dialog, .modal.modal--sm > .content, .modal.modal--sm > .modal-content{ max-width:480px }
.ms-modal--lg .ms-modal__dialog, .modal.modal--lg > .content, .modal.modal--lg > .modal-content{ max-width:820px }

/* ── Заголовок ────────────────────────────────────────────── */
.ms-modal__head{
  position:relative;             /* якір для волоска-розділювача */
  flex:none;
  display:flex; align-items:center; gap:13px;
  padding:20px 60px 16px 24px;
  background:var(--ms-surface);
}
/* Замість суцільної лінії — м'який волосок, що згасає до країв:
   менше «коробки», більше глибини. Прикріплений до низу заголовка,
   тож не залежить від його висоти. */
.ms-modal__head::after{
  content:''; position:absolute; left:24px; right:24px; bottom:0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ms-line) 12%,var(--ms-line) 88%,transparent);
}
.ms-modal__ic{
  flex:none; width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--ms-accent-soft); color:var(--ms-accent-ink);
}
.ms-modal__ic svg{ width:20px; height:20px }
.ms-modal__t{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.25;
              color:var(--ms-ink) }
.ms-modal__sub{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--ms-muted) }

/* Історичні заголовки — той самий вигляд */
.modal .content > h3,
.modal .modal-content > h3{
  flex:none; margin:0;
  padding:17px 52px 15px 20px;
  border-bottom:1px solid var(--ms-line);
  font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ms-ink);
}

/* ── Тіло ─────────────────────────────────────────────────── */
.ms-modal__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:20px 24px 22px;
  font-size:15px; line-height:1.65; color:var(--ms-ink);
}
.modal .content > *:not(h3):not(.close-x):not(.close),
.modal .modal-content > *:not(h3):not(.close-x):not(.close){
  /* історичні модалки: тіло — усе, що не заголовок і не хрестик */
  scrollbar-width:thin;
}
.ms-modal__body::-webkit-scrollbar{ width:8px }
.ms-modal__body::-webkit-scrollbar-thumb{ background:var(--ms-soft); border-radius:99px; opacity:.5 }

/* ── Підвал ───────────────────────────────────────────────── */
.ms-modal__foot{
  flex:none;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:14px 24px 16px;
  border-top:1px solid var(--ms-line);
  background:var(--ms-surface-2);
}
.ms-modal__foot--end{ justify-content:flex-end }

/* ── Хрестик ──────────────────────────────────────────────── */
.modal .close-x, .modal .close,
.ms-modal__x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:transparent; color:var(--ms-muted);
  font-size:21px; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.modal .close-x:hover, .modal .close:hover, .ms-modal__x:hover{
  background:var(--ms-surface-2); color:var(--ms-ink);
}
.modal .close-x:focus-visible, .modal .close:focus-visible, .ms-modal__x:focus-visible{
  outline:2px solid var(--ms-accent); outline-offset:2px;
}

/* ── Кнопки ───────────────────────────────────────────────── */
.ms-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 17px; border-radius:10px;
  font-size:14px; font-weight:600; font-family:inherit;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ms-btn--primary{ background:var(--ms-accent); color:#fff }
.ms-btn--primary:hover{ background:var(--ms-accent-ink); color:#fff }
.ms-btn--ghost{ background:transparent; border-color:var(--ms-line); color:var(--ms-ink) }
/* Небезпечні дії (скинути прогрес, видалити) — окремий вигляд, щоб
   не плутались із головною дією діалогу. */
.ms-btn--danger{ background:#dc2626; color:#fff }
.ms-btn--danger:hover{ background:#b91c1c; color:#fff }
body.dark-mode .ms-btn--danger{ background:#ef4444 }
body.dark-mode .ms-btn--danger:hover{ background:#dc2626 }
.ms-btn--ghost:hover{ background:var(--ms-surface-2) }
.ms-btn:focus-visible{ outline:2px solid var(--ms-accent); outline-offset:2px }

/* ── Мобільний: на ВЕСЬ ЕКРАН ──────────────────────────────
   Було: діалог по центру з полем 14px навколо і заокругленням.
   На телефоні це з'їдало 28px ширини плюс 24px внутрішніх
   падінгів — на вузькому екрані в рядок лізло по два слова,
   а текст тестів і пояснень читати було неможливо.

   Тепер модалка займає весь екран без порожніх полів з боків,
   а внутрішні відступи стиснуті. Уся ширина йде під текст.

   100dvh, а не 100vh: у мобільних браузерах адресний рядок
   ховається/показується, і 100vh дає діалог вищий за видиму
   область — низ (кнопки) опиняється під панеллю браузера.
   Для старих браузерів лишаємо 100vh рядком вище.
   ───────────────────────────────────────────────────────── */
@media (max-width:600px){
  .modal, .ms-modal{ padding:0; align-items:stretch; justify-content:stretch }
  .modal > .content, .modal > .modal-content, .ms-modal__dialog{
    width:100%; max-width:none;
    height:100vh; height:100dvh; max-height:none;
    border:none; border-radius:0;
    box-shadow:none;
    animation:msFade .18s ease;
  }

  /* Заголовок «приклеєний»: довгий текст гортається під ним,
     а кнопка закриття завжди на місці. */
  .ms-modal__head, .modal .content > h3, .modal .modal-content > h3{
    position:sticky; top:0; z-index:3;
    padding:12px 46px 10px 14px;
  }
  .ms-modal__head::after{ left:14px; right:14px }
  .ms-modal__ic{ width:32px; height:32px; border-radius:10px }
  .ms-modal__ic svg{ width:17px; height:17px }
  .ms-modal__t{ font-size:16px }

  .ms-modal__body{ padding:12px 14px 16px }
  .ms-modal__foot{ padding:10px 14px; position:sticky; bottom:0; z-index:3 }
}
@keyframes msFade{ from{ opacity:0 } to{ opacity:1 } }

/* Дуже вузькі екрани — ще трохи тісніше. */
@media (max-width:380px){
  .ms-modal__head, .modal .content > h3, .modal .modal-content > h3{ padding:10px 42px 9px 11px }
  .ms-modal__head::after{ left:11px; right:11px }
  .ms-modal__body{ padding:10px 11px 14px }
  .ms-modal__foot{ padding:9px 11px }
}

/* ── Вміст готових модалок із views/modals/ ──────────────────
   Раніше ці елементи стилізувались інлайном у кожній копії
   модалки — тому копії й розповзлись. Тепер вигляд тут. */
.ms-field{
  width:100%; min-height:130px; resize:vertical;
  padding:11px 13px; border-radius:10px;
  border:1px solid var(--ms-line); background:var(--ms-surface);
  color:var(--ms-ink); font:500 14px/1.55 inherit; outline:none;
}
.ms-field::placeholder{ color:var(--ms-soft) }
.ms-field:focus{ border-color:var(--ms-accent); box-shadow:0 0 0 3px var(--ms-accent-soft) }

.ms-text{ margin:0; font:500 14.5px/1.6 inherit; color:var(--ms-muted) }
.ms-text b, .ms-text strong{ color:var(--ms-ink); font-weight:700 }

/* Підсумкова табличка результату (views/modals/result.php).
   Раніше в кожній копії була своя сітка з інлайновими кольорами. */
.ms-stats{ margin:0; display:flex; flex-direction:column; gap:2px }
.ms-stats > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 2px; border-bottom:1px solid var(--ms-line);
}
.ms-stats > div:last-child{ border-bottom:0 }
.ms-stats dt{ margin:0; font:500 14px inherit; color:var(--ms-muted) }
.ms-stats dd{ margin:0; font:700 16px inherit; color:var(--ms-ink); font-variant-numeric:tabular-nums }
.ms-stats dd.is-ok{ color:#059669 }
.ms-stats dd.is-bad{ color:#dc2626 }
body.dark-mode .ms-stats dd.is-ok{ color:#34d399 }
body.dark-mode .ms-stats dd.is-bad{ color:#f87171 }

/* ── Поки відкрита будь-яка модалка ──────────────────────────
   Клас на <body> ставить assets/common/modal.js.

   Навіщо: сторінка тесту має ЗАКРІПЛЕНУ панель прогресу
   (.progress-controls — position:fixed, z-index:1001) з кнопкою
   «Завершити». Вона стояла поверх відкритої модалки — особливо
   помітно на телефоні, де модалка займає майже весь екран.
   Тепер така панель ховається, поки діалог відкритий, і сама
   повертається, щойно його закрили. */
body.ms-has-modal .progress-controls,
body.ms-has-modal .progress-container,
body.ms-has-modal #finish-test-btn,
body.ms-has-modal #finish-btn,
body.ms-has-modal .finish-btn,
body.ms-has-modal .btn-finish-top{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
}

/* Сторінка під модалкою не має прокручуватись «крізь» неї. */
body.ms-has-modal{ overflow:hidden }

/* ── Тінь під заголовком, що зʼявляється лише при прокрутці ──
   Класичний прийом на двох фонах: перший «приклеєний» до вмісту
   (local) закриває другий, поки тіло не прокручене. Жодного JS. */
.ms-modal__body{
  background:
    linear-gradient(var(--ms-surface) 30%, rgba(255,255,255,0)) top    / 100% 22px no-repeat local,
    linear-gradient(rgba(255,255,255,0), var(--ms-surface) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(15,23,42,.10), rgba(15,23,42,0)) top    / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(15,23,42,.10), rgba(15,23,42,0)) bottom / 100% 9px no-repeat scroll;
}
body.dark-mode .ms-modal__body{
  background:
    linear-gradient(var(--ms-surface) 30%, rgba(0,0,0,0)) top    / 100% 22px no-repeat local,
    linear-gradient(rgba(0,0,0,0), var(--ms-surface) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(0,0,0,.5), rgba(0,0,0,0)) top    / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.5), rgba(0,0,0,0)) bottom / 100% 9px no-repeat scroll;
}

/* Іконка заголовка — мʼяке кільце замість плаского квадрата. */
.ms-modal__ic{ box-shadow:0 0 0 1px var(--ms-line) inset }

/* На телефоні «ручка» аркуша не має налазити на заголовок. */


/* ═══════════════════════════════════════════════════════════
   ТЕЛЕФОН: ЗНЯТТЯ СТАРИХ ПЕРЕКРИТТІВ.

   assets/krok/css/main.css і mainhub.css досі тримають на
   мобільних власні правила діалога:

       @media (max-width:640px)  .modal .content,
                                 .modal-content { width:96%;
                                   padding:20px; border-radius:24px }
       @media (max-width:480px)  .modal .content { padding:20px 16px
                                                   !important }

   Через width:96% лишалась смужка фону з боків («порожнє місце
   зліва-справа»), а падінг 20px на вузькому екрані з'їдав ще
   40px — разом із внутрішніми відступами в рядок лізло по два
   слова. Правило з !important інакше не перебити, тож тут теж
   !important — рівно на ті властивості, що заважають.

   Сам padding діалога знімаємо в нуль: відступи задають
   __head/__body/__foot (структура .ms-modal) або власні
   правила модалки (#similarModal, #specModal тощо).
   ═══════════════════════════════════════════════════════════ */
@media (max-width:600px){
  .modal > .content,
  .modal > .modal-content,
  .modal .topics{
    width:100% !important;
    max-width:100% !important;
    border-radius:0 !important;
    margin:0 !important;
  }
  /* Нові модалки (views/partials/modal.php) — це .modal.ms-modal з
     .ms-modal__dialog усередині, тож під `.modal .content` вони не
     підпадають і зайвого падінга не отримують. Відступи їм задають
     __head/__body/__foot вище. */
  .ms-modal > .ms-modal__dialog{ padding:0 }
}