/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экран «Подписка и расходы» (#billing): аккаунт, окна лимита, полоса доли, расход по дням, проектам и моделям. Подключён в index.html после overview.css и projects.css;
   значения — только из tokens.css, размеры в rem. Общая раскладка страниц (.pgrid, .card__top, ошибка связи) — в pages.css.
   Цвет только усиливает слова и значки: состояние всегда названо словом. */

/* ---------- Аккаунт и лимит подписки: две карточки в ряд (на 390 — одна колонка) ---------- */
.pgrid--top { align-items: stretch; }
.acct { display: grid; gap: var(--space-4); align-content: start; }
.acct > * + * { margin-top: 0; }
.acct > h2, .limcard > h2 { margin: 0; }
.acct__list { margin: 0; }
.acct__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line);
}
.acct__row:last-child { border-bottom: 0; }
.acct__k { color: var(--color-ink2); }
.acct__v { margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.acct__v--none { color: var(--color-ink2); }
/* Арбитр проекта: карточка на стилях «Аккаунта Claude». */
.arbiter > h3, .arbiter__note { margin: 0; }
.limcard { display: grid; gap: var(--space-5); align-content: start; }
.limcard > * + * { margin-top: 0; }
.limcard__rows { display: grid; gap: var(--space-5); }

/* ---------- Лимиты: окна ---------- */
.meter { display: grid; gap: var(--space-2); align-content: start; }
.meter > * + * { margin-top: 0; }
.meter__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.meter__t { margin: 0; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.meter__num { margin: 0; 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__v--none { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.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); }

/* ---------- Группы экрана: «Лимиты», «Расход», «Расход по задачам» ---------- */
.lgroup { display: grid; gap: var(--space-4); align-content: start; }
.lgroup > .card, .lgroup > .periods, .lgroup > .pgrid { margin-top: 0; }
/* Заголовок группы — спокойная подпись с линией, как в эталоне (Расход за неделю, Где экономим). */
.lgroup > h2 {
  margin: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line);
  color: var(--color-ink2); font: var(--text-label-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.lgroup--top > .pgrid { margin-top: 0; }

/* Экономия лимита: короткая карточка со ссылкой на Настройки. */
.save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.save > * + * { margin-top: 0; }
.save > p { flex: 1 1 16rem; min-width: 0; margin: 0; }
.save__link { overflow-wrap: anywhere; }
.save__link:focus-visible { outline: 0.125rem solid var(--color-acc); outline-offset: 0.125rem; border-radius: var(--radius-xs); }

/* Итоги за период: три плитки, на узком экране в одну колонку. */
.periods { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; }
.period { display: grid; gap: var(--space-1); align-content: start; margin-top: 0; }
.period.card + .period.card { margin-top: 0; }
.period > * + * { margin-top: 0; }
.period__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;
}
.period__v--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) {
  .periods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* График по дням: столбики SVG, высоту задаёт атрибут; итог словами — в подписи графика и в списке «Показать по дням». */
.chart { display: grid; gap: var(--space-2); }
.chart__svg { width: 100%; height: 7.5rem; overflow: visible; }
.chart__bar { fill: var(--color-acc); }
.chart__axis { display: flex; justify-content: space-between; gap: var(--space-3); }
.fold__sum {
  cursor: pointer; min-height: var(--size-touch-min); display: inline-flex; align-items: center;
  color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.fold__sum:focus-visible { outline: 0.125rem solid var(--color-acc); outline-offset: 0.125rem; border-radius: var(--radius-xs); }
.fold[open] > .fold__sum { margin-bottom: var(--space-3); }

/* Расход по задачам очереди. */
.tasks { display: grid; gap: 0; margin: 0; padding: 0; }
.tasks__row {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.tasks__row:first-child { border-top: 0; padding-top: 0; }
.tasks__n { min-width: 0; overflow-wrap: break-word; }
.tasks__p { justify-self: start; text-align: left; color: var(--color-ink); font-variant-numeric: var(--num-features); }
.tasks__row > .bar { grid-column: 1 / -1; }
.tasks__t, .tasks__ref { grid-column: 1 / -1; font-variant-numeric: var(--num-features); }
/* От 480 px подпись доли встаёт справа от названия; на узких экранах строка — одна колонка. */
@media (min-width: 30rem) {
  .tasks__row { grid-template-columns: minmax(0, 1fr) auto; }
  .tasks__p { justify-self: end; text-align: right; }
}

/* Аккаунты подписки: строка на аккаунт, два окна (5 часов, неделя) в две колонки; основной помечен словом, не цветом. */
.accs { display: grid; gap: var(--space-3); align-content: start; }
.accs > * + * { margin-top: 0; }
.accs > h3 { margin: 0; }
.accs__list { display: grid; gap: 0; margin: 0; padding: 0; list-style-type: none; }
.acc {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-3) var(--space-5);
  padding: var(--space-4) 0; border-top: 1px solid var(--color-line);
}
.acc:first-child { border-top: 0; padding-top: 0; }
.acc__n { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.acc__name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.acc__tag {
  padding: 0 var(--space-2); border: 1px solid var(--color-line2); border-radius: var(--radius-pill); color: var(--color-ink2);
  font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.acc__leads { margin-left: auto; font-variant-numeric: var(--num-features); }
.acc__w { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.acc__l { color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.acc__v { color: var(--color-ink); white-space: nowrap; }
.acc__none { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.acc__lw { color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.acc__r { overflow-wrap: anywhere; }

/* Подпись аккаунта: источник мелким текстом и кнопка «Задать подпись» / «Изменить подпись» под заголовком строки.
   Длинный логин переносится по знакам, горизонтальной прокрутки на 390 нет; кнопка не уже зоны касания. */
.acc__lab { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.acc__src { min-width: 0; color: var(--color-ink2); overflow-wrap: anywhere; }
.acc__src[data-source="none"] { color: var(--color-warn-text); }
.acc__edit { min-height: var(--size-touch-min); max-width: 100%; }
.acc__edit:focus-visible { outline: var(--size-focus-width) solid var(--color-acc); outline-offset: 0.125rem; }
.acclabel { display: grid; gap: var(--space-3); min-width: 0; }
.acclabel > * + * { margin-top: 0; }
.acclabel__err[hidden] { display: none; }