/* Фин-модель: факт по точкам, модель новой точки, прогноз на год.
 *
 * Экран смотрят и с телефона, и с компьютера, и это редкий случай, когда
 * разница между ними существенная: на телефоне читают выводы, на компьютере
 * разбирают таблицу. Поэтому итоги — карточками (читаются везде), а
 * помесячная таблица прокручивается внутри своего блока.
 */

.fm-tabs { margin-bottom: var(--s4); }

/* ── Плитки итогов ──────────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.tile {
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
}
.tile .t-label {
  font-size: var(--t-caption);
  color: var(--ink-3);
  margin-bottom: 4px;
}
.tile .t-value {
  font-size: var(--m-md);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tile .t-note { margin-top: 3px; font-size: var(--t-caption2); color: var(--ink-3); }
.tile.good .t-value { color: var(--income); }
.tile.bad .t-value { color: var(--expense); }
.tile.accent .t-value { color: var(--accent-text); }

/* ── Период ─────────────────────────────────────────────────────────── */
.fm-period {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

/* ── Точка: карточка разбора ────────────────────────────────────────── */
.pt-months { margin-top: var(--s3); }
.pt-cat {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px 0;
  border-top: .5px solid var(--hairline);
  font-size: var(--t-footnote);
}
.pt-cat .c-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.pt-cat .c-bar {
  flex: none;
  width: 64px; height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.pt-cat .c-bar i { display: block; height: 100%; background: var(--expense); opacity: .65; }
.pt-cat .c-val { font-variant-numeric: tabular-nums; min-width: 76px; text-align: right; }

/* ── Ползунки допущений ─────────────────────────────────────────────── */
.assume { display: grid; gap: var(--s4); }

.slider-field .s-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: 6px;
}
.slider-field .s-label { font-size: var(--t-footnote); color: var(--ink-2); }
.slider-field .s-value {
  font-size: var(--t-callout);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Ползунок красим сами: системный на iOS зелёный, и он спорит с акцентом. */
.slider-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: none;
  margin: 0;
}
.slider-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
.slider-field input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--surface-3);
}
.slider-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 0 0 .5px var(--hairline);
}
.slider-field input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 0 0 .5px var(--hairline);
}
.slider-field input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.assume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}

/* ── Разовые события прогноза ───────────────────────────────────────── */
.oneoff {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s2);
  padding: 8px 0;
  border-top: .5px solid var(--hairline);
  font-size: var(--t-footnote);
}
.oneoff .o-del {
  width: 30px; height: 30px;
  border: 0; background: none; border-radius: 8px;
  color: var(--ink-3);
  display: grid; place-items: center;
}
.oneoff .o-del svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
                     stroke-width: 2.2; stroke-linecap: round; }

/* Кассовый разрыв — то, ради чего прогноз и строят. */
.gap-warn {
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--expense-soft);
  color: var(--expense);
  margin-bottom: var(--s3);
}
.gap-warn .g-title { font-weight: 700; margin-bottom: 4px; }
.gap-warn .g-text { font-size: var(--t-footnote); }

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