/* Общие компоненты направления «Пульт» (SPEC 01.10.2026, §3–4). Только токены из tokens.css.
   Светло-серый холст, белые карточки с тонкой рамкой, Inter с табличными цифрами, один
   акцент — синий. Зелёный и красный — только знак денег, янтарный — оценка и внимание.
   Справочник классов с примерами разметки — COMPONENTS.md в папке пересборки. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: var(--space-0);
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  font-weight: var(--fw-regular);
  font-feature-settings: "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: var(--rule-thick) solid var(--focus);
  outline-offset: var(--rule-thick);
}

input[type="date"]:focus-within {
  outline: none;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: var(--space-0);
}

h1,
h2,
h3 {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.visually-hidden {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- число и знак денег ---------------------------------------------------------------------- */

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
  white-space: nowrap;
}

td.num,
th.num {
  text-align: right;
}

.up,
.money--in {
  color: var(--up);
}

.down {
  color: var(--down);
}

.money--out {
  color: var(--text);
}

.warn {
  color: var(--warn);
}

.soft,
.muted {
  color: var(--text-2);
}

.nowrap {
  white-space: nowrap;
}

/* --- каркас: колонка меню, верхняя полоса, нижняя панель ------------------------------------ */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* ниже 1024 px внизу стоит панель разделов: страница не прячется под ней */
  padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
}

.skip {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-0) var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.brand:hover {
  color: var(--text);
}

.brand img {
  width: var(--logo);
  height: var(--logo);
  display: block;
}

.brand__sep,
.brand__product {
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

/* Верхняя полоса — телефон и планшет. */
.topbar {
  position: sticky;
  top: var(--space-0);
  z-index: 2;
  background: var(--surface);
  border-bottom: var(--hairline) solid var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-4);
}

.sidebar {
  display: none;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav__title {
  padding: var(--space-0) var(--space-3) var(--space-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--text-2);
}

.nav__list {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  display: grid;
  gap: var(--hairline);
}

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--control);
  padding: var(--space-0) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.nav a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav a[aria-current="page"] {
  background: var(--nav-bg-current);
  color: var(--nav-ink-current);
  font-weight: var(--fw-semibold);
}

.nav__count,
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--q);
  height: var(--q);
  padding: var(--space-0) var(--space-1);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-1);
  margin-left: var(--space-1);
}

.nav a .nav__count {
  margin-left: var(--space-0);
}

.nav a[aria-current="page"] .nav__count {
  background: var(--accent-soft-2);
  color: var(--accent-text);
}

.count--zero {
  display: none;
}

.who {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-14);
  white-space: nowrap;
}

.who a,
.who .btn--link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-0) var(--space-2);
  color: var(--text-2);
  text-decoration: none;
}

.who a:hover,
.who .btn--link:hover {
  color: var(--text);
}

.who--side {
  margin-top: auto;
  margin-left: var(--space-0);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--border);
  justify-content: space-between;
  white-space: normal;
}

.who__name {
  min-width: var(--space-0);
  color: var(--text);
  font-weight: var(--fw-medium);
}

.who__avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

/* Нижняя панель: белая, рамка сверху, три раздела роли и «Меню». */
.tabbar {
  position: fixed;
  left: var(--space-0);
  right: var(--space-0);
  bottom: var(--space-0);
  z-index: 2;
  display: flex;
  background: var(--tab-bg);
  border-top: var(--hairline) solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar > a,
.tabbar__more {
  flex: 1 1 0;
  min-width: var(--space-0);
}

.tabbar > a,
.tabbar__more > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tab-height);
  padding: var(--space-0) var(--space-1);
  color: var(--tab-ink);
  text-decoration: none;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.tabbar__more > summary {
  flex-direction: column;
  gap: var(--space-0);
  cursor: pointer;
  list-style: none;
}

.tabbar__more > summary::-webkit-details-marker {
  display: none;
}

.tabbar > a[aria-current="page"],
.tabbar__more > summary.tabbar__current {
  color: var(--tab-ink-current);
  font-weight: var(--fw-semibold);
}

