/* CalCash · сайт · калькуляторы (листы Calculator и Calculator EN).
   Только переменные tokens.css. Общие классы — в static/site.css. */

.calc-page { display: flex; flex-direction: column; gap: var(--site-section-gap); padding-top: 16px; padding-bottom: var(--site-section-gap); }

/* ---------- первый экран ---------- */
.calc-top { display: flex; flex-direction: column; gap: 20px; }
.calc-intro { display: flex; flex-direction: column; gap: 10px; max-width: 840px; }
.calc-intro .crumbs { margin-bottom: 6px; }

.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin: 0; }
.calc-fields { display: flex; flex-direction: column; gap: 20px; }
.calc-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.calc-pair-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.calc-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-set > legend { padding: 0; margin-bottom: 8px; }

/* активность: строки-радио с коэффициентом */
.calc-acts {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--cc-color-border); border-radius: var(--cc-radius-sm);
}
.calc-act {
  min-height: 56px; padding: 8px 12px; margin-top: -1px;
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--cc-color-border);
  background: var(--cc-color-surface); cursor: pointer;
  font-size: 15px; line-height: 20px;
}
.calc-act:hover { background: var(--cc-color-surface-hover); }
.calc-act:has(input:checked) { background: var(--cc-color-accent-soft); box-shadow: inset 3px 0 0 var(--cc-color-accent); }
.calc-act-dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1px solid var(--cc-color-border-strong); background: var(--cc-color-surface);
}
.calc-act input:checked ~ .calc-act-dot { border: 6px solid var(--cc-color-action); }
.calc-act input:focus-visible ~ .calc-act-dot { box-shadow: var(--cc-focus-ring); }
.calc-act-name { flex: 1; min-width: 0; }
.calc-act-k { font-weight: 500; color: var(--cc-color-text-secondary); white-space: nowrap; }

.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* темп: сегмент; показывается только при цели «Похудение» */
.calc-pace .segment > label > span { font: var(--cc-type-label); }
.pace-short { display: none; }
.calc-grid:has(input[name="goal"]:checked:not([value="lose"])) .calc-pace { display: none; }
@media (max-width: 767px) {
  .pace-full { display: none; }
  .pace-short { display: inline; }
}

/* ---------- карточка результата ---------- */
.calc-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.calc-result { display: flex; flex-direction: column; gap: 16px; padding: 20px 16px; }
.calc-result-head { display: flex; flex-direction: column; gap: 4px; }
.calc-result-label { font: var(--cc-type-caption); color: var(--cc-color-text-tertiary); }
.calc-result-main { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.calc-big { font: var(--cc-type-display-number); letter-spacing: var(--cc-tracking-display-number); }
.calc-result-unit { font: 500 15px/20px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.calc-floor { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font: var(--cc-type-caption); color: var(--cc-color-text-secondary); }
.calc-floor .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--cc-color-warning); }

.calc-macros {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--cc-color-border);
}
.calc-macro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc-macro-bar { height: 4px; border-radius: 4px; background: var(--cc-color-protein); }
.is-fat .calc-macro-bar { background: var(--cc-color-fat); }
.is-carbs .calc-macro-bar { background: var(--cc-color-carbs); }
.calc-macro-v { font: var(--cc-type-number-md); }
.calc-macro-l { font: var(--cc-type-caption); color: var(--cc-color-text-secondary); }

.calc-extras { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--cc-color-border); }
.calc-extras:empty { display: none; }
.calc-extra {
  min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--cc-color-border); font: var(--cc-type-body-compact);
}
.calc-extra dt { color: var(--cc-color-text-secondary); }
.calc-extra dd { margin: 0; display: flex; align-items: baseline; gap: 3px; font: var(--cc-type-number-sm); white-space: nowrap; }
.calc-extra-u { font: 400 12px/16px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }

.calc-daily {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--cc-color-surface-sunken); border-radius: var(--cc-radius-md);
}
.calc-daily-text { display: flex; flex-direction: column; gap: 2px; }
.calc-daily-lead { font: var(--cc-type-body-compact); color: var(--cc-color-text-secondary); }
.calc-daily .btn { width: 100%; }

/* Сноска про врача — прямо под цифрой, приглушённо: видно, но не пугает. */
.calc-medical {
  margin: 0; padding: 0 4px;
  font: var(--cc-type-caption); color: var(--cc-color-text-tertiary); text-wrap: pretty;
}

