/* ============================================================
   Кредитный калькулятор (.by) — оформление по правилам R (CREDIT_R_2026_10_13).
   Общие поля, кнопки, карточка итога, ряд показателей, строка итога на телефоне — css/calc-shell.css.
   Здесь — переключатель режима в полосе, пары полей, дополнительные условия, таблица ставки рефинансирования,
   график остатка долга и график платежей; подача ответа (KC_UX_2026_10_27) — в конце файла.
   ============================================================ */

/* режим расчёта в полосе сверху; на телефоне — отдельной строкой во всю ширину */
.bhc-top .kc-mode{margin-left:8px}
.kc-mode .kc-ls{display:none}
/* полоса на ноутбуке: короткая подпись «Досрочно», чтобы название, режим и кнопки встали в одну строку */
@media (min-width:900px) and (max-width:1599px){.kc-mode .kc-lf{display:none}.kc-mode .kc-ls{display:inline}.bhc-top .kc-mode{margin-left:0}.bhc-top .kc-mode button{padding:0 10px}}
/* в режимах без цели и стоимости первое видимое поле — сумма: без пустого отступа сверху */
#kc-f-purpose[hidden]+#kc-f-price[hidden]+.bhc-field{margin-top:0}
/* KC_GAP_2026_10_27: у «Жилья» и «Авто» поле «Стоимость покупки» — первое в своей обёртке и теряло отступ (0 вместо 16, прилипало к переключателю) */
#kc-f-price>.bhc-field:first-child{margin-top:16px}

/* два поля в строку: процент и сумма, «на сколько» и «с какого платежа» */
.kc-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kc-two .bhc-input{width:auto}
.kc-r .kc-suf-l input{padding-right:88px;text-align:right}
/* подписи кнопок разной длины: ширина по тексту, а не поровну */
#kc-f-purpose .bhc-seg button,.kc-r [data-kc-scheme]{flex:1 1 auto;padding:0 12px}
.bhc-shell .bhc-label label{margin:0;font:inherit!important;color:inherit;cursor:pointer;text-transform:none;letter-spacing:0}

/* сумма кредита считается из стоимости и взноса — поле только для чтения */
.kc-r .bhc-field.is-derived input{background:transparent;border-style:dashed;color:var(--r-t1);cursor:default}
.kc-r .bhc-field.is-derived input:hover{border-color:var(--r-line2)}
#kc-derived.is-warn{color:var(--r-t1);padding-left:10px;border-left:2px solid var(--r-red)}