.tabbar > a[aria-current="page"]::after,
.tabbar__more > summary.tabbar__current::after {
  content: "";
  position: absolute;
  top: calc(var(--hairline) * -1);
  left: 20%;
  right: 20%;
  height: var(--rule-thick);
  background: var(--accent);
}

.tabbar__now {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--tab-ink);
}

.tabbar__menu {
  position: absolute;
  left: var(--space-0);
  right: var(--space-0);
  bottom: 100%;
  max-height: calc(100vh - var(--tab-height) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: var(--surface);
  border-top: var(--hairline) solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) var(--space-0) var(--space-0);
}

.tabbar__more[open] > summary::before {
  content: "";
  position: fixed;
  inset: var(--space-0) var(--space-0) calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
  background: var(--scrim);
}

@media (min-width: 600px) {
  .tabbar__menu {
    left: auto;
    width: var(--container-narrow);
    border-left: var(--hairline) solid var(--border);
  }
}

.tabbar__group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.tabbar__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-0) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.tabbar__menu a:focus-visible {
  outline-offset: calc(var(--rule-thick) * -1);
}

.tabbar__menu a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}

/* --- страница --------------------------------------------------------------------------------- */

.page {
  flex: 1;
  width: 100%;
  max-width: var(--container);
  margin: var(--space-0) auto;
  padding: var(--space-5) var(--space-4) var(--space-10);
}

.page--narrow {
  max-width: calc(var(--container-narrow) + var(--space-16));
}

/* Шапка экрана лежит на холсте: заголовок, под ним строка свежести; справа действия. */
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.page__title {
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.page__title b {
  font-weight: var(--fw-semibold);
}

.page__meta,
.page__sub {
  margin-top: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-text);
}

.page__meta b,
.page__sub b {
  font-weight: var(--fw-medium);
  color: var(--text);
}

.page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Старая строка даты над главным числом — теперь шапка экрана. */
.date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--fs-13);
  color: var(--text-2);
}

.date h1,
.date__title {
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.date b {
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.section {
  margin-top: var(--space-6);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.section__title {
  font-size: var(--fs-18);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

.section__head .section__title {
  margin-bottom: var(--space-0);
}

.section__note {
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-text);
  margin: var(--space-0) var(--space-0) var(--space-3);
}

.stack {
  display: grid;
  gap: var(--space-4);
}

/* --- карточка ------------------------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  min-width: var(--space-0);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

/* Заголовок с подписью сжимается, ссылка и итог справа остаются в строке. */
.card__head > div:first-child {
  flex: 1 1 calc(var(--name-min) * 1.5);
  min-width: var(--space-0);
}

.card__title {
  font-size: var(--fs-15);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--space-0);
}

.card__title a {
  color: inherit;
}

.card__sub {
  margin-top: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-text);
}

.card__body {
  flex: 1;
  min-width: var(--space-0);
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-13);
}

.card__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-sm);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* Карточка без полей: таблица во всю ширину карточки. */
.card--flush {
  padding: var(--space-0);
  overflow: hidden;
}

.card--flush > .card__head {
  padding: var(--space-4) var(--space-4) var(--space-0);
}

.card--flush > .card__foot {
  margin: var(--space-0);
  padding: var(--space-3) var(--space-4);
}

/* Пара «подпись — сумма» внутри карточки. */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.figure__label {
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-text);
}

.figure__value {
  margin-top: var(--space-1);
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
}

.figure__note {
  margin-top: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-12);
}

/* --- сетка -------------------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.grid + .grid,
.grid + .card,
.card + .grid,
.card + .card,
.attention + .grid {
  margin-top: var(--space-4);
}

/* Внутри сетки расстояние задаёт сама сетка. */
.grid > * {
  margin-top: var(--space-0);
}

.grid > .card + .card {
  margin-top: var(--space-0);
}

.grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- KPI ---------------------------------------------------------------------------------------- */

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: var(--space-0);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast);
}

a.kpi:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.kpi__label {
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
}