/* ---------- объясняющие разделы, вопросы, другие калькуляторы ---------- */
/* ---------- разбор расчёта шагами: образец scripts/design/calc-edu-ref.png ---------- */
.calc-edu {
  position: relative; display: flex; flex-direction: column; gap: 56px; padding: 8px 0;
}
.edu-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.edu-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--cc-color-accent-soft); color: var(--cc-color-accent); font: 600 12px/16px var(--cc-font-ui); letter-spacing: .04em; text-transform: uppercase;
}
.edu-pill svg { width: 14px; height: 14px; }
.edu-title { margin: 0; font: 600 clamp(30px, 3.4vw, 46px)/1.1 var(--cc-font-heading); color: var(--cc-color-text); letter-spacing: -.01em; }
.edu-sub { margin: 0; font: 400 16px/24px var(--cc-font-ui); color: var(--cc-color-text-secondary); }

.edu-step { --t: var(--cc-color-accent); --t-soft: var(--cc-color-accent-soft); --t-glow: rgba(47, 107, 74, .38);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.edu-step.tone-blue { --t: var(--cc-color-protein); --t-soft: #E3EAEF; --t-glow: rgba(79, 122, 148, .40); }
.edu-step.tone-ochre { --t: var(--cc-color-fat); --t-soft: #F4ECDA; --t-glow: rgba(179, 146, 74, .40); }
.edu-step.tone-terra { --t: var(--cc-color-carbs); --t-soft: #F3E6DF; --t-glow: rgba(160, 114, 90, .40); }
.edu-step:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -44px; width: 14px; height: 14px; margin-left: -7px;
  background: var(--cc-color-text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 10px var(--t-glow));
}
.edu-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.edu-text p { margin: 0; font: 400 16px/26px var(--cc-font-ui); color: var(--cc-color-text-secondary); text-wrap: pretty; }
.edu-num { font: 300 clamp(52px, 5vw, 72px)/1 var(--cc-font-number); color: var(--t); opacity: .75; letter-spacing: -.02em; }
.edu-h { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.edu-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--t); color: #fff; box-shadow: 0 10px 22px -8px var(--t-glow);
}
.edu-ico svg { width: 22px; height: 22px; }
.edu-h2 { margin: 0; font: 600 clamp(22px, 2vw, 28px)/1.2 var(--cc-font-heading); color: var(--cc-color-text); }

.edu-card {
  position: relative; min-width: 0; padding: 24px; border-radius: 22px; overflow: hidden;
  background: var(--cc-color-surface); border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 1px var(--cc-color-border), 0 28px 60px -28px var(--t-glow), 0 0 50px -20px var(--t-glow);
}
.edu-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.edu-checks li { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/22px var(--cc-font-ui); color: var(--cc-color-text); }
.edu-checks svg { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--t-soft); color: var(--t); }
.edu-caption { margin: 12px 0 0; font: 400 13px/18px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.edu-card .table-wrap { margin: 0; }
.edu-card.has-photo { padding: 0; aspect-ratio: 4 / 3; }
.edu-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .calc-edu { gap: 88px; }
  .edu-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .edu-step:not(:last-child)::after { bottom: -58px; }
  .edu-step.is-flip .edu-text { order: 2; }
  .edu-card { padding: 32px; }
}

/* Живая ссылка на бота после обучающего блока — абзац, а не ещё одна кнопка. */
.calc-bot-note { max-width: 680px; }
.calc-bot-note p { margin: 0; text-wrap: pretty; color: var(--cc-color-text-secondary); }

.calc-faq, .calc-related { display: flex; flex-direction: column; gap: 16px; }

/* ---------- полоса с главной цифрой (телефон) ---------- */
.calc-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(56px + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: 8px;
  background: var(--cc-color-surface); border-top: 1px solid var(--cc-color-border); box-shadow: var(--cc-shadow-sheet);
  color: var(--cc-color-text); text-decoration: none;
}
.calc-bar:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--cc-color-focus); }
.calc-bar-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--cc-type-caption); color: var(--cc-color-text-secondary); }
.calc-bar-v { font: var(--cc-type-number-lg); letter-spacing: var(--cc-tracking-number-lg); white-space: nowrap; }
.calc-bar-u { font: 500 13px/16px var(--cc-font-ui); color: var(--cc-color-text-secondary); }

