/* Калькулятор поверх интерфейса (`js/calc.js`).

   Своим листом, а не строками в app.css: тот уже под мегабайт и его правят в
   несколько рук — новые инструменты давно кладут отдельно (почта, календарь
   у полей даты, меню дела).

   Откуда что взято:

   * **корпус** — матовое стекло панели звонка: `--glass` под `--glass-blur`,
     волосяная рамка `--glass-line` и оконная тень `--shadow-win`. По правилам
     системы стекло разрешено всплывающему слою и запрещено спискам, а это
     ровно всплывающий слой;
   * **клавиши и цифры** — из календаря: те же `--surface-2` на подложке,
     тот же радиус `--r-sm`, тот же переход по `--speed` и обязательные
     `tabular-nums` — от прыгающих цифр в счётчике устаёшь за минуту;
   * **высота слоя 84** — между мини-чатом (80) и окнами (90): калькулятор
     открывают поверх переписки, чтобы посчитать прямо в разговоре, но окно
     с формой он закрывать не должен. */

.calc {
  position: fixed; z-index: 84;
  left: 90px; top: 90px; width: 264px;
  display: flex; flex-direction: column;
  border-radius: var(--r); border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-win);
  overflow: hidden;
}
.calc.hidden { display: none; }

/* Шапка — она же ручка. Кнопки при этом остаются кнопками: за них не тащат
   (проверка `closest('button')` в `enableDrag`). */
.calc__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  padding: 7px 7px 7px 12px;
  border-bottom: 1px solid var(--glass-line);
  cursor: grab; touch-action: none;
}
.calc.is-dragging .calc__head { cursor: grabbing; }
.calc.is-dragging { user-select: none; }
.calc__title {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); white-space: nowrap; overflow: hidden;
}
.calc__act { width: 28px; height: 28px; }

/* Экран. Строка выражения сверху мелкой, итог под ней крупным — так стоит в
   любом счётчике, и так читается порядок: что набрал, что вышло. */
.calc__screen {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--glass-line);
}
.calc__line {
  /* Высота держится и на пустой строке: в покое запись пуста, и без этого
     экран подпрыгивал бы на первой же набранной цифре. */
  min-height: 18px;
  font-size: 13px; line-height: 1.4; color: var(--text-soft);
  text-align: right; white-space: nowrap;
  overflow-x: auto; overflow-y: hidden;
  font-variant-numeric: tabular-nums;
  /* Полосу прокрутки не показываем: строка уезжает сама, за неё не тянут. */
  scrollbar-width: none;
}
.calc__line::-webkit-scrollbar { display: none; }
/* Законченная запись гаснет: ответ под ней главнее. */
.calc__line.is-done { color: var(--text-faint); }

.calc__out {
  min-height: 30px;
  font-size: 25px; line-height: 1.2; font-weight: 600;
  color: var(--text); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Пока «=» не нажато, итог — предварительный, и показан бледнее: иначе
   незаконченная строка выглядит посчитанной. */
.calc__out.is-preview { color: var(--text-soft); font-weight: 550; }

.calc__keys {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 10px 12px 12px;
}

.calc__key {
  height: 42px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--surface-2), transparent 30%);
  color: var(--text); font-size: 16px; font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--speed), transform 80ms var(--ease);
}
.calc__key:hover { background: var(--surface-3); }
/* Клавиша проседает под пальцем — как кнопки панели звонка. */
.calc__key:active { transform: scale(.94); }
.calc__key:focus-visible { outline: none; box-shadow: var(--ring); }

/* Служебные — тусклее цифр: их нажимают реже, и спорить за внимание им не за что. */
.calc__key.is-soft {
  background: color-mix(in oklab, var(--surface-2), transparent 60%);
  color: var(--text-soft); font-size: 14.5px;
}
.calc__key.is-soft:hover { background: var(--surface-2); color: var(--text); }
.calc__key.is-clear { color: var(--red); }

/* Действия — акцентом, как плитка дела в календаре: тот же `--accent-soft`
   под тем же `--accent-text`. */
.calc__key.is-op {
  background: var(--accent-soft); color: var(--accent-text); font-size: 18px;
}
.calc__key.is-op:hover { background: color-mix(in oklab, var(--accent-soft), var(--accent) 18%); }