/* Тихая вторая строка к бухгалтерскому термину: «нам должны» / «мы должны». */
.kpi__plain {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}

.kpi__value,
.kpi__number {
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
  white-space: nowrap;
}

.kpi__value--none {
  color: var(--text-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}

.kpi__unit {
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.kpi--main .kpi__value {
  font-size: var(--fs-24);
}

.kpi__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0) var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
}

.kpi__delta--up .kpi__change {
  color: var(--up);
}

.kpi__delta--down .kpi__change {
  color: var(--down);
}

.kpi__delta--flat .kpi__change {
  color: var(--text-2);
}

.kpi__change {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi__base {
  color: var(--text-2);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.kpi__spark {
  margin-top: auto;
  padding-top: var(--space-2);
}

.kpi__foot {
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
}

/* Старый ряд показателей «Гроссбуха»: теперь — ряд KPI-карточек. */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) var(--space-0);
}

.kpis > * {
  padding: var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  min-width: var(--space-0);
}

/* Итог в шапке карточки и подпись графика внутри карточки. */
.card__total {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
}

.card__chart {
  margin-top: var(--space-4);
}

.chart__title {
  margin-bottom: var(--space-3);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}

/* Список счетов: название и сумма, под ними доверие и источник. */
.accounts {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
}

.accounts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-0);
  border-bottom: var(--hairline) solid var(--border);
}

.accounts__row:first-child {
  padding-top: var(--space-0);
}

.accounts__row:last-child {
  border-bottom: none;
  padding-bottom: var(--space-0);
}

.accounts__name {
  min-width: var(--space-0);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}

.accounts__sum {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

.accounts__src {
  grid-column: 1 / -1;
  min-width: var(--space-0);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
}

.figures + .card__body {
  margin-top: var(--space-4);
}

.recon-share {
  margin-bottom: var(--space-4);
}

/* --- требует внимания ------------------------------------------------------------------------- */

.attention {
  padding: var(--space-2) var(--space-4);
}

.attention__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-0);
}

.attention__list {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
}

.attention__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-0);
  border-top: var(--hairline) solid var(--border);
}

.attention__item::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--r-round);
  background: var(--warn-mark);
}

.attention__item--bad::before {
  background: var(--down-mark);
}

.attention__item--ok::before {
  background: var(--up-mark);
}

.attention__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-7);
  height: var(--tag-h);
  padding: var(--space-0) var(--space-2);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.attention__item--bad .attention__count {
  background: var(--down-soft);
  color: var(--down);
}

.attention__text {
  flex: 1;
  min-width: var(--space-0);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}

.attention__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-0) var(--space-1);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.attention__item--ok {
  color: var(--text-2);
}

/* --- таблица ------------------------------------------------------------------------------------ */

.table-wrap,
.sheet__scroll,
.scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Старый лист-таблица: таблица в белой карточке. */
.sheet__scroll {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.card .sheet__scroll,
.card .table-wrap {
  border: none;
  border-radius: var(--space-0);
  box-shadow: none;
  background: transparent;
}

.sheet {
  margin-top: var(--space-2);
}

.table,
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.table th,
.table td,
.ledger th,
.ledger td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--border);
  vertical-align: middle;
  text-align: left;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}

.table thead th,
.ledger thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.table tbody tr:hover,
.ledger tbody tr:hover {
  background: var(--surface-2);
}

.table tbody tr:last-child > *,
.ledger tbody tr:last-child > * {
  border-bottom: none;
}

.table td.num,
.table th.num,
.ledger td.num,
.ledger th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
}

.table__total td,
.table__total th,
.ledger__total td,
.ledger__total th {
  font-weight: var(--fw-semibold);
  border-top: var(--hairline) solid var(--border-strong);
  background: var(--surface);
}

.ledger__total th {
  white-space: nowrap;
}

.ledger__group td,
.ledger__group th {
  font-weight: var(--fw-semibold);
  background: var(--surface-2);
}

.table td a,
.ledger td a,
.list__name a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-sm);
}

