/* =====================================================
   Калькулятор нормы на лендинге perek.us: печенье поверх
   общей разметки виджета.

   База — landing_calc.css (та же разметка и тот же
   landing_calc.js на обоих домах), здесь только то, чем
   карточка-этикетка отличается от стеклянной: цвета берутся
   из landing_perek.css, поэтому файл подключается после него.
   ===================================================== */
/* -------- Калькулятор: карточка-этикетка (база — landing_calc.css) -------- */
.calc-head { padding-bottom: 11px; border-bottom: 2.5px solid var(--text); }
.calc-title { font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.calc-badge {
  background: transparent; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
}
.calc-seg, .calc-num, .calc-macro { border: 1.5px solid var(--line); }
.calc-cap { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.calc-chip.is-on { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); }
.ring-num, .calc-num input { font-variant-numeric: tabular-nums; }
.calc-jump { font-weight: 700; }

/* -------- Результат расчёта -------- */
/* Кольцо — тонкая дуга по видимой дорожке. Жирный сплошной бублик забирал
   всё внимание у числа, ради которого человек сюда и пришёл, и прятал то,
   что дуга вообще-то дорисовывается. */
.ring-wrap, .ring { width: 152px; height: 152px; }
.ring-track { stroke: color-mix(in srgb, var(--primary) 15%, transparent); stroke-width: 7; }
.ring-fill { stroke-width: 7; }
.ring-num { font-size: 33px; letter-spacing: -0.03em; }
.ring-cap { font-size: 12px; }

.calc-res { gap: 12px; }
/* Серверные БЖУ: число сверху, полное название под ним. */
/* minmax(0, 1fr) вместо 1fr: иначе «Углеводы» раздували третью плитку, и три
   одинаковые по смыслу ячейки получались разной ширины. */
.calc-macros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-macro {
  grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: 6px; row-gap: 3px; padding: 11px 3px;
}
.calc-macro b { font-size: 13px; font-weight: 650; white-space: nowrap; }
.calc-macro > span:last-child { grid-column: 1 / -1; }
/* На узком телефоне (320 px) при равных колонках «Углеводы» в 13 px уже не
   влезает — поджимаем кегль и отступы, а не режем слово до «Угли». */
@media (max-width: 359px) {
  .calc-macros { gap: 6px; }
  .calc-macro { column-gap: 5px; padding: 11px 2px; }
  .calc-macro b { font-size: 12px; }
}
/* Три тёплых оттенка вместо зелёного среди карамели. */
.b-p { background: #c0563a; }
.b-f { background: #e0a23a; }
.b-c { background: #a8763f; }

.calc-tdee { font-size: 13px; }

/* -------- Куда ведёт норма (база — landing_calc.css) --------
   На этикетке подложка цветом смотрится пятном: рамка и штрихи держат карточку
   в том же наборе приёмов, что и остальные блоки этого дома. */
.calc-plan { background: var(--bg-2); border: 1.5px solid var(--line); }
.plan-date { font-variant-numeric: tabular-nums; }
.plan-val b { font-variant-numeric: tabular-nums; }
/* Значок на кнопке под результатом уезжал к левому краю: он был флекс-элементом
   рядом с текстом, который занимал всю оставшуюся ширину и центрировался уже
   внутри себя. Лечится так — не флекс, а обычный центрированный текст со
   значком в первой строке. */
.calc-res .calc-go {
  display: block; text-align: center;
  padding: 12px 18px; font-size: 16px; line-height: 1.3;
}
.calc-res .calc-go [data-lucide] {
  display: inline-block; vertical-align: -3px; margin-right: 7px;
}
/* Вторая строка снимает главный страх перед кнопкой, но не спорит с ней. */
.calc-res .calc-go small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; opacity: 0.62;
}

/* Тихий второй вход под кнопками результата: та же ссылка, что в первом
   экране, но растянутая на ширину колонки — иначе inline-flex прижал бы её к
   левому краю, а все соседи здесь центрированы. */
.calc-res .calc-alt { width: 100%; justify-content: center; }

/* Результат приходит не одним куском: сначала кольцо с числом, остальное
   догоняет, пока счётчик добегает до нормы. */
.calc-res { animation: none; }
.calc-res > * { animation: calcRise 0.5s var(--ease) both; }
.calc-res > *:nth-child(2) { animation-delay: 0.32s; }
.calc-res > *:nth-child(3) { animation-delay: 0.40s; }
.calc-res > *:nth-child(4) { animation-delay: 0.48s; }
.calc-res > *:nth-child(5) { animation-delay: 0.56s; }
.calc-res > *:nth-child(6) { animation-delay: 0.64s; }
.calc-res > *:nth-child(7) { animation-delay: 0.72s; }
@keyframes calcRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .calc-res > * { animation: none; } }