/* ============================================================
   Вікно «Налаштування» (static/settings.js).

   Два розділи одним стовпчиком: мова й відкритий журнал. Ширина менша
   за звичайне вікно — тут не таблиці, а короткий список, і на широкому
   екрані він виглядав би розтягнутим.
   Кольори — тільки змінні теми, тому світла й темна виходять самі.
   ============================================================ */

.modal-box:has(.st){max-width:520px}

/* Поява й зникання вікна — спільні для всього сайту, див.
   static/motion.css. Раніше вони жили тут окремо, і виходило, що
   налаштування згортаються плавно, а решта вікон — ривком. */

.m-body.st{display:flex; flex-direction:column; gap:26px}

.st-sec{display:block}
.st-h{
  margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint);
}

/* ---- мова ---- */

.st-langs{display:flex; gap:3px; padding:3px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--line-soft)}
.st-langs button{
  flex:1; min-height:44px; border:0; border-radius:8px; background:transparent;
  color:var(--dim); cursor:pointer; font-size:13.5px; font-weight:500;
  transition:background .15s, color .15s;
}
.st-langs button:hover{color:var(--text)}
.st-langs button.on{background:var(--panel); color:var(--text); font-weight:600}

/* ---- відкритий журнал ---- */

/* Розділ узятий з вікна «Відкритий журнал» як є (клас pp, стилі в
   pub.css). Тут тільки прибираємо верхній відступ у першого абзацу —
   над ним уже стоїть заголовок розділу. */
.st-sec.pp .pp-lead{margin-top:0}

/* ---- копія журналу ---- */

/* Кнопка — це посилання на /api/export, тому вирівнюємо його як кнопку:
   інакше рядковий елемент з'їхав би по базовій лінії тексту. */
.st-sec.bk .pp-lead{margin-top:0; margin-bottom:14px}
.bk-get{display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; text-decoration:none}
.bk-note{margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--dim)}
.bk-note b{color:var(--text); font-weight:600}
/* Скільки днів зберігається — довідка другого плану, тому тьмяніша й
   на вузькому екрані йде окремим рядком, а не тисне дату. */
.bk-kept{color:var(--faint)}

@media (max-width:560px){
  .m-body.st{gap:22px}
  .st-langs button{font-size:13px}
  .bk-get{width:100%}
  .bk-kept{display:block; margin-top:2px}
}