/* дополнительные условия: заголовок группы, справа — что уже задано */
.kc-more{margin-top:18px;border-top:1px solid var(--r-line)}
.kc-more>summary{display:flex;align-items:baseline;gap:12px;padding:16px 0 4px;cursor:pointer;list-style:none;font:600 14px/1.3 var(--r-f);color:var(--r-t1)}
.kc-more>summary::-webkit-details-marker{display:none}
.kc-more>summary::before{content:"";flex:none;align-self:center;width:7px;height:7px;margin:0 2px 0 1px;border-right:1.5px solid var(--r-t2);border-bottom:1.5px solid var(--r-t2);transform:rotate(-45deg);transition:transform .15s}
.kc-more[open]>summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.kc-more>summary:hover .kc-more-title{color:#fff}
.kc-more>summary:focus-visible{outline:2px solid var(--r-g);outline-offset:2px;border-radius:4px}
.kc-more-sum{margin-left:auto;min-width:0;font:400 13px/1.3 var(--r-f);color:var(--r-t3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-more[open] .kc-more-sum{visibility:hidden}
.kc-more-in{padding-top:6px}
.kc-more-in>.bhc-field:first-child,.kc-more-in>div:first-child>.bhc-field:first-child{margin-top:8px}
.kc-more-in .bhc-opt:first-of-type{margin-top:16px}
.kc-r .bhc-field .bhc-seg--sm{margin-top:8px}

/* вложенные поля под переключателями — колонкой, а не в строку, как в общем .bhc-opt-sub */
.kc-r .bhc-opt-sub{display:block}
.kc-r .bhc-opt-sub .bhc-input{width:auto}
.kc-r .bhc-opt-sub .bhc-field:first-child{margin-top:0}
.kc-r .bhc-opt-sub .bhc-field{margin-top:12px}
.kc-extra-box .bhc-field:first-child{margin-top:0}
#kc-early-host .kc-extra-box{margin-top:12px}
.kc-r .bhc-group-title.kc-g-first{margin-top:0;padding-top:0;border-top:0}
/* KCGAP27: в режиме «Новый кредит» заголовок «Ваш кредит» скрыт — первое поле без верхнего отступа, как в других карточках (было 36 px до «На что кредит» вместо 20) */
#kc-g-loan[hidden]+#kc-f-purpose{margin-top:0}

/* флажок «товары белорусского производства» */
.bhc-shell .kc-check{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;cursor:pointer;font:400 14px/1.4 var(--r-f);color:var(--r-t1)}
.bhc-shell .kc-check span{color:var(--r-t1)}
.bhc-shell .kc-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--r-g);cursor:pointer}
.kc-check input:focus-visible{outline:2px solid var(--r-g);outline-offset:2px}

/* рефинансирование дороже текущего кредита */
.kc-r .bhc-sum.is-neg .bhc-hero-value{color:var(--r-red)}


/* таблица «если ставка рефинансирования изменится» */
.kc-ladder tr.is-now td{background:#171e28}   /* вложенная поверхность из палитры, не белый с прозрачностью (CANONFIX15) */
.kc-ladder tr.is-now td:first-child{color:var(--r-t1)}
.kc-ladder td:first-child{color:var(--r-t2)}
.kc-delta{display:block;margin-top:2px;font-size:13px;color:var(--r-t3)}
.kc-ladder th{white-space:normal;vertical-align:bottom}
.kc-ladder th:first-child{width:34%}
.kc-ladder-card .bhc-note{margin-top:12px}

/* график остатка долга */
.kc-chart-frame{position:relative}
#kc-chart{display:block;width:100%;height:clamp(240px,34vh,320px);touch-action:pan-y}
#kc-chart .kc-ax{font:400 13px "IBM Plex Sans",Arial,sans-serif;fill:#949ca7;font-variant-numeric:tabular-nums}
.kc-tip{position:absolute;left:0;top:0;min-width:210px;padding:10px 12px;background:#0a0d12;border:1px solid rgba(255,255,255,.14);border-radius:6px;font:400 13px/1.45 var(--r-f);color:var(--r-t1);pointer-events:none;opacity:0;transition:opacity .12s;z-index:3}
.kc-tip .t-head{margin-bottom:4px;color:var(--r-t1);font-weight:600}
.kc-tip .t-row{display:flex;justify-content:space-between;gap:16px}
.kc-tip .t-row span{color:var(--r-t2)}
.kc-tip .t-row b{font-weight:600;font-variant-numeric:tabular-nums}
.kc-tip .t-row b.is-main{color:var(--r-g)}
.kc-tip .t-sub{margin-top:2px}
.kc-tip .t-sub+.t-sub{margin-top:0}

/* график платежей: длинная таблица прокручивается внутри карточки, шапка остаётся на месте */
.kc-table-wrap{max-height:460px;overflow:auto;-webkit-overflow-scrolling:touch}
.kc-table thead th{position:sticky;top:0;z-index:1;background:var(--r-s1)}
.kc-muted{margin-left:4px;font-size:13px;color:var(--r-t3)}

@media (max-width:899px){
  .bhc-top .bhc-h1{flex:1 1 0;min-width:0}
  /* KC_READY_2026_10_26: общее правило VIEW16 (bh-system.css) отдаёт названию всю строку, если в шапке есть переключатель режима,
     и «Сбросить» с «Поделиться» уезжали отдельной строкой. Название короткое — значки в строке с ним, как у калькулятора вклада */
  :is(#k26,html):is(#k26,html):is(#k26,html):is(#k26,html) body .bhc-top.bh-tm-on>.bhc-h1{flex-basis:0!important}
  .bhc-top .kc-mode{order:5;flex:1 1 100%;width:100%;margin:0}
  .bhc-top .kc-mode button{flex:1 1 auto;height:40px;padding:0 8px;font-size:13px}
  .kc-mode .kc-lf{display:none}
  .kc-mode .kc-ls{display:inline}
  .bhc-top .bhc-top-act{order:2;width:auto;flex:none;flex-wrap:nowrap;gap:8px}
  .bhc-top .bhc-top-act>*{flex:none}
  .kc-table-wrap{max-height:400px}
}
@media (max-width:599px){
  .kc-ladder th:nth-child(2),.kc-ladder td:nth-child(2){display:none}
  .kc-table{font-size:13px}
  /* KC_POLISH_2026_10_26: график платежей на телефоне в ширину экрана — «Основной долг» (платёж минус проценты) есть в таблице для скачивания;
     общий скрипт таблиц статей (functions.php, enhanceTable) метит обёртку .responsive-cards и запрещает таблице сжиматься — здесь не нужно */
  .kc-table .kc-c-pr{display:none}
  .kc-r .responsive-cards table.kc-table{min-width:0!important;width:100%!important}
  /* KC_TBL5_2026_10_26: пять колонок (досрочно, страховка) в 360 px не помещаются — прокрутка вбок внутри карточки */
  .kc-r .responsive-cards table.kc-table.kc-wide,.kc-r table.kc-table.kc-wide{min-width:540px!important}
  .kc-table th,.kc-table td{padding-left:4px;padding-right:4px}
  .kc-table th:first-child,.kc-table td:first-child{padding-left:0}
  .kc-table th:last-child,.kc-table td:last-child{padding-right:0}
}
@media (prefers-reduced-motion:reduce){.kc-tip,.kc-more>summary::before{transition:none}}
/* сравнение (CANON_BY_2026_10_14): разница с цветом по выгоде; на телефоне колонка «Разница» уходит под текущее значение */
#kc-compare .is-pos{color:#95ce5a}#kc-compare .is-neg{color:#f43f5e}
/* KC_READY_2026_10_26: кто выигрывает строку — жирным (канон 0.9.3: «разница словами, жирным — кто выигрывает строку») */
#kc-compare td.is-win{font-weight:600;color:#fff}
.kc-cmp-d{display:none}
/* KC_READY_2026_10_26 — на телефоне строка сравнения блоком, без прокрутки вбок (канон 0.9.3, как у калькулятора долгов, PACK16 27.4):
   название во всю ширину, ниже два варианта с подписями, под текущим — разница словами */
@media (max-width:600px){
  #kc-compare .kc-cmp-dcol{display:none}
  #kc-compare .kc-cmp-d{display:block;margin-top:2px;font:400 13px/1.3 var(--r-f)}
  #kc-compare .kc-cmp-d:not(.is-pos):not(.is-neg){color:var(--r-t3)}
  #kc-compare .bhc-cmp-table thead{display:none}
  #kc-compare :is(.bhc-cmp-table,.bhc-cmp-table tbody){display:block;width:100%}
  #kc-compare .bhc-cmp-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px;padding:12px 0;border-bottom:1px solid var(--r-line)}
  #kc-compare .bhc-cmp-table tbody tr:last-child{border-bottom:0}
  #kc-compare .bhc-cmp-table tbody td{display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;background:transparent}
  #kc-compare .bhc-cmp-table tbody td:first-child{grid-column:1/-1;font:400 13px/1.3 var(--r-f);color:var(--r-t2)}
  #kc-compare .bhc-cmp-table tbody td.kc-cmp-dcol{display:none}   /* разница уже под текущим значением */
  #kc-compare .bhc-cmp-table tbody td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font:400 13px/1.3 var(--r-f);color:var(--r-t3)}
}
/* SCALE_BY_2026_10_14 — шкала A (канон 0.4, владелец 14.10 «2. а»): главное число 36 (телефон 32) — так у всех калькуляторов .by */
html:root body #kc-hero-value{font-size:36px!important}html:root body #kc-hero-value>.bhc-cur{font-size:20px!important}
@media (max-width:767.98px){html:root body #kc-hero-value{font-size:32px!important}}

/* KC_READY_2026_10_26 — зона касания на телефоне от 44 px (канон 0.9.3, TOUCH44; приём MSTOUCH19 раздела «Вклады · Слитки»):
   растёт область нажатия, вид прежний. Кнопки, подсказки и заголовок «Дополнительных условий» — невидимой зоной ::after
   (через :hover::after тоже — styles.css на телефоне гасит :hover::after подсказок). Поля ввода — высотой 44 вместо 42.
   Ползунок — коробкой 44 с прежней дорожкой: отступ сверху ушёл в саму коробку. Флажок переключателя растянут на всю подпись,
   нажатие по ней по-прежнему его переключает. Пункты меню калькуляторов стоят вплотную, поэтому им — высота 44, а не зона.
   Файл подключается только на странице кредитного калькулятора, на другие калькуляторы правила не действуют. */
@media (pointer:coarse){
  :is(#k26,html):is(#k26,html) body .bhc-shell :is(.bhc-seg>button,.bhc-chips>button,.bhc-card-tools>.bhc-btn,.bhc-term,.bhc-i,#kc-more>summary,.bhc-h1 .bh-tm,.bhc-top>.bhc-burger){position:relative}
  :is(#k26,html):is(#k26,html) body .bhc-shell :is(.bhc-seg>button,.bhc-chips>button,.bhc-card-tools>.bhc-btn,.bhc-term,.bhc-i,#kc-more>summary,.bhc-h1 .bh-tm,.bhc-top>.bhc-burger)::after,
  :is(#k26,html):is(#k26,html) body .bhc-shell :is(.bhc-seg>button,.bhc-chips>button,.bhc-card-tools>.bhc-btn,.bhc-term,.bhc-i,#kc-more>summary,.bhc-h1 .bh-tm,.bhc-top>.bhc-burger):hover::after{
    all:unset!important;content:""!important;display:block!important;position:absolute!important;left:50%!important;top:50%!important;
    width:max(100%,44px)!important;height:max(100%,44px)!important;transform:translate(-50%,-50%)!important;pointer-events:auto!important}
  :is(#k26,html):is(#k26,html) body .bhc-shell .bhc-i::before{content:none!important}
  :is(#k26,html):is(#k26,html) body .bhc-shell .bhc-chips{row-gap:8px!important}
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .bhc-input input{height:44px}
  /* ползунок: коробка 44 (bh-system.css PACK16), но отступ снизу −6, а не −12 — иначе зона кнопок срока под ним заходит на него */
  :is(#k26,html):is(#k26,html) body #bhc-shell .kc-r .bhc-range.bhc-range[type=range]{margin-bottom:-6px!important}
  /* подпись с подсказкой (термин пунктиром или «i»): между рядом кнопок над ней и переключателем под ней было 16 и 8 px —
     трём зонам по 44 там тесно. На телефоне такое поле отступает на 20, под подписью 16, зона термина 46: 14 вверх, 13 вниз */
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .bhc-field:not(:first-child):has(>.bhc-label :is(.bhc-term,.bhc-i)){margin-top:20px}
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .kc-more-in>div:first-child>.bhc-field:first-child:has(>.bhc-label :is(.bhc-term,.bhc-i)){margin-top:14px}
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .bhc-label:has(.bhc-term,.bhc-i){margin-bottom:16px}
  :is(#k26,html):is(#k26,html) body #bhc-shell .kc-r .bhc-term::after,   /* #bhc-shell — сильнее общего правила выше: в его :is() есть #kc-more */
  :is(#k26,html):is(#k26,html) body #bhc-shell .kc-r .bhc-term:hover::after{top:-14px!important;bottom:-13px!important;height:auto!important;transform:translateX(-50%)!important}
  /* первый переключатель под «Проценты начисляются»: его флажок-зона заходила на кнопки «по месяцам · по дням» на 2 px */
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .kc-more-in>.bhc-field+.bhc-opt{margin-top:4px}
  /* «i» у переключателя — поверх флажка, растянутого на подпись слева от него */
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .bhc-opt-head>.bhc-i{z-index:2}
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .bhc-switch{position:relative}
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-r .bhc-switch input{left:0;top:50%;width:100%;height:max(100%,44px);margin:0;transform:translateY(-50%);z-index:1;cursor:pointer}
  :is(#k26,html):is(#k26,html) body .bhc-shell .bhc-nav-item{min-height:44px;box-sizing:border-box}
}
@media (pointer:coarse) and (max-width:899px){   /* логотип в выдвижном меню виден только до 900 px */
  :is(#k26,html):is(#k26,html) body .bhc-shell .bhc-brand{display:flex;align-items:center;min-height:44px;box-sizing:border-box;position:relative;z-index:1}   /* шапка меню под ним заходит на 2 px */
}
/* /KC_READY_2026_10_26 */
/* KC_POLISH_2026_10_26: переключатель вида таблицы — по ширине подписей (в общем calc-shell кнопки делят место поровну и «по месяцам» обрезалась);
   быстрый выбор срока — только набор текущей цели */
.kc-r .bhc-seg--sm>button{flex:0 0 auto}
.kc-r .bhc-chips>button[hidden]{display:none}
.kc-ladder td.strong .kc-delta{font-weight:400}   /* разница под платежом — как под переплатой, обычным начертанием */

/* ============================================================
   KC_UX_2026_10_27 — подача по лаборатории KC_LAB (выбор владельца 26–27.10): итоговая ставка у поля, «Хватит ли дохода» рядом
   с ответом, график сразу под ними, график и таблица вкладками, досрочное — два исхода, рефинансирование — «сейчас / новый».
   Палитра и шкала — канон DESIGN-DNA-TOOLS: карточки #121820, вложенная #171e28, выбранное #252e3a, текст #e6e9ee / #b3b9c2 / #949ca7,
   зелёный #95ce5a — действие и экономия, красный #f43f5e — переплата и проценты; кегли 13/14/16/20/24/36.
   ============================================================ */
.kc-r .bhc-result{container:kcres/inline-size}
/* KC_LAB2 (27.10, владелец: «ты уверен что график не должен быть на первом экране?»): график — сразу под ответом, как у вклада
   и сложного процента; «Хватит ли дохода» — рядом с ответом, «Если Нацбанк изменит ставку» — под графиком */
.kc-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.kc-top{display:contents}
.kc-flow>.bhc-sr{position:absolute}
#kc-sum{order:1}
.kc-m-cmp{order:2}
#kc-compare{order:3}
.kc-chart-card{order:4}
#kc-afford{order:5}
#kc-ladder-card{order:6}
.kc-flow>.bhc-note{order:8;margin:0}
.kc-top>[hidden],.kc-r [hidden]{display:none!important}

/* итоговая ставка у поля надбавки: «17,55% годовых», под ней — из чего она складывается */
.kc-rate-total{margin-top:10px;font:400 14px/1.4 var(--r-f);color:var(--r-t2)}
.kc-rate-total b{margin-right:2px;font:600 16px/1.3 var(--r-f);color:var(--r-t1);font-variant-numeric:tabular-nums}
.kc-rate-total span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--r-t3)}

.kc-r .bhc-sum-in>:is(.kc-early,.kc-refi,.kc-sum-foot,.bhc-hero-caveat){grid-column:1/-1}
.kc-r .bhc-hero-note:empty,.kc-r .bhc-hero-caveat:empty,.kc-r .bhc-hero-meta:empty,.kc-sum-foot:empty{display:none}
.kc-r .bhc-sum .bhc-hero-caveat{margin-top:16px}

/* ---------- ответ и «Хватит ли дохода» рядом, график и таблица — вкладками ---------- */
@container kcres (min-width:720px){
  .kc-r .kc-flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kc-r .kc-flow>*,.kc-r .kc-top>*{grid-column:1/-1}   /* .kc-top — display:contents: её карточки тоже ячейки сетки */
  .kc-r .kc-top>#kc-sum{grid-column:1;align-self:stretch}
  .kc-r .kc-top>#kc-afford{grid-column:2;order:1;align-self:stretch}
  .kc-r:is([data-mode="early"],[data-mode="refi"]) .kc-top>#kc-sum{grid-column:1/-1}
  .kc-r[data-mode="refi"] .kc-top>#kc-afford{grid-column:1/-1;order:5}   /* KC_MODES_2026_10_27: график выгоды — в первом экране */
}
.kc-r .bhc-sum-in.bhc-sum-in{grid-template-columns:minmax(0,1fr)}
.kc-r .bhc-sum .bhc-metrics.bhc-metrics{display:block;margin-top:20px;padding:4px 0 0;border-top:1px solid var(--r-line2);border-left:0}
.kc-r .bhc-sum .bhc-metric.bhc-metric{display:grid;grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--r-line)}
.kc-r .bhc-sum .bhc-metric:first-child{border-top:0}
.kc-r .bhc-sum .bhc-metric:last-child{padding-bottom:0}
.kc-r .bhc-sum .bhc-metric dt{grid-column:1;align-self:baseline;font-size:14px}
.kc-r .bhc-sum .bhc-metric dd{grid-column:2;grid-row:1;margin:0;font-size:20px;text-align:right;white-space:nowrap}
.kc-r .bhc-sum .bhc-metric dd.bhc-metric-sub{grid-column:1/-1;grid-row:2;margin-top:2px;font-size:13px;text-align:left;white-space:normal}
.kc-pane-tools{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:12px}
.kc-pane-cap{font:400 13px/1.3 var(--r-f);color:#949ca7}
.kc-pane-tools .bhc-card-tools{margin-left:auto}

/* ---------- «Хватит ли дохода» ---------- */
.kc-afford{container:kcaf/inline-size}
.kc-afford-f{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.kc-afford-f .bhc-field{margin:0}
.kc-afford .kc-check{margin-top:12px}
.kc-afford-out{margin-top:18px}
.kc-afford-lead{margin:0 0 12px;font:400 16px/1.3 var(--r-f);color:var(--r-t2)}
.kc-afford-lead b{font:600 24px/1.1 var(--r-f);color:var(--r-t1);font-variant-numeric:tabular-nums}
.kc-afford-lead b.neg{color:var(--r-red)}
.kc-meter{position:relative;height:10px;border-radius:4px;background:#252e3a}
.kc-meter>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#b2bec3;transition:width .32s cubic-bezier(.2,0,.38,.9)}
.kc-meter.is-over>i{background:var(--r-red)}
.kc-meter-lim{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:#e6e9ee}
.kc-meter-cap{position:relative;height:18px;margin-top:6px;font:400 13px/1.3 var(--r-f);color:var(--r-t2)}
.kc-meter-cap span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.kc-afford-ok{margin:10px 0 0;font:400 14px/1.45 var(--r-f);color:var(--r-t1)}
.kc-afford-note{margin:6px 0 0;font:400 13px/1.45 var(--r-f);color:var(--r-t3)}
.kc-afford-out .bhc-insight{margin-top:10px}

/* ---------- KC_MODES_2026_10_27: досрочное — таблица решения «Без досрочного · Сократить срок · Уменьшить платёж» ----------
   Выбранный столбец — плиткой #252e3a во всю высоту (выбранное «г»), он же на графике и в таблице; невыбранный под курсором #171e28.
   Владелец 27.10: «сделай также продумано другие две вкладки… там тоже куча проблем и свободных мест» */
.kc-r .bhc-sum .bhc-metrics.bhc-metrics:empty{display:none}
.kc-r table.kc-et{width:100%;margin:14px 0 0;border-collapse:separate;border-spacing:0;table-layout:fixed;font:400 14px/1.35 var(--r-f);font-variant-numeric:tabular-nums}
.kc-r .kc-et :is(th,td){padding:12px 16px;text-align:left;vertical-align:top;white-space:normal;border:0;border-top:1px solid var(--r-line);background:transparent;color:var(--r-t1)}
.kc-r .kc-et thead th{padding:0;border-top:0;vertical-align:bottom;font:500 13px/1.3 var(--r-f);color:#949ca7}
.kc-r .kc-et thead th.kc-et-base{padding:0 16px 12px}
.kc-r .kc-et thead th:first-child{width:28%}
.kc-r .kc-et tbody th{padding-left:0;font:400 14px/1.35 var(--r-f);color:var(--r-t2)}
.kc-r .kc-et tbody tr:hover :is(th,td){background:transparent}
.kc-r .kc-et td.kc-et-base{color:#b3b9c2}
.kc-r .kc-et .kc-et-save :is(th,td){vertical-align:middle}
.kc-r .kc-et .kc-et-save b{font:600 24px/1.1 var(--r-f);white-space:nowrap}
.kc-r .kc-et b.pos{color:#95ce5a}   /* экономия — зелёным и в выбранном столбце (его ячейки белые) */
.kc-r .kc-et .kc-et-save .bhc-cur{font-size:16px;font-weight:500;color:var(--r-t2)}
.kc-et-sub{display:block;margin-top:3px;font:400 13px/1.4 var(--r-f);color:var(--r-t3)}
.kc-r .kc-et-sub.pos{color:#95ce5a}
.kc-r .kc-et-sub.neg{color:#f43f5e}
.kc-et-none{color:var(--r-t3)}
.kc-et-was{display:none;margin-top:3px;font:400 13px/1.4 var(--r-f);color:var(--r-t3)}
/* выбранный столбец: плитка сверху донизу, скругления по краям столбца */
.kc-r .kc-et :is(th,td).is-pick{background:#252e3a}
.kc-r .kc-et thead th.is-pick{border-radius:8px 8px 0 0}
.kc-r .kc-et tbody tr:last-child td.is-pick{border-radius:0 0 8px 8px}
.kc-r .kc-et td.is-pick{color:#fff}
.kc-r .kc-et [data-kc-pickcol]:not(.is-pick){cursor:pointer}
.kc-et-pick{display:block;width:100%;min-height:44px;margin:0;padding:12px 16px;border:0;border-radius:8px 8px 0 0;background:none;color:#949ca7;font:500 14px/1.3 var(--r-f);text-align:left;cursor:pointer;box-shadow:none}
.kc-et-pick.active{color:#fff;cursor:default}
.kc-et-pick:focus-visible{outline:2px solid var(--r-g);outline-offset:-2px}
.kc-r .kc-et :is(th,td){transition:background-color .15s ease-out}
.kc-r .kc-et-pick{transition:color .15s ease-out}
@media (hover:hover){
  .kc-r .kc-et:has([data-kc-pickcol="term"]:hover) [data-kc-pickcol="term"]:not(.is-pick),
  .kc-r .kc-et:has([data-kc-pickcol="payment"]:hover) [data-kc-pickcol="payment"]:not(.is-pick){background:#171e28}
  .kc-r .kc-et:has([data-kc-pickcol]:not(.is-pick):hover) .kc-et-pick:not(.active){color:#e6e9ee}
}
.kc-r .kc-et [data-kc-pickcol]:not(.is-pick):active{background:#1f2834}
@media (prefers-reduced-motion:reduce){.kc-r .kc-et :is(th,td),.kc-r .kc-et-pick{transition:none}}
/* узкий ответ (телефон): без столбца «Без досрочного», его значения — под названием строки */
@container kcsum (max-width:559.98px){
  .kc-r .kc-et .kc-et-base{display:none}
  .kc-r .kc-et .kc-et-was{display:block}
  .kc-r .kc-et thead th:first-child{width:36%}
  .kc-r .kc-et :is(th,td){padding:11px 10px}
  .kc-r .kc-et tbody th{padding-left:0}
  .kc-r .kc-et .kc-et-pick{padding:10px}
  .kc-r .kc-et .kc-et-save b{font-size:20px}
  .kc-r .kc-et .kc-et-save .bhc-cur{font-size:14px}
}
/* широкий ответ (2000 и шире): таблица слева, вывод — колонкой справа */
@container kcsum (min-width:900px){
  .kc-r[data-mode="early"] #kc-sum .bhc-sum-in.bhc-sum-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);column-gap:40px;align-items:start}
  .kc-r[data-mode="early"] #kc-sum .bhc-sum-main{grid-column:1/-1}
  .kc-r[data-mode="early"] #kc-sum .kc-early{grid-column:1;grid-row:2}
  .kc-r[data-mode="early"] #kc-sum .kc-sum-foot{grid-column:2;grid-row:2;margin-top:14px;padding-top:12px}
  .kc-r[data-mode="early"] #kc-sum .kc-sum-foot .bhc-insight{margin-top:0}
}

/* ---------- рефинансирование: выгода зелёным, слева ответ, справа «сейчас / новый кредит» ---------- */
.kc-r .bhc-hero-value.pos{color:var(--r-g)}
.kc-r .bhc-hero-value.pos .bhc-cur{color:var(--r-t2)}
.kc-refi{margin-top:16px}
.kc-refi-t th:not(:first-child),.kc-refi-t td:not(:first-child){text-align:right}
.kc-refi-t td:first-child{color:var(--r-t2)}
.kc-refi-t td{vertical-align:top}
.kc-refi-t td b{font-weight:600}
.kc-refi-t .kc-delta{font-weight:400;white-space:normal}
@container kcsum (min-width:640px){
  .kc-r[data-mode="refi"] #kc-sum .bhc-sum-in.bhc-sum-in{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.7fr);grid-template-rows:auto minmax(0,1fr);column-gap:40px;align-items:start}
  .kc-r[data-mode="refi"] #kc-sum .bhc-sum-main{grid-column:1;grid-row:1}
  .kc-r[data-mode="refi"] #kc-sum .bhc-hero-caveat{grid-column:1;grid-row:2;margin-top:16px}
  .kc-r[data-mode="refi"] #kc-sum .kc-refi{grid-column:2;grid-row:1/span 2;margin-top:0;padding-left:32px;border-left:1px solid var(--r-line2)}
}
/* точка «окупилось» на графике выгоды */
#kc-chart .kc-ax-mark{fill:#e6e9ee}

/* ---------- график: подпись под выводом и ссылка на досрочное ---------- */
.kc-chart-sub{margin:10px 0 0;font:400 13px/1.45 var(--r-f);color:var(--r-t2)}
.kc-chart-sub:empty{display:none}
.kc-link{display:inline;margin:0;padding:0;border:0;background:none;color:var(--r-g);font:500 13px/1.45 var(--r-f);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kc-link:focus-visible{outline:2px solid var(--r-g);outline-offset:2px;border-radius:2px}
.kc-m-cmp{justify-content:flex-start}
.kc-m-cmp>.bhc-btn{min-height:44px}   /* зона касания на телефоне 44 (канон 0.9.3, TOUCH44) */

@media (max-width:767.98px){
  .kc-afford-lead b{font-size:20px}
}
@media (pointer:coarse){
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-link{position:relative}
  :is(#k26,html):is(#k26,html) body .bhc-shell .kc-link::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
}
@media (prefers-reduced-motion:reduce){.kc-meter>i{transition:none}}

/* KC_COLOR (схема 2): переплата и проценты красным, экономия зелёным, разница в таблице ставки — по выгоде заёмщику */
.kc-r .kc-delta.pos{color:#95ce5a}
.kc-r .kc-delta.neg{color:#f43f5e}

/* KC_SEL «г», 27.10 владелец: «правильный ли выбран дизайн для таких кнопок (цвет и эффекты) даже несмотря на канон? может везде надо поменять».
   Замер «как сейчас»: плитка выбранного к подложке 1,42:1, текст выбранного к невыбранному 1,97:1, вес одинаковый, нажатия нет, переход 0,3 с —
   признак состояния ниже 3:1 (WCAG 1.4.11). Выбор «г»: цвет выбранного нейтральный (зелёный занят деньгами и действием), невыбранное #949ca7,
   плитка едет, нажатие #1f2834, под курсором #171e28; вкладки верхнего уровня («Новый кредит…», «График / Таблица») — чертой #e6e9ee 2 px.
   Света у кнопок нет (канон 0.3). Светлая плитка #e6e9ee отвергнута: шесть белых плашек забирали взгляд у ответа */
/* BHC_SEL_2026_10_27: плитка, цвета выбранного, нажатие и наведение переключателей перенесены в calc-shell.css / calc-shell.js
   (общие для всех калькуляторов); вкладки «График / Таблица» — класс .bhc-tabs. Здесь — только своё кредитного. */
html:root body #bhc-shell#bhc-shell .kc-link{transition:color .15s ease-out,text-decoration-color .15s ease-out!important}
@media (hover:hover){
  html:root body #bhc-shell#bhc-shell .kc-link:hover{color:#a6d873!important;text-decoration-color:#a6d873!important}
  html:root body #bhc-shell#bhc-shell .kc-more>summary:hover::before{border-color:#e6e9ee}
  html:root body #bhc-shell#bhc-shell .bhc-range[type=range]:hover::-webkit-slider-thumb{background:#a6d873}
  html:root body #bhc-shell#bhc-shell .bhc-range[type=range]:hover::-moz-range-thumb{background:#a6d873}
}

/* KC_LAYOUT «в», 27.10 владелец: «и что насчет этих зон… пока все выглядит непрофессионально, и рационально использовано свободное
   место архитектурно». Ряд ответа подстраивается под свою ширину (780 на 1440, 1340 на 2000, 1900 на 2560), а не под одну сетку */
.kc-r #kc-sum{container:kcsum/inline-size}
.kc-r .bhc-sum-main{padding-bottom:0}
.kc-afford-lead.is-empty{margin:0 0 14px;font:400 14px/1.45 var(--r-f);color:var(--r-t2)}
.kc-meter.is-empty>i{display:none}
.kc-afford-out .kc-afford-note{margin-top:8px}
/* ответ шире 560: платёж слева, числа колонкой справа (на 1280, где ряд в одну колонку, и в полосе ниже 960) */
@container kcsum (min-width:560px){
  .kc-r[data-mode="new"] #kc-sum .bhc-sum-in.bhc-sum-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,340px);column-gap:32px;align-items:center}
  .kc-r[data-mode="new"] #kc-sum .bhc-metrics.bhc-metrics{margin-top:0;padding:0 0 0 28px;border-top:0;border-left:1px solid var(--r-line2)}
}
@container kcaf (min-width:480px){.kc-r .kc-afford-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* ряд шире 960: ответ и проверка дохода — полосами во всю ширину */
@container kcres (min-width:960px){
  .kc-r[data-mode="new"] .kc-top>#kc-sum,.kc-r .kc-top>#kc-afford{grid-column:1/-1}
  .kc-r .kc-top>#kc-afford,.kc-r[data-mode="refi"] .kc-top>#kc-afford{order:2}
  .kc-r[data-mode="new"] #kc-sum .bhc-sum-in.bhc-sum-in{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));column-gap:0;align-items:stretch}
  .kc-r[data-mode="new"] #kc-sum .bhc-metrics.bhc-metrics{display:contents}
  .kc-r[data-mode="new"] #kc-sum .bhc-metric.bhc-metric{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:2px 0 0 24px;border-top:0;border-left:1px solid var(--r-line2)}
  .kc-r[data-mode="new"] #kc-sum .bhc-metric dd{margin:0;font-size:24px;text-align:left}
  .kc-r[data-mode="new"] #kc-sum .bhc-metric dd.bhc-metric-sub{margin:-2px 0 0;font-size:13px}
  .kc-r #kc-afford{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:56px;align-items:center}
  .kc-r #kc-afford>:is(.bhc-card-head,.kc-afford-f,.kc-check){grid-column:1}
  .kc-r #kc-afford>.kc-afford-out{grid-column:2;grid-row:1/span 3;margin-top:0;padding-left:32px;border-left:1px solid var(--r-line2)}
}