/* Калькулятор зарплаты: итог и разбор начислений.
   Шрифт, тема и компоненты — в /shared/styles.css. */

.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.total .sum { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--success); }
.total .cap { font-size: 13px; color: var(--muted-foreground); }

.breakdown { display: flex; flex-direction: column; gap: 14px; }
.line { display: flex; align-items: baseline; gap: 10px; }
.line .icon { font-size: 16px; color: var(--muted-foreground); align-self: center; }
.line .body { flex: 1; min-width: 0; }
.line .name { font-size: 14px; font-weight: 500; }
.line .formula { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.line .val { font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line .val.plus { color: var(--success); }
.line .val.minus { color: var(--destructive); }
.line.zero { opacity: .45; }
/* нулевую строку не красим — цвет там означал бы то, чего не начислили */
.line.zero .val { color: var(--foreground); }

/* ── Десктоп: ввод слева, итог справа ──────────────────────────────────── */
/* Порог — ширина, на которой две колонки по ~420 px ещё помещаются с полями. */
@media (min-width: 900px) {
  :root { --content-w: 900px; }
  .main { padding: 32px 24px; align-items: flex-start; }
  .wrap {
    max-width: 900px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 20px;
    align-items: start;
  }
  /* Форма занимает всю левую колонку, справа друг под другом итог и кнопка */
  #form { grid-column: 1; grid-row: 1 / span 2; }
  #result { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); }
  /* без align-self кнопка растянулась бы на всю высоту строки и уехала от итога */
  #reset { grid-column: 2; grid-row: 2; align-self: start; }
}