/* «Равно» во всю ширину: по нему промахиваются чаще всего. */
.calc__key.is-eq {
  grid-column: 1 / -1; height: 44px;
  background: var(--accent); color: var(--on-accent); font-size: 18px;
  border-color: transparent;
}
.calc__key.is-eq:hover { background: var(--accent); filter: brightness(1.06); }

/* На телефоне окно поверх работы смысла не имеет — там считают системным
   калькулятором, до которого один жест. Значок в меню на телефон и не
   выводится (`app.js`), но если окно осталось открытым с компьютера через
   общий профиль, пусть хотя бы не вылезает за край. */
@media (max-width: 820px) {
  .calc { width: min(264px, calc(100vw - 24px)); }
}

/* ---------- два вида окна ----------

   Роман 21.09.2026: «радикально хочу сделать кальк без цифр кнопок — у меня
   же есть нампад?.. вообще можно все кнопки убрать чтобы не мешали».

   Мини-вид — одно табло: запись и ответ, больше ничего. Клавиши не прячутся
   прозрачностью, а убираются из раскладки: спрятанная сетка держала бы под
   собой сто семьдесят точек пустоты, а весь смысл вида в том, чтобы окно
   стало маленьким. */
.calc.is-mini { width: 232px; }
.calc.is-mini .calc__keys { display: none; }
/* Табло занимает всё, что осталось, и прижимает содержимое к низу: окно
   растягивают, а смотрят всегда в одно место — на последнюю строку. */
.calc.is-mini .calc__screen {
  flex: 1; min-height: 0; justify-content: flex-end; border-bottom: 0;
}
/* Рост ответа не отдаём: при сжатии окна табло ужимается до строки записи,
   а цифры режутся пополам (снимок Романа 21.09.2026). Нижний предел окна
   считается из этих же величин — см. `MIN_H` в `calc.js`. */
.calc.is-mini .calc__out { min-height: 30px; }

/* Имя не обрезаем никогда: кнопки шапки не сжимаются, а ширину окна снизу
   держит `MIN_W`. Многоточие в имени системы читается как поломка. */
.calc__act { flex: 0 0 auto; }

/* Подсказка вместо пустой записи — только в мини-виде: клавиш в окне нет, и
   сказать, чем считать, больше негде. */
.calc__line.is-hint {
  color: var(--text-faint); font-size: 11.5px; text-align: right;
}

/* Кнопка вида. Нажата — значит клавиши на месте; отпущена — табло.
   Подсвечена акцентом, как выбранный раздел в меню: это переключатель
   состояния, а не действие. */
.calc__view.is-on { background: var(--accent-soft); color: var(--accent-text); }

/* Ручка размера — та же, что у мини-чата, и только у мини-вида: у вида с
   клавишами размер задан сеткой. */
.calc__grip {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  width: 16px; height: 16px; display: none;
  cursor: nwse-resize; touch-action: none;
  opacity: .5;
  transition: opacity var(--speed);
  background: linear-gradient(135deg,
    transparent 0 46%, var(--accent) 46% 54%,
    transparent 54% 64%, var(--accent) 64% 72%,
    transparent 72% 82%, var(--accent) 82% 90%, transparent 90%);
}
.calc.is-mini .calc__grip { display: block; }
.calc__grip:hover { opacity: 1; }
.calc.is-sizing { user-select: none; }

/* ---------- фиолетовое ----------

   Роман 21.09.2026: «подумай, куда можно добавить фиолетовые элементы в
   кальк? чтобы было приятно с ним взаимодействовать».

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

/* Точка в имени — как в заставке почты, только меньше: там 7 точек на
   тридцать четвёртом кегле, здесь 5 на тринадцатом. */
.calc__title {
  font-family: "Onest", var(--font);
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.calc__dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin: 0 3px 0 1px; vertical-align: 1px;
}

/* Табло с отсветом: два мягких пятна по углам, как на стекле панели звонка,
   только неподвижных. Видно их ровно настолько, чтобы табло читалось своим
   местом, а не вырезом в окне. */
.calc__screen {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in oklab, var(--accent), transparent 88%), transparent 62%),
    radial-gradient(100% 120% at 0% 100%,
      color-mix(in oklab, var(--accent), transparent 93%), transparent 60%);
}

/* Ответ загорается акцентом. Переход — по цвету: число меняется мгновенно, а
   цвет доезжает, и это читается как «посчиталось», а не как подмена. */
.calc__out { transition: color 160ms var(--ease); }
.calc__out.is-answer { color: var(--accent-text); }