.ledger__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ledger__actions {
  white-space: nowrap;
}

.ledger__actions .row {
  flex-wrap: nowrap;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-0);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- фильтры и вкладки ------------------------------------------------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar .field {
  min-width: var(--field-min);
}

.search {
  flex: 1 1 var(--side-column);
  min-width: var(--space-0);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-sm);
  padding: var(--space-0) var(--space-3);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
}

.chip:hover {
  color: var(--text);
  background: var(--surface-2);
}

.chip--on,
.chip[aria-current] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

.tabs {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  border-bottom: var(--hairline) solid var(--border);
}

.tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
}

.tabs a:hover {
  color: var(--text);
}

.tabs a[aria-current] {
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}

.tabs a[aria-current]::after {
  content: "";
  position: absolute;
  left: var(--space-0);
  right: var(--space-0);
  bottom: calc(var(--hairline) * -1);
  height: var(--rule-thick);
  background: var(--accent);
}

.tabs a[aria-current] .count {
  background: var(--accent-soft-2);
  color: var(--accent-text);
}

/* --- тег ----------------------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tag-h);
  padding: var(--space-0) var(--space-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  white-space: nowrap;
}

.tag--ok {
  background: var(--up-soft);
  color: var(--up);
}

.tag--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.tag--bad {
  background: var(--down-soft);
  color: var(--down);
}

.tag--info {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.tag--muted {
  background: var(--surface-2);
  color: var(--text-2);
}

/* --- кнопки --------------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control);
  padding: var(--space-0) var(--space-4);
  border-radius: var(--r-sm);
  border: var(--hairline) solid var(--btn-rule);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.btn:hover {
  background: var(--surface-2);
  color: var(--btn-ink);
}

.btn--main {
  background: var(--btn-main-bg);
  border-color: var(--btn-main-bg);
  color: var(--btn-main-ink);
}

.btn--main:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--btn-main-ink);
}

.btn--danger {
  color: var(--down);
  border-color: var(--border-strong);
}

.btn--danger:hover {
  background: var(--down-soft);
  color: var(--down);
}

.btn--small {
  min-height: var(--control-sm);
  padding: var(--space-0) var(--space-3);
  font-size: var(--fs-13);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
}

.btn--link {
  min-height: var(--control-sm);
  padding: var(--space-0) var(--space-1);
  border-color: transparent;
  background: transparent;
  color: var(--accent-text);
}

.btn--link:hover {
  background: transparent;
  color: var(--accent-hover);
  text-decoration: underline;
}

.btn[disabled] {
  opacity: var(--disabled-opacity);
  cursor: default;
}

/* --- формы ----------------------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--text);
}

.field__hint {
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
}

.field__error {
  color: var(--down);
  font-size: var(--fs-13);
  line-height: var(--lh-text);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--field-rule);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  color: var(--field-ink);
  font: inherit;
  font-size: var(--fs-14);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.textarea {
  min-height: calc(var(--control) * 2);
  line-height: var(--lh-text);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--text-3);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.input:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--ring) var(--accent-soft-2);
}

.input[aria-invalid="true"] {
  border-color: var(--down);
}

.input--money {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.row--end {
  justify-content: flex-end;
}

.row > input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  margin: var(--space-0);
  flex: none;
  accent-color: var(--accent);
}

.inline-form {
  display: inline;
}

/* --- раскрытие «?» ------------------------------------------------------------------------------- */

details.why {
  margin-top: var(--space-3);
  font-size: var(--fs-13);
  color: var(--text-2);
}

details.why > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-sm);
  padding-right: var(--space-2);
  font-weight: var(--fw-medium);
}

details.why > summary:hover {
  color: var(--text);
}

details.why > summary::-webkit-details-marker {
  display: none;
}

