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

/* ---------- Лимиты: окна ---------- */
.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); }

/* ---------- Группы экрана: «Лимиты», «Расход», «Расход по задачам» ---------- */
.lgroup { display: grid; gap: var(--space-4); align-content: start; }
.lgroup > .card, .lgroup > .periods, .lgroup > .pgrid { margin-top: 0; }
.lgroup > h2 { margin: 0; }

/* Итоги за период: три плитки, на узком экране в одну колонку. */
.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: 2.75rem; 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; }
}