@media (min-width: 768px) {
  .calc-top { gap: 32px; }
  .calc-intro { gap: 12px; }
  .calc-fields { gap: 24px; }
  .calc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .calc-act { padding: 8px 16px; gap: 12px; font-size: 16px; line-height: 24px; }
  .calc-pace .segment { max-width: 420px; }
  .calc-result { padding: 24px; gap: 20px; }
  .calc-daily { padding: 20px; }
  .calc-related { gap: 24px; }
}

@media (min-width: 1080px) {
  .calc-page { padding-top: 24px; }
  .calc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .calc-fields { grid-column: 1 / span 7; }
  .calc-aside { grid-column: 8 / span 5; position: sticky; top: 88px; }
  .calc-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .calc-faq > .h2 { grid-column: 1 / span 4; }
  .calc-faq > .faq { grid-column: 5 / span 8; }
  .calc-bar { display: none !important; }
}

/* ======================================================================================
   ДВЕ ПАНЕЛИ по образцу владельца (scripts/design/calc-ref.png), цвета наши:
   слева — цветная панель с формой (зелёная), справа — белая панель «Ваш результат».
   Пол и цели — плитки (выбранная тёмная), числа — поля-таблетки с рамкой, активность — дорожка
   с точками (название выбранного уровня над дорожкой). Движок (calc-engine.js) завязан только на
   name и id — классы можно менять.
   ====================================================================================== */
