/* ============================================================
   Вікно «Налаштування» (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}
}

/* ---- зміна пароля ---- */

/* Три поля в ряд на широкому вікні й стовпчиком на вузькому. Підпис над
   полем, а не плейсхолдером усередині: плейсхолдер зникає, щойно почав
   писати, і в трьох однакових полях уже не зрозуміти, де яке. */
.st-sec.pw .pw-lead{margin:0 0 14px; font-size:13px; line-height:1.6; color:var(--dim)}
.pw-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
.pw-f{display:flex; flex-direction:column; gap:6px; min-width:0}
.pw-f span{font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
.pw-f input{width:100%; min-width:0; min-height:44px; box-sizing:border-box;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text); padding:10px 12px; font-size:14px;
  transition:border-color .14s}
.pw-f input:focus{outline:none; border-color:var(--accent)}
.pw-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px}
.st-sec.pw > .pw-row{margin-top:0}
.pw-row:empty{display:none}
.pw-row .btn{min-height:44px}
.pw-msg{font-size:13px; color:var(--dim)}
.pw-msg.ok{color:var(--up)}
.pw-msg.bad{color:var(--down)}

@media (max-width:560px){
  .pw-grid{grid-template-columns:minmax(0, 1fr)}
  .pw-row .btn{width:100%}
  .pw-msg{width:100%}
}

/* ---------- розділ «Пошта» ---------- */
.st-sec.ec .ec-row{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13.5px;
}
/* Кружечок замість слова «увага»: сірий — чекаємо, зелений — прийнято. */
.st-sec.ec .ec-mark{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--faint);
}
.st-sec.ec .ec-mark.ok{background:var(--up)}
.st-sec.ec .ec-mail{
  /* min-width:0 — щоб довга адреса стискалась і лишалась в одному рядку
     з кружечком, а не зіштовхувала його на рядок вище. */
  flex:0 1 auto; min-width:0; font-weight:500; word-break:break-all;
}
.st-sec.ec .ec-state{color:var(--dim)}
.st-sec.ec .ec-lead{
  margin:9px 0 0; font-size:12.5px; line-height:1.55; color:var(--dim);
}
.st-sec.ec .ec-act{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
}
.st-sec.ec .ec-msg{font-size:12.5px; line-height:1.4; color:var(--dim)}
.st-sec.ec .ec-msg.ok{color:var(--up)}
.st-sec.ec .ec-msg.bad{color:var(--down)}