.why__q {
  flex: none;
  width: var(--q);
  height: var(--q);
  border-radius: var(--r-round);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

details.why[open] > summary .why__q {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.why__body {
  max-width: var(--readable);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-13);
  line-height: var(--lh-read);
}

.why__body dl {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
}

.why__body dt {
  color: var(--text-2);
}

.why__body ul {
  margin: var(--space-2) var(--space-0) var(--space-0);
  padding-left: var(--space-5);
}

.why__body li + li {
  margin-top: var(--space-1);
}

.why__body p + p,
.why__body dl + p {
  margin-top: var(--space-2);
}

details.reveal > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

details.reveal > summary::-webkit-details-marker {
  display: none;
}

/* --- доверие: точка у числа ------------------------------------------------------------------- */

.trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-12);
  white-space: nowrap;
}

.trust::before,
.dot-i,
.book__dot,
.dot {
  content: "";
  flex: none;
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--r-round);
  background: transparent;
  border: var(--hairline) solid var(--dot-none);
}

.trust--ok::before,
.dot-i,
.book__dot--confirmed,
.dot--confirmed {
  background: var(--dot-ok);
  border-color: var(--dot-ok);
}

.trust--est::before,
.dot-i--est,
.book__dot--estimate,
.dot--estimate {
  background: var(--dot-est);
  border-color: var(--dot-est);
}

.trust--est {
  color: var(--warn);
}

.dot-i {
  vertical-align: middle;
  margin-right: var(--space-1);
}

.dot-i--none {
  background: transparent;
  border-color: var(--dot-none);
}

/* --- плашки состояния и сообщения --------------------------------------------------------------- */

.flash {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--up-soft);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}

.flash--bad {
  background: var(--down-soft);
  color: var(--down);
}

.notice,
.state {
  margin: var(--space-0) var(--space-0) var(--space-2);
  padding: var(--space-0) var(--space-4);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  color: var(--text);
  font-size: var(--fs-14);
}

.notice {
  padding: var(--space-3) var(--space-4);
  line-height: var(--lh-text);
}

.state--bad,
.notice--bad {
  background: var(--down-soft);
}

.state > summary,
.state__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-0);
  font-weight: var(--fw-medium);
  list-style: none;
}

.state > summary {
  cursor: pointer;
}

.state > summary::-webkit-details-marker {
  display: none;
}

.state > summary::before,
.state__title::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--r-round);
  background: var(--warn-mark);
}

.state--bad > summary::before,
.state--bad .state__title::before {
  background: var(--down-mark);
}

.state > summary::after {
  content: "подробнее";
  margin-left: auto;
  padding-left: var(--space-3);
  color: var(--accent-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  white-space: nowrap;
}

.state[open] > summary::after {
  content: "свернуть";
}

.state__body {
  margin: var(--space-0);
  padding: var(--space-0) var(--space-0) var(--space-3) calc(var(--dot) + var(--space-2));
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-read);
  max-width: var(--readable);
}

/* --- пустое состояние --------------------------------------------------------------------------- */

.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-2);
  font-size: var(--fs-14);
  text-align: center;
}

.card .empty {
  border: none;
  background: transparent;
  padding: var(--space-6) var(--space-2);
}

.empty h2,
.empty h3 {
  font-size: var(--fs-15);
  color: var(--text);
}

.no-data {
  display: grid;
  place-items: center;
  min-height: var(--chart-h-sm);
  padding: var(--space-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-13);
  text-align: center;
}

/* --- главное число старых экранов: карточка с крупным числом ---------------------------------- */

