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

/* ---------- Общее ---------- */
.limits__err:empty, .server__err:empty { display: none; }
.limits__err, .server__err { margin-bottom: var(--space-5); }
.limits__err .notice > .btn, .server__err .notice > .btn { margin-left: auto; }
.limits, .server, .notify { display: grid; gap: var(--space-6); }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pgrid > .card, .notify > .card, .server > .card { margin-top: 0; }
.card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.card__top + * { margin-top: var(--space-2); }
.meter__none, .server__none { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
@media (min-width: 48rem) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid--usage { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64rem) {
  .pgrid--usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage--days { grid-row: span 2; }
}

/* ---------- Лимиты: окна ---------- */
.meter { display: grid; gap: var(--space-3); align-content: start; }
.meter > * + * { margin-top: 0; }
.meter__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.meter__v {
  font: var(--text-number-lg-weight) var(--text-h1-size)/1 var(--font-num);
  letter-spacing: var(--text-number-lg-track); font-variant-numeric: var(--num-features); white-space: nowrap;
}
.meter__w { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.meter__used { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); font-variant-numeric: var(--num-features); }

/* Полоса доли: SVG, ширину задаёт атрибут, цвет — класс. Скруглена рамкой, значение названо словами рядом. */
.bar { width: 100%; height: var(--space-2); border-radius: var(--radius-pill); overflow: hidden; }
.bar__bg { fill: var(--color-line2); }
.bar__fill { fill: var(--color-acc); }
.bar[data-tone="warn"] .bar__fill { fill: var(--color-warn); }
.bar[data-tone="danger"] .bar__fill { fill: var(--color-danger); }

/* ---------- Лимиты: расход по дням, проектам, моделям ---------- */
.usage { display: grid; gap: var(--space-3); align-content: start; }
.usage > * + * { margin-top: 0; }
.shares { display: grid; gap: 0; }
.share {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.share:first-child { border-top: 0; padding-top: 0; }
.share__n { min-width: 0; overflow-wrap: anywhere; }
.share__p { justify-self: end; white-space: nowrap; color: var(--color-ink); }
.share > .bar { grid-column: 1 / -1; }
.share__t { grid-column: 1 / -1; font-variant-numeric: var(--num-features); }
.share[data-model="sonnet"] .bar__fill { fill: var(--color-model-sonnet); }
.share[data-model="haiku"] .bar__fill { fill: var(--color-model-haiku); }
.limits__ref { max-width: var(--layout-measure); color: var(--color-ink2); }

/* ---------- Сервер ---------- */
.server__card { max-width: var(--layout-narrow); display: grid; gap: var(--space-4); }
.server__card > * + * { margin-top: 0; }
.server__msg { max-width: var(--layout-measure); overflow-wrap: anywhere; }
.vrows { display: grid; gap: 0; }
.vrow { display: grid; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.vrow:first-child { border-top: 0; }
.vrow dd { overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .vrow { grid-template-columns: 10rem minmax(0, 1fr); }
}
.server__ctl { display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.server__ctl > * + * { margin-top: 0; }
.cmd { display: grid; gap: var(--space-2); }
.cmd__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cmd__t {
  flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; min-height: var(--size-touch-min);
  padding: var(--space-2) var(--space-4); background: var(--color-panel2); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  overflow-wrap: anywhere; user-select: all;
}
.cmd__st:empty { display: none; }

.srv-setup { display: grid; gap: var(--space-4); }
.srv-setup > * + * { margin-top: 0; }
.sopts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sopt {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6);
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
}
.sopt--rec { border-color: var(--color-ink3); }
.sopt__ic { display: inline-flex; color: var(--color-ink3); }
.sopt__tag { color: var(--color-acc-text); }
.sconf { display: grid; gap: var(--space-1); }
.sconf dd { margin: 0; overflow-wrap: anywhere; }
.ssteps { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style-type: decimal; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.sopt__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sopt__note { color: var(--color-ink2); max-width: var(--layout-measure); }
@media (min-width: 48rem) {
  .sopts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .sopts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Уведомления ---------- */
.notify { max-width: var(--layout-narrow); }
.notify .card { display: grid; gap: var(--space-3); }
.notify .card > * + * { margin-top: 0; }
.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; }
  .sopt { padding: var(--space-4); }
}