/* Обзор — первый экран. Отвечает на четыре вопроса и ни на один больше:
 * сколько денег, как идёт месяц, какие точки тянут, что не сделано.
 */

/* ── Главная сумма ──────────────────────────────────────────────────────
 * Карточка «на счетах» — единственное место в приложении с самым крупным
 * кеглем. Если крупных чисел на экране два, взгляд не знает, куда идти. */
.hero {
  padding: var(--s5) var(--s4);
}
.hero .source { margin-bottom: var(--s2); }
.hero .money.hero { display: block; }
.hero-note {
  margin-top: var(--s2);
  font-size: var(--t-footnote);
  color: var(--ink-3);
}

.hero-banks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.bank-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px var(--s3);
  border-radius: var(--r-row);
  background: var(--surface-2);
}
.bank-chip .b-name {
  font-size: var(--t-caption2);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Месяц ──────────────────────────────────────────────────────────── */
.month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.month-cell .m-label {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-bottom: 2px;
}
.month-cell .m-delta {
  margin-top: 2px;
  font-size: var(--t-caption2);
  font-weight: 600;
}
.m-delta.up { color: var(--income); }
.m-delta.down { color: var(--expense); }
.m-delta.flat { color: var(--ink-3); }

@media (max-width: 400px) {
  .month-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
}

.month-progress {
  margin-top: var(--s3);
  font-size: var(--t-footnote);
  color: var(--ink-3);
  line-height: 1.45;
}

.month-note {
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-row);
  font-size: var(--t-footnote);
  line-height: 1.45;
}
.month-note.warn { background: var(--warn-soft); color: var(--warn); }

/* «К 31 числу ожидается» — план из таблицы. Подложка и рамка нужны, чтобы блок
   читался как ОТДЕЛЬНАЯ величина, а не как продолжение фактических чисел
   выше: подмешанный в факт план — самая дорогая ошибка этого проекта. */
.expect {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface-2);
  border: .5px dashed var(--hairline-strong);
}
.expect .e-title {
  font-size: var(--t-caption2);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}
.expect .e-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
.expect .e-label { font-size: var(--t-caption); color: var(--ink-3); margin-bottom: 2px; }
.expect .e-note {
  margin-top: var(--s3);
  font-size: var(--t-footnote);
  color: var(--ink-3);
  line-height: 1.4;
}

/* ── Требует внимания ───────────────────────────────────────────────── */
.attention-list { display: grid; gap: var(--s2); }

.att {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-row);
  background: var(--surface-2);
  text-align: left;
  color: inherit;
}
.att:active { background: var(--surface-3); }
.att .att-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.att.warn .att-dot { background: var(--warn); }
.att.bad .att-dot { background: var(--expense); }
.att .att-text { flex: 1; min-width: 0; font-size: var(--t-subhead); }
.att .att-count {
  font-size: var(--t-headline);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.att.warn .att-count { color: var(--warn); }
.att.bad .att-count { color: var(--expense); }

.all-clear {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-row);
  background: var(--income-soft);
  color: var(--income);
  font-size: var(--t-subhead);
  font-weight: 500;
}
.all-clear svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
                 stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Задачи на дашборде ─────────────────────────────────────────────── */
.task-mini {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.task-mini + .task-mini { border-top: .5px solid var(--hairline); }
.task-mini .t-title { flex: 1; min-width: 0; font-size: var(--t-subhead);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-mini .t-due { font-size: var(--t-caption); color: var(--ink-3); white-space: nowrap; }
.task-mini .t-due.overdue { color: var(--expense); font-weight: 600; }

/* На широком экране обзор идёт в две колонки: карточки узкие, а места много,
   и одна колонка на 1200 пикселях выглядит недоделанной. */
@media (min-width: 1000px) {
  .dash-cols {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--s4);
    align-items: start;
  }
  .dash-cols > div { min-width: 0; }
}