.hero {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.hero__label {
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  margin-bottom: var(--space-1);
}

.hero__number {
  display: inline-block;
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
  color: var(--text);
}

.hero__number--none {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.hero__delta {
  margin-top: var(--space-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.hero__delta .num {
  font-size: var(--fs-13);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-13);
  color: var(--text-2);
}

.hero__trust .book__dot {
  margin: var(--space-0);
}

.hero__aside {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding: var(--space-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.hero__aside .hero__label {
  margin: var(--space-0);
}

.hero__mid {
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
}

.hero__mid--none {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.hero details.why {
  margin-top: var(--space-0);
}

/* --- группа с итогом и строка «название — сумма» ------------------------------------------------ */

.book {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-3);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.book__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-0);
  border-bottom: var(--hairline) solid var(--border);
  font-size: var(--fs-15);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}

.book__total {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}

.book__total small {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.book__total .none {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  white-space: nowrap;
}

.book__rows {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
}

.book__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot line line" "dot src chg";
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: baseline;
  padding: var(--space-3) var(--space-0);
  border-bottom: var(--hairline) solid var(--border);
  min-height: var(--tap);
}

.book__row:last-child {
  border-bottom: none;
}

.book__row > .book__dot,
.book__row > .dot {
  grid-area: dot;
  align-self: start;
  margin-top: var(--space-2);
}

.book__line {
  grid-area: line;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: var(--space-0);
}

.book__name {
  flex: 1 1 auto;
  min-width: var(--space-0);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}

.tally .book__name {
  font-size: var(--fs-14);
}

.book__text {
  background: none;
  padding: var(--space-0);
}

/* Отточия больше нет: между названием и суммой — воздух. */
.book__lead {
  flex: 1 0 var(--space-2);
  border: none;
}

.book__line > .book__lead {
  display: none;
}

.book__sum {
  flex: none;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-text);
  font-variant-numeric: tabular-nums;
}

.book__sum--none {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.book__src,
.source {
  grid-area: src;
  display: block;
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

.book__src em,
.source em {
  font-style: normal;
  color: var(--warn);
  font-weight: var(--fw-medium);
}

.book__chg {
  grid-area: chg;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

.book__chg .num {
  font-size: var(--fs-12);
}

/* Короткий список «название — число»: строки на тонких линиях. */
.tally {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  min-width: var(--space-0);
}

.tally li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control);
  padding: var(--space-2) var(--space-0);
  border-bottom: var(--hairline) solid var(--border);
}

.tally li:last-child {
  border-bottom: none;
}

.tally .book__sum {
  font-size: var(--fs-14);
}

.tally .book__sum.warn {
  color: var(--warn);
}

.tally .book__dot {
  margin: var(--space-0);
}

.tally__sub .book__name {
  padding-left: var(--space-5);
  color: var(--text-2);
}

.name-short {
  display: none;
}

.cols {
  display: grid;
  gap: var(--space-0) var(--space-4);
  align-items: start;
}

/* --- вход ------------------------------------------------------------------------------------------ */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg);
}

.login__card {
  width: 100%;
  max-width: var(--login-card);
  padding: var(--space-8) var(--space-6);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.login__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.login__brand img {
  width: var(--logo-large);
  height: var(--logo-large);
}

.login__name {
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}

.login__card .btn--main {
  width: 100%;
}

/* --- списки ------------------------------------------------------------------------------------------ */

.list {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0) var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.card .list {
  padding: var(--space-0);
  border: none;
  box-shadow: none;
  background: transparent;
}

.list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-0);
  border-bottom: var(--hairline) solid var(--border);
}

.list__item:last-child {
  border-bottom: none;
}

.list__item .num {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
}

.list__name {
  overflow-wrap: anywhere;
  font-weight: var(--fw-medium);
}

.list__sub {
  grid-column: 1 / -1;
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
}

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-0);
  margin: var(--space-0);
  list-style: none;
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  color: var(--text-2);
}

.steps li + li::before {
  content: "→";
  margin-right: var(--space-2);
  color: var(--text-3);
}

.steps li[data-state="done"] {
  color: var(--text);
}

.steps li[data-state="now"] {
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}

.steps li[data-state="failed"] {
  color: var(--down);
}

.dropzone {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-6);
  border: var(--hairline) dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.masked {
  letter-spacing: var(--hairline);
}

.drawer {
  padding: var(--space-3) var(--space-0) var(--space-4);
  border-top: var(--hairline) solid var(--border);
}

.footer {
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  margin-top: var(--space-8);
}

/* --- ширина ---------------------------------------------------------------------------------------- */

@media (max-width: 899px), (pointer: coarse) {
  label.row {
    min-height: var(--tap);
  }

  .btn {
    min-height: var(--tap);
  }

  .btn--small,
  .btn--link {
    min-height: var(--control);
  }
}

