/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экран «Уведомления»: лента событий, каналы и выключатель. Подключён в index.html после server.css; значения — только из tokens.css, размеры в rem.
   Светлая и тёмная темы переключаются токенами. Движения нет, кроме короткого сдвига ползунка (токены длительности сами сводятся к нулю
   при prefers-reduced-motion). Общая раскладка страниц (.notify, ошибка связи) — в pages.css. */

/* ---------- Уведомления ---------- */
.notify { max-width: var(--layout-narrow); }
.notify { display: grid; gap: var(--tile-gap); }
.notify > section { display: grid; gap: var(--space-3); align-content: start; }
.notify > section > * + * { margin-top: 0; }
.notify__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.notify__err:empty { display: none; }

/* Лента: метка вида и время сверху, ниже фраза и пояснение. Строка со ссылкой целиком кликабельна, касание не меньше 44 px. */
.nlist { display: grid; gap: 0; }
.nitem { border-top: 1px solid var(--color-line); }
.nitem:first-child { border-top: 0; }
.nitem__a {
  display: grid; gap: var(--space-2); justify-items: start; min-height: var(--size-touch-min);
  padding: var(--space-4) 0; color: var(--color-ink); text-decoration: none; min-width: 0;
}
a.nitem__a:hover .nitem__title { text-decoration: underline; text-underline-offset: .2em; }
.nitem__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.nitem__t { color: var(--color-ink3); font-size: var(--text-label-size); white-space: nowrap; }
.nitem__title, .nitem__hint, .nitem__p { overflow-wrap: anywhere; min-width: 0; }
.nitem__hint { color: var(--color-ink2); }
.nitem__p { color: var(--color-ink3); }
.nlist__more { padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.notify__seg { margin-bottom: var(--space-2); }
.chans { display: grid; gap: 0; }
.chan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
  min-height: var(--size-control); padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.chan:first-child { border-top: 0; }
.chan__t { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 12rem; min-width: 0; }
.chan__t > .ic { color: var(--color-ink3); }
.chan__tx { display: grid; gap: var(--space-1); min-width: 0; }
.chan__tx .caption { overflow-wrap: anywhere; }
.chan--off .chan__tx .ui-strong { color: var(--color-ink2); }
.notify__msg:empty, .notify__mem:empty { display: none; }
.notify__msg { color: var(--color-ink); }
.notify__mem { color: var(--color-ink2); }

/* Выключатель: слово «Включено» или «Выключено» и дорожка с ползунком. Выключен — рамка и серый ползунок; включён — акцентная заливка. */
.sw {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch-min); padding: 0;
  background: none; border: 0; color: var(--color-ink); cursor: pointer;
  font: var(--text-ui-weight) var(--text-caption-size)/1 var(--font-sans);
}
.sw__word { min-width: 5.5rem; text-align: right; color: var(--color-ink2); }
.sw__track {
  position: relative; flex: none; width: calc(var(--space-10) + var(--space-1)); height: var(--space-6);
  background: var(--color-panel2); border: var(--size-focus-width) solid var(--color-ink3); border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.sw__thumb {
  position: absolute; top: 50%; left: var(--space-1); width: var(--space-3); height: var(--space-3);
  background: var(--color-ink3); border-radius: var(--radius-round); transform: translate(0, -50%);
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.sw[aria-checked="true"] .sw__track { background: var(--color-acc); border-color: var(--color-acc); }
.sw[aria-checked="true"] .sw__thumb { background: var(--color-on-acc); transform: translate(var(--space-5), -50%); }
.sw:disabled { cursor: not-allowed; color: var(--color-ink2); }
.sw:disabled .sw__track { border-color: var(--color-line2); }
.sw:disabled .sw__thumb { background: var(--color-line2); }
@media (max-width: 40rem) {
  .sw__word { min-width: 0; }
}

/* ---------- Настройки: разделы «Экономия лимита» и «Модели и правила» (set-*) ---------- */
.set-sec {
  display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding: var(--space-6);
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
.set-sec__head { display: grid; gap: var(--space-1); min-width: 0; }
.set-sec__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.set-sec__t { margin: 0; color: var(--color-ink); font: var(--text-h3-weight) var(--text-lead-size)/var(--text-h3-line) var(--font-head); letter-spacing: var(--text-h3-track); }
.set-sec__lead, .set-note, .set-row__d, .set-level__d { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.set-note--eff { color: var(--color-ink); }
.set-note--err { color: var(--color-danger-text); }

/* Уровень: четыре сегмента на общем .ui-switch; «Свой» недоступен и только показывает состояние. */
.set-seg { grid-auto-columns: minmax(0, 1fr); }
.set-seg .ui-switch__b:disabled { cursor: default; }
.set-seg .ui-switch__b[aria-checked="true"]:disabled { color: var(--color-ink); }
.set-sec[aria-busy="true"] .ui-switch__b, .set-sec[aria-busy="true"] .set-cb { cursor: progress; }
.set-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--space-4) var(--space-6); }
.set-level { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.set-level__t { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }

/* Строка настройки: слева название и пояснение, справа контрол. */
.set-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line);
}
.set-row__txt { display: grid; gap: var(--space-1); flex: 1 1 16rem; min-width: 0; }
.set-row__t { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.set-row__c { display: flex; align-items: center; gap: var(--space-2); flex: none; min-width: 0; max-width: 100%; }
.set-row__v { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.set-row__v--nd { color: var(--color-ink3); }
.set-ctl {
  min-height: var(--size-ctl); max-width: 100%; padding-inline: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-ctl);
  background: var(--color-bg2); color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
select.set-ctl { min-width: 12rem; }
.set-ctl--num { width: 6rem; font-family: var(--font-mono); }
.set-ctl:disabled { color: var(--color-ink2); cursor: not-allowed; opacity: 1; }
.set-cb { flex: none; width: var(--size-icon); height: var(--size-icon); margin: 0; accent-color: var(--color-acc); cursor: pointer; }
.set-cb:disabled { cursor: not-allowed; }
.set-row--auto label.set-row__t { cursor: pointer; }

/* Кнопка сброса раздела: пока серверного сохранения нет, она отключена; причина — в title и скрытом описании. */
.set-reset {
  min-height: var(--size-touch-min); padding: 0 var(--space-1); background: transparent; border: 0; color: var(--color-acc-text);
  font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); cursor: pointer;
}
.set-reset:disabled { color: var(--color-ink3); cursor: not-allowed; }
.set-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 40rem) {
  .set-sec { padding: var(--space-4); }
  .set-seg .ui-switch__b { min-width: 0; padding-inline: var(--space-1); overflow-wrap: anywhere; }
  .set-row__c { flex: 1 1 100%; }
  select.set-ctl { min-width: 0; width: 100%; }
}

/* ---------- Настройки: каркас страницы (шапка, навигация по разделам, колонка разделов) ---------- */
.set-head__why { grid-column: 1 / -1; margin: 0; max-width: var(--layout-measure); color: var(--color-ink2); }
.set-head__reset:disabled { color: var(--color-ink3); cursor: not-allowed; }
.set-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.set-main { display: grid; gap: var(--tile-gap); min-width: 0; max-width: 60rem; }
.set-main > .set-sec:focus-visible { outline: var(--size-focus-width) solid var(--color-acc); outline-offset: var(--size-focus-width); }

/* Навигация: на узком экране — переносимая лента ссылок, на широком — колонка слева. */
.set-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
.set-nav__a {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); padding-inline: var(--space-3);
  border-radius: var(--radius-ctl); color: var(--color-ink2); text-decoration: none;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.set-nav__a:hover { background: var(--color-panel2); color: var(--color-ink); }
@media (min-width: 64rem) {
  .set-page { grid-template-columns: 13.75rem minmax(0, 1fr); gap: var(--space-8); }
  .set-nav { flex-direction: column; flex-wrap: nowrap; gap: var(--space-1); }
}

/* Раздел «Уведомления» внутри карточки: ровные блоки с заголовками третьего уровня, без вложенных рамок. */
.set-sec--notify .notify__err { min-width: 0; }
.set-sub { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.set-sub__t { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.set-sub__note { max-width: var(--layout-measure); }
.set-sec > a.link { justify-self: start; }

/* Полоса «Связь с компьютером медленная, пробуем ещё» (ui/slow-link.js): тонкая графитовая плашка сверху по центру,
   мягкое свечение вместо рамки. Расположена под верхней полосой (--layout-topbar), не перекрывая её; нажатия проходят сквозь неё. Скрыта, пока data-open="false". */
.slow-link {
  position: fixed; z-index: var(--z-toast); top: calc(var(--layout-topbar) + var(--space-2)); left: 50%; transform: translateX(-50%);
  max-width: calc(100% - var(--space-6)); padding: var(--space-1) var(--space-4);
  background: var(--color-panel2); color: var(--color-ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  font: var(--text-ui-weight) var(--text-caption-size)/var(--text-ui-line) var(--font-sans);
  text-align: center; overflow-wrap: anywhere; pointer-events: none;
}
.slow-link[data-open="false"] { display: none; }