/* Оформление калькулятора вычета.
 *
 * Селекторы привязаны к .tool-shell не для красоты: в base.css темы есть
 * `.tool-shell label`, `.tool-shell input`, `.tool-shell button` — вес
 * 0,1,1. Голый класс (0,1,0) им проигрывает, и label, который должен быть
 * inline-flex, остаётся block. Разницу видно только в вычисленных стилях.
 *
 * Инлайновых стилей здесь нет и быть не может: style-src в политике —
 * 'self'. Файл подключается tools.html только на своей странице.
 */

.tool-shell .vy-lead { font-size: 15px; line-height: 1.6; margin: 0 0 18px; }

.tool-shell .vy-row { margin-bottom: 18px; }
.tool-shell .vy-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
.tool-shell .vy-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 6px 0 0;
}

.tool-shell .vy-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tool-shell .vy-opts-col { flex-direction: column; gap: 7px; }
.tool-shell .vy-opt {
  display: inline-flex;
  gap: 7px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14.5px;
}
.tool-shell .vy-radio { width: auto; margin-top: 3px; }

.tool-shell .vy-input {
  width: 100%;
  max-width: 280px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* Ответ. Одно число крупно — за ним человек и пришёл, всё остальное
   объясняет, почему оно такое. */
.tool-shell .vy-out {
  margin-top: 22px;
  border-top: 1px solid var(--color-rule);
  padding-top: 18px;
}
.tool-shell .vy-sum { margin-bottom: 14px; }
.tool-shell .vy-sum-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.tool-shell .vy-sum-value {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 0;
}
.tool-shell .vy-sum-sub {
  font-size: 13.5px;
  color: var(--color-muted);
  margin: 6px 0 0;
}

.tool-shell .vy-why { font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; }

.tool-shell .vy-group {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 20px 0 10px;
}

.tool-shell .vy-item {
  border-left: 2px solid var(--color-rule);
  padding-left: 12px;
  margin-bottom: 12px;
}
/* Красная полоса — только там, где вычета не будет вовсе. Если красить
   ею и предупреждения, различие пропадает вместе с пользой. */
.tool-shell .vy-item-stop { border-left-color: var(--color-accent); }
.tool-shell .vy-item-title { font-weight: 600; font-size: 15px; margin: 0; }
.tool-shell .vy-item-why { font-size: 14px; line-height: 1.55; margin: 4px 0 0; }
.tool-shell .vy-item-norm {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-muted);
  margin: 4px 0 0;
}

.tool-shell .vy-list { margin: 0; padding-left: 18px; }
.tool-shell .vy-list-item { font-size: 14px; line-height: 1.55; margin-bottom: 6px; }

.tool-shell .vy-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
  border-top: 1px solid var(--color-rule);
  margin-top: 18px;
  padding-top: 12px;
}