.calc-grid { gap: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(20, 40, 28, .5), 0 0 0 1px var(--cc-color-border); }
.calc-grid .calc-fields {
  position: relative; gap: 30px; padding: 32px 22px; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(160deg, #3A8468, #2F6B4A 60%, #285C40); color: #FFF;
}
.calc-grid .field-label, .calc-grid .field > label { color: #FFF; font: 500 20px/26px var(--cc-font-ui); letter-spacing: -.01em; margin-bottom: 14px; display: block; }
.calc-grid .field > label { font-size: 13px; line-height: 18px; margin-bottom: 8px; color: rgba(255, 255, 255, .75); }
/* плитки: пол, цель, телосложение, темп */
.calc-grid .segment { gap: 10px; padding: 0; border: 0; background: none; height: auto; }
.calc-grid .segment > label > span, .calc-grid .calc-chips .chip {
  height: 56px; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px;
  border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8);
  font: 600 15px/1.2 var(--cc-font-ui); text-align: center; box-shadow: none;
  transition: background 150ms ease, color 150ms ease;
}
.calc-grid .segment > label > span:hover, .calc-grid .calc-chips .chip:hover { background: rgba(255, 255, 255, .2); color: #FFF; }
.calc-grid .segment > label > input:checked + span, .calc-grid .calc-chips input:checked + .chip {
  background: #121312; color: #FFF; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6);
}
.calc-grid .segment > label > input:focus-visible + span, .calc-grid .calc-chips input:focus-visible + .chip { outline: 2px solid #FFF; outline-offset: 2px; }
.calc-grid .calc-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.calc-grid .calc-chips > label { display: flex; }
/* числа — таблетки с белой рамкой */
.calc-grid .input {
  height: 48px; padding: 0 20px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 999px;
  background: transparent; color: #FFF; font: 600 16px/1 var(--cc-font-number);
}
.calc-grid .input:focus { outline: none; border-color: #FFF; background: rgba(255, 255, 255, .08); }
.calc-grid .field-error { color: #FFE3C2; }
/* активность — дорожка с точками */
.calc-grid .calc-acts {
  position: relative; flex-direction: row; justify-content: space-between; overflow: visible;
  padding-top: 34px; border: 0; border-radius: 0;
}
.calc-grid .calc-acts::before { content: ""; position: absolute; left: 18px; right: 18px; top: 52px; height: 2px; background: rgba(255, 255, 255, .35); }
.calc-grid .calc-act {
  position: static; flex: 0 0 auto; min-height: 0; margin: 0; padding: 0; flex-direction: column; gap: 10px;
  border: 0; background: none !important; box-shadow: none !important; font-size: 12px;
}
.calc-grid .calc-act-dot { position: relative; z-index: 1; width: 36px; height: 36px; border: 2px solid rgba(255, 255, 255, .7); background: #2F6B4A; }
.calc-grid .calc-act input:checked ~ .calc-act-dot { border: 2px solid #FFF; background: #2F6B4A; box-shadow: inset 0 0 0 9px #2F6B4A, inset 0 0 0 20px #121312; }
.calc-grid .calc-act input:focus-visible ~ .calc-act-dot { outline: 2px solid #FFF; outline-offset: 3px; }
.calc-grid .calc-act-k { color: rgba(255, 255, 255, .75); font: 700 12px/1 var(--cc-font-ui); letter-spacing: .04em; }
.calc-grid .calc-act input:checked ~ .calc-act-k { color: #FFF; }
.calc-grid .calc-act-name { display: none; }
.calc-grid .calc-act input:checked ~ .calc-act-name {
  display: block; position: absolute; left: 0; right: 0; top: 0; font: 600 14px/20px var(--cc-font-ui); color: #FFF;
}
/* правая панель — результат */
.calc-grid .calc-aside { gap: 18px; padding: 32px 22px; background: var(--cc-color-surface); }
.calc-grid .calc-result { padding: 0; border: 0; box-shadow: none; background: none; gap: 22px; }
.calc-grid .calc-result-label { font: 500 20px/26px var(--cc-font-ui); color: var(--cc-color-text); }
.calc-grid .calc-big { font: 700 clamp(44px, 5vw, 60px)/1 var(--cc-font-ui); letter-spacing: -.03em; }
.calc-grid .calc-result-unit { font: 700 clamp(22px, 2.6vw, 30px)/1 var(--cc-font-ui); color: var(--cc-color-text); }
.calc-grid .calc-macros { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; border-top: 0; }
.calc-grid .calc-macro {
  flex-direction: row; align-items: center; justify-content: space-between; min-height: 40px;
  border-bottom: 1px solid var(--cc-color-border);
}
.calc-grid .calc-macro-bar { width: 10px; height: 10px; border-radius: 50%; order: -1; flex: none; margin-right: 10px; }
.calc-grid .calc-macro-l { flex: 1; order: 0; font: 400 14px/20px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.calc-grid .calc-macro-v { order: 1; font: 700 15px/20px var(--cc-font-number); }
.calc-grid .calc-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; border-top: 0; }
.calc-grid .calc-extra {
  min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px;
  border: 0; border-radius: 8px; background: var(--cc-color-surface-sunken); text-align: center;
}
.calc-grid .calc-extra dt { font: 500 13px/16px var(--cc-font-ui); }
.calc-grid .calc-daily { border-radius: 16px; background: var(--cc-color-accent-soft); }
.calc-grid .calc-daily .btn { border-radius: 999px; background: var(--cc-color-accent); border-color: var(--cc-color-accent); }
@media (min-width: 1080px) {
  .calc-grid { gap: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .calc-grid .calc-fields { grid-column: 1 / span 6; padding: 48px 44px; }
  .calc-grid .calc-aside { grid-column: 7 / span 6; position: static; padding: 48px 44px; }
  .calc-grid .calc-fields::after {  /* стрелка-выступ панели к результату, как в образце */
    content: ""; position: absolute; right: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
    background: #2F6B4A; transform: rotate(45deg); border-radius: 3px;
  }
  .calc-grid .calc-result { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .calc-grid .calc-result > * { grid-column: 1 / -1; }
  .calc-grid .calc-result-head { grid-column: 1; }
  .calc-grid .calc-macros { grid-column: 2; grid-row: 1; margin-top: 34px; }
}
.calc-grid .calc-result-main { flex-wrap: nowrap; column-gap: 10px; }
.calc-grid .calc-result-unit { font-size: clamp(16px, 1.5vw, 20px); white-space: nowrap; color: var(--cc-color-text-secondary); }
.calc-grid .calc-result-main { flex-wrap: wrap; row-gap: 6px; }
.calc-grid .calc-result-unit { white-space: normal; min-width: 0; }
.calc-grid .segment > label > span, .calc-grid .calc-chips .chip { letter-spacing: .03em; font-size: 12px; white-space: normal; }
@media (max-width: 767px) { .calc-grid .calc-chips { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } }

/* ---------- верх страницы (_calc_hero): образец scripts/design/calc-hero-ref.png ---------- */
.ch {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "bento";
  padding: 20px 16px 16px; border-radius: 28px;
  background: var(--cc-color-surface); border: 1px solid var(--cc-color-border);
  box-shadow: 0 30px 60px -40px rgba(42, 44, 42, .25);
}
.ch-body { display: contents; }
.ch-head { grid-area: head; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ch-title-row { display: flex; align-items: center; gap: 20px; }
.ch-title { margin: 0; font-family: var(--cc-font-heading); letter-spacing: -.01em; }
.ch-t1 { display: block; font-weight: 700; font-size: clamp(30px, 2.9vw, 42px); line-height: 1.05; color: var(--cc-color-text); }
.ch-t2 { display: block; font-weight: 400; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; color: var(--cc-color-text-secondary); }

.ch-ring {
  --ch-ring: conic-gradient(var(--cc-color-protein) 0 108deg, var(--cc-color-fat) 0 216deg, var(--cc-color-carbs) 0 360deg);
  flex: none; width: 84px; height: 84px; border-radius: 50%; position: relative;
  background: var(--ch-ring); display: grid; place-items: center;
}
.ch-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--cc-color-surface); box-shadow: 0 0 0 6px var(--cc-color-surface-sunken) inset; }
.ch-ring-v { position: relative; font: 600 14px/1 var(--cc-font-ui); color: var(--cc-color-text); }

/* сцена с предметом */
.ch-stage { grid-area: stage; position: relative; min-width: 0; display: grid; place-items: center; }
.ch-obj { width: min(100%, 520px); height: auto; aspect-ratio: 1; display: block;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.ch-chip {
  position: absolute; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border-radius: 16px;
  background: rgba(253, 253, 251, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(42, 44, 42, .28); border: 1px solid rgba(255, 255, 255, .7);
}
.ch-chip-l { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.ch-chip-l svg { width: 16px; height: 16px; color: var(--cc-color-accent); }
.ch-chip-v { font: 600 20px/24px var(--cc-font-number); color: var(--cc-color-text); white-space: nowrap; }
.ch-chip-v small { font: 500 13px/16px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.ch-chip-a { max-width: 58%; }
.ch-chip-a .ch-chip-v { white-space: normal; }
.ch-chip-a .ch-chip-v small { display: block; margin-top: 2px; }
.ch-chip-a { left: 0; top: 14%; }
.ch-chip-b { right: 0; top: 46%; background: rgba(42, 44, 42, .78); border-color: rgba(255, 255, 255, .12); }
.ch-chip-b .ch-chip-l { color: rgba(243, 243, 240, .7); }
.ch-chip-b .ch-chip-v { font: 500 15px/20px var(--cc-font-ui); color: var(--cc-color-text-on-inverse); }
.ch-chip-c { left: 2%; bottom: 8%; gap: 6px; min-width: 170px; }
.ch-macro { display: flex; align-items: baseline; gap: 8px; font: 400 13px/18px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.ch-macro::before { content: ""; width: 8px; height: 8px; border-radius: 50%; align-self: center; background: currentColor; }
.ch-macro b { font: 600 15px/18px var(--cc-font-number); color: var(--cc-color-text); min-width: 44px; }
.ch-macro.is-protein::before { background: var(--cc-color-protein); }
.ch-macro.is-fat::before { background: var(--cc-color-fat); }
.ch-macro.is-carbs::before { background: var(--cc-color-carbs); }

/* сетка карточек справа */
.ch-bento { grid-area: bento; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; min-width: 0; }
.ch-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  min-height: 60px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--cc-color-surface-sunken);
}
.ch-bar-name { flex: 1; min-width: 0; font: 600 15px/20px var(--cc-font-ui); color: var(--cc-color-text); }
.ch-bar-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--cc-color-surface); color: var(--cc-color-text-secondary);
}
.ch-bar-btn:first-of-type { background: var(--cc-color-accent); color: var(--cc-color-text-on-accent); }
.ch-bar-btn svg { width: 20px; height: 20px; }
.ch-cta {
  grid-column: 1 / -1; min-height: 60px; border-radius: 999px; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cc-color-accent); color: var(--cc-color-text-on-accent);
  font: 600 17px/22px var(--cc-font-ui); text-decoration: none;
  box-shadow: 0 16px 30px -16px rgba(47, 107, 74, .8);
}
.ch-cta:hover { background: var(--cc-color-accent-hover); }
.ch-cta svg { width: 22px; height: 22px; }

.ch-card {
  position: relative; min-width: 0; border-radius: 24px; padding: 20px;
  background: var(--cc-color-surface); border: 1px solid var(--cc-color-border);
  color: var(--cc-color-text); text-decoration: none;
}
.ch-lead { grid-column: 1 / -1; background: var(--cc-color-bg); }
.ch-lead p { margin: 0; font: 400 15px/23px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.ch-count { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.ch-count:hover, .ch-photo:hover { border-color: var(--cc-color-border-strong); }
.ch-count-l { display: flex; justify-content: space-between; align-items: center; font: 500 14px/18px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.ch-count-l svg { width: 20px; height: 20px; transform: rotate(45deg); }
.ch-count-v { font: 600 44px/1 var(--cc-font-number); }
.ch-count-u { font: 400 14px/18px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.ch-list { display: flex; flex-direction: column; gap: 12px; }
.ch-list-h { font: 500 14px/18px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.ch-list dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ch-list dt { font: 400 13px/16px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.ch-list dd { margin: 2px 0 0; font: 600 24px/28px var(--cc-font-number); color: var(--cc-color-text); }
.ch-photo { grid-column: 1 / -1; min-height: 220px; padding: 0; overflow: hidden; border: 0; display: flex; align-items: flex-end; }
.ch-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.7); }
.ch-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 44, 42, 0) 30%, rgba(42, 44, 42, .75)); }
.ch-photo-t { position: relative; z-index: 1; padding: 20px; font: 500 22px/28px var(--cc-font-ui); color: var(--cc-color-text-on-inverse); }
.ch-photo-go {
  position: absolute; z-index: 1; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(253, 253, 251, .22); backdrop-filter: blur(8px); color: #fff;
}
.ch-photo-go svg { width: 20px; height: 20px; transform: rotate(45deg); }

@media (max-width: 1023px) {
  /* на телефоне и планшете итог, «ещё калькуляторы» и бот уже есть ниже у результата — не дублируем */
  .ch-bar, .ch-count, .ch-list, .ch-photo { display: none; }
  .ch-lead { order: -1; padding: 16px; background: transparent; border: 0; }
  .ch-lead p { font-size: 15px; }
  .ch-bento { gap: 8px; }
  .ch-obj { width: min(78%, 420px); }
}
@media (max-width: 599px) {
  .ch { gap: 8px; }
  .ch-lead { padding: 0 2px; }
  .ch-chip { padding: 8px 10px; border-radius: 12px; }
  .ch-obj { width: 88%; }
  .ch-chip-l { font-size: 11px; line-height: 14px; }
  .ch-chip-a { top: 2%; left: -4px; }
  .ch-chip-b { top: auto; bottom: 2%; right: -4px; max-width: 62%; }
  .ch-chip-b .ch-chip-v { white-space: normal; }
  .ch-chip-c { top: 34%; bottom: auto; left: -4px; }
  .ch-chip-v { font-size: 16px; line-height: 20px; }
  .ch-chip-b .ch-chip-v { font-size: 13px; }
  .ch-chip-c { min-width: 0; }
  .ch-ring { width: 64px; height: 64px; }
  .ch-ring::before { inset: 9px; }
  .ch-ring-v { font-size: 12px; }
}

@media (min-width: 1024px) {
  .ch {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "head bento" "stage bento";
    grid-template-rows: auto 1fr;
    column-gap: 40px; row-gap: 8px; padding: 36px 36px 36px 44px; border-radius: 36px;
  }
  .ch-bento { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ch-bar { grid-column: span 3; }
  .ch-cta { grid-column: span 2; }
  .ch-lead { grid-column: span 3; padding: 24px; }
  .ch-count { grid-column: span 2; }
  .ch-list { grid-column: span 2; }
  .ch-photo { grid-column: span 3; min-height: 250px; }
  .ch-list[hidden] + .ch-photo { grid-column: 1 / -1; }
  .ch-stage { align-self: center; }
  .ch-obj { width: min(100%, 440px, 52vh); margin-top: -8px; }
}
.ch [hidden] { display: none !important; }