/* =========================================================================
   Калькулятор.

   Что было и почему переделано.

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

   Как это сделано у тех, кто продаёт доходность всерьёз (смотрел Lido):
   одна спокойная карточка, поле ввода с единицей, а результат — списком
   «строка → значение» с правым выравниванием. Цветом выделено ровно одно
   число, а не половина экрана. Числа выровнены по разряду, поэтому их
   можно сравнивать глазом.

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

.calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

@media (min-width: 940px) {
  .calc { grid-template-columns: 1fr 1.05fr; }
}

.calc-in,
.calc-out {
  background: var(--color-ink-2);
  padding: clamp(1.05rem, 2.4vw, 1.5rem);
  display: flex;
  flex-direction: column;
}

/* Правая половина чуть светлее — разделение без заливки во весь блок. */
.calc-out { background: var(--color-block-2); }

/* ---------- шапки половин ---------- */
.calc-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 1rem;
}

.calc-k {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-h2c);
}

.calc-note {
  font-family: var(--font-mono);
  font-size: .53rem;
  letter-spacing: .1em;
  color: var(--color-mute);
  text-align: right;
}

/* ---------- поле ввода ---------- */
/* Ползунок остаётся, но вводить руками должно быть можно. Человек, который
   держит конкретное число монет, не станет ловить его ползунком на
   логарифмической шкале — он его напечатает. */
.calc-field {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  border-bottom: 1px solid var(--color-rule-2);
  padding-bottom: .35rem;
}

.calc-amount {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--color-bone);
  font-family: var(--font-disp);
  font-weight: 900;
  font-stretch: 76%;
  letter-spacing: -.055em;
  font-size: clamp(1.75rem, 5vw, 2.9rem);
  line-height: 1.06;
  font-variant-numeric: tabular-nums;
  padding: 0;
}

.calc-amount::selection { background: var(--color-neon); color: var(--color-ink); }

.calc-field:focus-within { border-bottom-color: var(--color-neon); }

.calc-unit {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--color-mute);
  flex: none;
}

.calc-in input[type="range"] { margin-top: .5rem; }

/* ---------- строки значений ---------- */
/* Списком, а не плитками: плитки заставляют сравнивать числа разного
   размера в разных углах, а список выравнивает их по одному краю. */
.calc-rows {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0;
  font-family: var(--font-mono);
}

.calc-rows.tight { margin-top: .9rem; }

.calc-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .52rem 0;
  border-bottom: 1px solid var(--color-rule);
}

.calc-rows > div:last-child { border-bottom: 0; }

.calc-rows dt {
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--color-mute);
}

.calc-rows dd {
  margin: 0;
  font-size: .82rem;
  color: var(--color-bone);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Годовая — единственная строка, выделенная цветом. Она же та, ради
   которой сюда пришли, и та, которая врёт легче всего: подпись «simple»
   рядом обязательна. */
.calc-rows .hi dd {
  color: var(--color-neon);
  font-size: .95rem;
}

.calc-in { justify-content: space-between; }

/* ---------- главное число ---------- */
.calc-lead {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.calc-big {
  font-family: var(--font-disp);
  font-weight: 900;
  font-stretch: 74%;
  letter-spacing: -.06em;
  font-size: clamp(2.6rem, 8vw, 4rem);
  line-height: .92;
  color: var(--color-neon);
  font-variant-numeric: tabular-nums;
}

.calc-per {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  color: var(--color-mute);
}

/* ---------- оговорка ---------- */
/* Она обязана быть видна, а не спрятана мелким серым: считается модель, а
   не запись выплат, и человек должен это прочитать, а не пропустить.
   Полоска слева — тот же приём, что у пустого реестра. */
.calc-out .caveat {
  margin-top: auto;
  padding: .7rem .85rem;
  border-left: 2px solid var(--color-rule-2);
  background: color-mix(in srgb, var(--color-ink) 45%, transparent);
  font-family: var(--font-mono);
  font-size: .58rem;
  line-height: 1.65;
  color: var(--color-h2c);
}

.calc-out .caveat b { color: var(--color-bone); font-weight: 500; }

/* ---------- чип с балансом кошелька ---------- */
/* Появляется только когда кошелёк подключён и в нём есть наш токен.
   Пустая кнопка MAX, которая ничего не делает, — худший вид поломки:
   выглядит рабочей и молчит. */
.chip.wallet-max {
  border-color: color-mix(in srgb, var(--color-neon) 45%, transparent);
  color: var(--color-neon);
}