@media (max-width: 599px) {
  .name-long {
    display: none;
  }

  .name-short {
    display: inline;
  }

  .col-wide {
    display: none;
  }

  .page__actions {
    width: 100%;
  }

  .figures {
    grid-template-columns: minmax(0, 1fr);
  }

  .attention {
    padding: var(--space-1) var(--space-3);
  }

  .attention__go .go-word {
    display: none;
  }

  /* Длинное название слева съедало колонку пояснения до пары букв: на телефоне — столбиком. */
  .why__body dl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .why__body dd + dt {
    margin-top: var(--space-2);
  }
}

/* Узкий телефон: «KUDAKA · Финансы» и «Имя  Выйти» в одну строку не помещаются. */
@media (max-width: 399px) {
  .topbar .brand__sep,
  .topbar .brand__product {
    display: none;
  }
}

/* Телефон и планшет: главная KPI — во всю ширину, остальные парами; непарная последняя —
   тоже во всю ширину, без дыры рядом. */
@media (max-width: 899px) {
  .grid--4 > .kpi--main,
  .grid--4 > .kpi--main:first-child ~ .kpi:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 600px) {
  .page {
    padding: var(--space-6) var(--space-6) var(--space-12);
  }

  .card {
    padding: var(--space-5);
  }

  .card--flush {
    padding: var(--space-0);
  }

  .card--flush > .card__head {
    padding: var(--space-5) var(--space-5) var(--space-0);
  }

  .card--flush > .card__foot {
    padding: var(--space-3) var(--space-5);
  }

  .kpi {
    padding: var(--space-5);
  }

  .kpi__value,
  .kpi__number {
    font-size: var(--fs-24);
  }

  .kpi--main .kpi__value {
    font-size: var(--fs-28);
  }
}

@media (min-width: 900px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Первая карточка ряда шире: у главного числа длинная подпись. */
  .grid--lead {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  }

  .grid--main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cols {
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: start;
    padding: var(--space-6);
  }

  .hero__number {
    font-size: var(--fs-40);
  }

  .hero__aside {
    min-width: var(--side-column);
  }

  .hero details.why,
  .hero__states {
    grid-column: 1 / -1;
  }

  .page__title {
    font-size: var(--fs-24);
  }
}

/* Компьютер с 1024 px: белая колонка меню слева, страница справа; полосы сверху и панели снизу нет. */
@media (min-width: 1024px) {
  /* Компьютер: мышь, строки плотнее — сводка до графика остатка помещается в 900 px. */
  .attention__item {
    min-height: var(--control);
    padding: var(--space-1) var(--space-0);
  }

  .attention__go {
    min-height: var(--control-sm);
  }

  .shell--side {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    padding-bottom: var(--space-0);
  }

  .shell--side .topbar,
  .tabbar {
    display: none;
  }

  /* Колонка тянется на всю высоту страницы (белая с рамкой), содержимое липнет к окну. */
  .sidebar {
    grid-column: 1;
    grid-row: 1;
    display: block;
    background: var(--surface);
    border-right: var(--hairline) solid var(--border);
  }

  .sidebar__inner {
    position: sticky;
    top: var(--space-0);
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-3) var(--space-3);
  }

  .sidebar .brand {
    padding: var(--space-0) var(--space-2);
  }

  .shell--side .page {
    grid-column: 2;
    grid-row: 1;
  }

  .page {
    padding: var(--space-6) var(--space-8) var(--space-12);
  }
}

@media (min-width: 1280px) {
  .kpi__value {
    font-size: var(--fs-28);
  }

  .kpi--main .kpi__value {
    font-size: var(--fs-32);
  }
}

@media (min-width: 1080px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-column);
    gap: var(--space-6);
    align-items: start;
  }
}

/* --- движение -------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  details.why[open] > .why__body,
  .state[open] > .state__body {
    animation: fade var(--dur-base) ease-out;
  }

  @keyframes fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}