/* Mortgage Calculator — стили (подтип [форма], по макетам desc.png + mobile.png).
   Современный fintech-вид: карточки с мягкой тенью, зелёная плашка платежа, пирог Out-of-Pocket,
   тоггл Taxes & costs, area-график. Все цвета — токенами ниже, не магией по месту.
   Вёрстка — Bootstrap + кастом поверх. Цвета сняты пипеткой с макета. */

.mcalc {
    --mc-blue:       #2563eb;   /* UI-синий: ссылки, кнопки-outline, тоггл, фокус */
    --mc-data-blue:  #3a6fe9;   /* P&I (пирог), линия balance (пипетка с макета) */
    --mc-green:      #548f21;   /* зелёная лента платежа (пипетка с макета) */
    --mc-green-2:    #4a8120;   /* нижний стоп градиента ленты */
    --mc-tax:        #6fae17;   /* property tax (пирог/линия principal) — пипетка */
    --mc-ins:        #9e0c0f;   /* home insurance (пирог) — пипетка */
    --mc-pmi:        #8b6fdc;   /* PMI (пирог) — нет в макете */
    --mc-hoa:        #f59e0b;   /* HOA (пирог) — нет в макете */
    --mc-other:      #40add0;   /* other costs (пирог) — бирюзовый, пипетка */
    --mc-save-color: #545454;   /* кнопка «Link to calculation» (как в loan) */
    --mc-ink:        #0f172a;   /* заголовки, значения */
    --mc-label:      #475569;   /* подписи полей */
    --mc-muted:      #64748b;   /* подзаголовки, подсказки */
    --mc-stage-bg:   linear-gradient(180deg, #f7faff 0%, #ffffff 55%);
    --mc-blue-soft:  #e8f0fe;
    --mc-card-bg:    #ffffff;
    --mc-card-br:    #e6eaf0;
    --mc-radius:     16px;
    --mc-radius-sm:  10px;
    --mc-soft:       #f1f5fb;
    --mc-shadow:     0 1px 2px rgba(16,38,73,.04), 0 4px 16px rgba(16,38,73,.05);

    max-width: 1080px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mc-ink);
}

/* ---- Ряд с кнопкой share (подводка страницы печатается движком над инструментом) ---- */
.mcalc__share-row { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin: .25rem 0 1rem; }
.mcalc__guide { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius-sm); background: #fff; color: var(--mc-ink); padding: .4rem .8rem; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mcalc__guide:hover { background: var(--mc-soft); color: var(--mc-blue); }

/* ---- Описание расчёта под заголовком (открытие по быстрой ссылке) ---- */
.mcalc__shared-desc { margin: .15rem 0 1rem; font-size: 1.2rem; font-weight: 600; line-height: 1.45; color: var(--mc-ink); }
@media (max-width: 560px) { .mcalc__shared-desc { font-size: 1.05rem; } }

/* ---- Надстройка share ---- */
.mcalc__above { margin-bottom: .75rem; }
.mcalc__above.is-hidden { display: none; }
.mcalc__above-shared { display: inline-block; margin-bottom: .25rem; padding: 3px 8px; font-size: .75rem; color: #fff; background: var(--tls-salmon, #f08a5d); border-radius: 6px; }
.mcalc__above-expr { display: block; border: 0; background: none; padding: 0; font: inherit; font-size: .85rem; color: var(--mc-muted); text-align: left; cursor: pointer; }
.mcalc__above-expr:hover { color: var(--mc-blue); text-decoration: underline; }

/* ---- Подложка ---- */
.mcalc__stage { background: var(--mc-stage-bg); border-radius: 16px; padding: 1.1rem 1.1rem 1.4rem; }
@media (max-width: 860px) { .mcalc__stage { padding: .75rem; border-radius: 12px; } }

.mcalc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.mcalc__col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.mcalc__card { background: var(--mc-card-bg); border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); padding: 1.25rem 1.35rem; }
.mcalc__card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .45rem; }
.mcalc__card-title i { color: var(--mc-blue); }
.mcalc__muted { color: var(--mc-muted); font-size: .85rem; margin: -.5rem 0 .85rem; }

/* ---- Поля формы ---- */
/* Колонки заданы на КОНТЕЙНЕРЕ (строки — subgrid): общие у всех строк → поля выровнены, а колонка подписи
   занимает ровно своё содержимое в ОДНУ строку (nowrap) — ⓘ не переносится, поля не уже своего содержимого. */
.mcalc__fields { display: grid; grid-template-columns: max-content 1fr; column-gap: .9rem; row-gap: 0; }
.mcalc__field { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; row-gap: 0; padding: .55rem 0; border-bottom: 1px solid var(--mc-card-br); }
.mcalc__field:first-of-type { padding-top: 0; }
.mcalc__field:last-of-type { border-bottom: 0; padding-bottom: 0; }
.mcalc__label { grid-column: 1; white-space: nowrap; font-size: 1rem; color: var(--mc-label); }
.mcalc__control-row { grid-column: 2; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mcalc__control { flex: 1 1 auto; display: flex; align-items: center; gap: .4rem; border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius-sm); background: #fff; padding: .15rem .7rem; transition: border-color .12s, box-shadow .12s; min-width: 0; }
.mcalc__control:focus-within { border-color: var(--mc-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.mcalc__control--money .mcalc__money-sign { color: var(--mc-muted); font-size: 1.1rem; }
.mcalc__control--sm { padding: .1rem .6rem; }
.mcalc__input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; color: var(--mc-ink); font-size: 1.25rem; font-weight: 600; line-height: 1.2; padding: .38rem 0; font-family: inherit; }
.mcalc__control--sm .mcalc__input { font-size: 1rem; }
.mcalc__suffix { flex: 0 0 auto; color: var(--mc-muted); font-size: 1rem; white-space: nowrap; }
.mcalc__unit, .mcalc__select { flex: 0 0 auto; border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius-sm); background: #fff; color: var(--mc-ink); font-size: .95rem; font-weight: 600; padding: .5rem .55rem; font-family: inherit; }
/* Селекты — по содержимому, не растянуты на пол-экрана */
.mcalc__unit { width: auto; min-width: 52px; }
.mcalc__select { width: auto; }
.mcalc__select:focus, .mcalc__unit:focus { outline: none; border-color: var(--mc-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.mcalc__date-row { gap: .55rem; }
.mcalc__date-row .mcalc__select { flex: 0 0 auto; width: auto; }
.mcalc__subnote { grid-column: 2; margin: .15rem 0 0; font-size: .78rem; color: var(--mc-muted); }
.mcalc__field--date { align-items: center; }

/* ---- Taxes & costs ---- */
.mcalc__taxes-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .15rem; }
.mcalc__taxes-head .mcalc__card-title { margin: 0; }
.mcalc__optional { font-size: .72rem; font-weight: 500; color: var(--mc-muted); }
.mcalc__taxes-hint { font-size: .8rem; color: var(--mc-muted); margin: 0 0 .9rem; }
/* Тоггл */
.mcalc__toggle { flex: 0 0 auto; width: 44px; height: 24px; border-radius: 12px; border: 0; background: #cbd5e1; cursor: pointer; padding: 0; position: relative; transition: background .15s; }
.mcalc__toggle[aria-checked="true"] { background: var(--mc-blue); }
.mcalc__toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mcalc__toggle[aria-checked="true"] .mcalc__toggle-knob { transform: translateX(20px); }
/* Выключенное состояние — поля «сворачиваются вверх» (коллапс grid-rows 1fr→0fr + затухание).
   Обёртка-грид анимирует высоту строки; .mcalc__collapse-inner (overflow:hidden) реально схлопывается. */
.mcalc__collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease, opacity .25s ease; }
.mcalc__collapse-inner { min-height: 0; overflow: hidden; }
.mcalc__taxes.is-off .mcalc__collapse { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }

/* Колонки на КОНТЕЙНЕРЕ (строки — subgrid): подпись (по содержимому, nowrap) | ПОЛЕ-КОЛОНКА | «/mo». */
.mcalc__cost-list { display: grid; grid-template-columns: max-content 1fr max-content; column-gap: .55rem; row-gap: 0; }
.mcalc__cost { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--mc-card-br); }
.mcalc__cost:first-child { padding-top: 0; }
.mcalc__cost-label { grid-column: 1; white-space: nowrap; font-size: 1rem; color: var(--mc-label); }
.mcalc__cost-field { grid-column: 2; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mcalc__cost-control { flex: 1 1 auto; padding: .05rem .55rem; }
.mcalc__cost-control .mcalc__input { font-size: 1.2rem; padding: .32rem 0; }
.mcalc__cost-sign { color: var(--mc-muted); font-size: .95rem; }
.mcalc__cost-mo { grid-column: 3; font-size: .82rem; color: var(--mc-muted); white-space: nowrap; text-align: right; min-width: 78px; }

/* ---- More options ---- */
.mcalc__advanced { margin-top: 1rem; }
.mcalc__advanced-summary { cursor: pointer; color: var(--mc-blue); font-size: .9rem; font-weight: 600; padding: .25rem 0; list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.mcalc__advanced-summary::-webkit-details-marker { display: none; }
.mcalc__adv-chevron { transition: transform .15s; font-size: .8rem; }
.mcalc__advanced[open] .mcalc__adv-chevron { transform: rotate(180deg); }
.mcalc__adv-block { margin-top: .85rem; padding-top: .85rem; border-top: 1px dashed var(--mc-card-br); }
.mcalc__adv-title { font-size: .9rem; font-weight: 700; margin: 0 0 .15rem; }
.mcalc__adv-hint { font-size: .78rem; color: var(--mc-muted); margin: 0 0 .6rem; }
.mcalc__adv-row { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: .55rem; padding: .3rem 0; }
.mcalc__adv-label { font-size: .82rem; color: var(--mc-label); }
.mcalc__adv-extra { padding: .35rem 0; }
.mcalc__adv-extra .mcalc__adv-label { display: block; margin-bottom: .3rem; }
.mcalc__extra-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mcalc__extra-row .mcalc__control { flex: 0 0 130px; }
.mcalc__extra-prep { font-size: .8rem; color: var(--mc-muted); }
.mcalc__select--sm { padding: .4rem .45rem; font-size: .82rem; }

/* ---- Ошибка ---- */
.mcalc__error { min-height: 0; height: 0; overflow: hidden; margin: 0; font-size: .9rem; color: var(--tls-danger, #d92d20); visibility: hidden; }
.mcalc__error.is-on { height: auto; margin-top: .6rem; visibility: visible; }

/* ---- Прелоадеры пересчёта ---- */
.mcalc__busy { position: relative; }
.mcalc__overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border-radius: inherit; z-index: 3; container-type: size; }
.mcalc.is-loading .mcalc__overlay { display: flex; }
.mcalc__spinner { width: 60cqmin; height: 60cqmin; max-width: 200px; max-height: 200px; min-width: 40px; min-height: 40px; border-radius: 50%; border: clamp(4px, 5cqmin, 10px) solid var(--mc-blue-soft); border-top-color: var(--mc-blue); animation: mcalc-spin .8s linear infinite; }
@keyframes mcalc-spin { to { transform: rotate(360deg); } }
/* ---- Карточка платежа: белая, без паддинга (зелёная лента вклеена сверху) ---- */
.mcalc__result { padding: 0; overflow: hidden; }

/* Зелёная лента — ТОЛЬКО верхняя часть. Слева заголовок/сумма/бейдж, справа инфографика «тело vs проценты». */
.mcalc__pay-band { position: relative; display: flex; align-items: center; gap: 1.5rem; background: linear-gradient(150deg, #5e9a28 0%, #487e1a 100%); color: #fff; padding: 1.2rem 1.35rem 1.35rem; }
.mcalc__pay-left { flex: 0 0 auto; }
.mcalc__pay-cap { display: block; font-size: .9rem; font-weight: 600; opacity: .95; margin-bottom: .45rem; }
/* Стопкой: сумма, под ней бейдж «includes taxes» слева — справа остаётся только кнопка ссылки (ровно). */
.mcalc__pay-row { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.mcalc__pay-amount { font-size: 2.5rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }

/* Инфографика «тело vs проценты» в правой части плашки (низ-право, ниже кнопки ссылки) */
/* Цвета инфографики «тело vs проценты»: синий = тело, оранжевый = проценты (контраст на белой вставке) */
.mcalc__pi-bar {
    --pi-p: #3a6fe9; --pi-p2: #2f5fd0; --pi-i: #ff9d4d; --pi-i2: #f5793b;
    flex: 1 1 auto; min-width: 0; max-width: 340px; margin-left: auto; align-self: flex-end; margin-top: 2.2rem;
    background: #fff; color: var(--mc-ink); border-radius: 14px; padding: .8rem .9rem;
    box-shadow: 0 6px 18px rgba(16,38,73,.18);
}
.mcalc__pi-bar:empty { display: none; }
.mcalc__pi-bar-title { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-muted); margin-bottom: .55rem; }
/* Толстый цветной stacked-bar с процентами ВНУТРИ сегментов */
.mcalc__pi-bar-track { display: flex; height: 26px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16,38,73,.05); }
.mcalc__pi-seg { display: flex; align-items: center; justify-content: center; height: 100%; color: #fff; font-size: .8rem; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.18); min-width: 0; overflow: hidden; }
.mcalc__pi-seg--p { background: linear-gradient(135deg, var(--pi-p), var(--pi-p2)); }
.mcalc__pi-seg--i { background: linear-gradient(135deg, var(--pi-i), var(--pi-i2)); }
.mcalc__pi-bar-legend { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; font-size: .82rem; }
.mcalc__pi-leg { display: flex; align-items: center; gap: .45rem; white-space: nowrap; color: var(--mc-label); }
.mcalc__pi-leg b { font-weight: 700; color: var(--mc-ink); margin-left: auto; }
.mcalc__pi-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.mcalc__pi-dot--p { background: var(--pi-p); }
.mcalc__pi-dot--i { background: var(--pi-i); }
.mcalc__pay-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.2); border-radius: 999px; padding: .4rem .85rem; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.mcalc__pay-badge .bi { opacity: .85; }
.mcalc__pay-badge.is-hidden { display: none; }

/* Кнопка «Link to calculation» — вверху справа (копия loan: серая, белый фон, рамка) */
.mcalc__save { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius-sm); background: #fff; color: var(--mc-save-color); padding: .4rem .75rem; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mcalc__save:hover { background: var(--mc-blue-soft); }
.mcalc__save.is-done { background: var(--mc-blue); border-color: var(--mc-blue); color: #fff; }
/* Интегрированная в зелёную плашку: пилюля в правом верхнем углу. Десктоп — иконка + надпись, компактно
   (мельче обычной .mcalc__save). Мобайл — только иконка (см. медиа-запрос ≤860). */
.mcalc__save--band {
    position: absolute; top: .55rem; right: .6rem; z-index: 2;
    gap: .3rem; padding: .24rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); color: #fff;
}
.mcalc__save--band:hover, .mcalc__save--band.is-done { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.6); color: #fff; }
.mcalc__save--band .bi { font-size: .82rem; }

/* Кнопки Calculate / Clear — скрыты на десктопе (авто-пересчёт), видны на мобайле (по макету) */
.mcalc__actions { display: none; gap: .6rem; }
.mcalc__calc { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: var(--mc-radius-sm); background: linear-gradient(150deg, #5e9a28 0%, #487e1a 100%); color: #fff; font-size: 1.1rem; font-weight: 700; padding: .9rem 1rem; cursor: pointer; box-shadow: 0 6px 16px rgba(79,154,44,.3); }
.mcalc__calc:active { transform: translateY(1px); }
.mcalc__clear { flex: 0 0 auto; border: 0; border-radius: var(--mc-radius-sm); background: #e9eef4; color: var(--mc-label); font-size: 1.05rem; font-weight: 600; padding: .9rem 1.4rem; cursor: pointer; }
.mcalc__clear:hover { background: #dde4ed; }

/* Breakdown-таблица — на БЕЛОМ под зелёной лентой */
.mcalc__bd { padding: 1.1rem 1.35rem 1.25rem; }
.mcalc__bd-title { font-size: .82rem; font-weight: 600; color: var(--mc-muted); margin-bottom: .45rem; }
.mcalc__bd-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mcalc__bd-table th { font-size: .74rem; font-weight: 600; color: var(--mc-muted); text-align: right; padding: .3rem .2rem; border-bottom: 1px solid var(--mc-card-br); }
.mcalc__bd-table th:first-child { text-align: left; }
.mcalc__bd-table td { padding: .42rem .2rem; text-align: right; color: var(--mc-ink); border-bottom: 1px solid var(--mc-soft); }
.mcalc__bd-table td:first-child { text-align: left; font-weight: 500; color: var(--mc-label); }
.mcalc__bd-table tbody tr:last-child td { border-bottom: 0; }
.mcalc__bd-table .mcalc__bd-pi td { font-weight: 700; color: var(--mc-ink); }

/* ---- Total Out-of-Pocket ---- */
/* Заголовок слева + две суммы справа в ОДНОЙ строке (как в макете) */
.mcalc__pocket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mcalc__pocket-head .mcalc__card-title { margin: 0; }
.mcalc__pocket-totals { display: flex; align-items: baseline; gap: 1.1rem; margin-left: auto; }
.mcalc__pocket-mo { font-size: 1.3rem; font-weight: 800; color: var(--mc-ink); }
.mcalc__pocket-total { font-size: 1.05rem; font-weight: 700; color: var(--mc-muted); }
.mcalc__pocket-body { display: flex; align-items: center; gap: 1.2rem; padding: .25rem 0 1rem; border-bottom: 1px solid var(--mc-card-br); }
.mcalc__pie { flex: 0 0 auto; width: 150px; height: 150px; }
.mcalc__pie svg { width: 100%; height: 100%; display: block; }
.mcalc__pie-legend { flex: 1 1 auto; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.mcalc__pie-leg { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--mc-ink); }
.mcalc__pie-leg .mcalc__dot { flex: 0 0 auto; }
.mcalc__pie-leg-pct { margin-left: auto; color: var(--mc-muted); font-size: .8rem; }
.mcalc__dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.mcalc__dot--pi, .mcalc__dot--balance { background: var(--mc-data-blue); }
.mcalc__dot--tax, .mcalc__dot--principal { background: var(--mc-tax); }
.mcalc__dot--ins { background: var(--mc-ins); }
.mcalc__dot--pmi { background: var(--mc-pmi); }
.mcalc__dot--hoa { background: var(--mc-hoa); }
.mcalc__dot--other { background: var(--mc-other); }
.mcalc__pocket-list { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .9rem; }
.mcalc__pocket-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--mc-soft); color: var(--mc-label); }
.mcalc__pocket-list li:last-child { border-bottom: 0; }
.mcalc__pl-val { font-weight: 700; color: var(--mc-ink); }

/* ---- Сводка-полоска ---- */
.mcalc__summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.1rem; background: var(--mc-card-bg); border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); overflow: hidden; }
.mcalc__summary[hidden] { display: none; }
.mcalc__sum-tile { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; }
.mcalc__sum-tile + .mcalc__sum-tile { border-left: 1px solid var(--mc-card-br); }
.mcalc__sum-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--mc-blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--mc-blue); }
.mcalc__sum-label { display: block; font-size: .72rem; color: var(--mc-muted); }
.mcalc__sum-val { display: block; font-size: .95rem; font-weight: 700; }
.mcalc__lbl-short { display: none; } /* короткие подписи сводки — только мобайл */

/* ---- Синий блок «Today's mortgage rates» ---- */
.mcalc__rates { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: var(--mc-radius); background: linear-gradient(135deg, #3b66e0 0%, #2b3fa8 100%); color: #fff; box-shadow: var(--mc-shadow); }
.mcalc__rates-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.mcalc__rates-body { min-width: 0; }
.mcalc__rates-title { display: block; font-size: .9rem; font-weight: 600; opacity: .95; margin-bottom: .25rem; }
.mcalc__rates-list { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }
.mcalc__rate { font-size: .95rem; color: rgba(255,255,255,.82); }
.mcalc__rate b { color: #fff; font-weight: 700; margin-left: .3rem; }

/* ---- Нижний ряд: график + amortization ---- */
.mcalc__grid--bottom { margin-top: 1.1rem; align-items: stretch; }
.mcalc__grid--bottom[hidden] { display: none; }
.mcalc__grid--bottom .mcalc__card { display: flex; flex-direction: column; }
.mcalc__chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.mcalc__chart-head .mcalc__card-title { margin: 0; }
.mcalc__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .82rem; color: var(--mc-muted); }
.mcalc__legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.mcalc__chart { width: 100%; flex: 1 1 auto; display: flex; align-items: center; min-height: 170px; }
.mcalc__chart svg { width: 100%; height: auto; display: block; }
.mcalc__chart-x { text-align: center; font-size: .78rem; color: var(--mc-muted); margin-top: .1rem; }

.mcalc__view-full { margin: .25rem 0 1rem; border-color: var(--mc-blue); font-weight: 700; color: var(--mc-blue); }
.mcalc__view-full:hover { background: var(--mc-blue-soft); }
.mcalc__vf-arrow { transition: transform .15s; }
.mcalc__view-full:hover .mcalc__vf-arrow { transform: translateX(3px); }
.mcalc__facts { list-style: none; padding: 0; margin: .5rem 0 1rem; font-size: .9rem; }
.mcalc__facts li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--mc-ink); }
.mcalc__facts li i { color: var(--mc-tax); }
.mcalc__sched-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }
.mcalc__btn-fill, .mcalc__btn-outline { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--mc-radius-sm); font-size: .9rem; font-weight: 600; padding: .5rem 1rem; cursor: pointer; white-space: nowrap; }
.mcalc__btn-fill { background: var(--mc-blue); border: 1px solid var(--mc-blue); color: #fff; }
.mcalc__btn-fill:hover { background: #1d4fd0; }
.mcalc__btn-outline { background: #fff; border: 1px solid var(--mc-card-br); color: var(--mc-blue); }
.mcalc__btn-outline:hover { background: var(--mc-blue-soft); }

/* ---- Таблица графика ---- */
.mcalc__table-wrap { overflow-x: auto; margin-top: 1.1rem; border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius); }
.mcalc__table-wrap.is-hidden { display: none; }
.mcalc__table { width: 100%; border-collapse: collapse; text-align: right; font-size: .86rem; }
.mcalc__table th, .mcalc__table td { padding: .5rem .7rem; border-bottom: 1px solid var(--mc-card-br); white-space: nowrap; }
.mcalc__table thead th { background: var(--mc-blue); color: #fff; font-weight: 600; position: sticky; top: 0; }
.mcalc__table th:first-child, .mcalc__table td:first-child, .mcalc__table th:nth-child(2), .mcalc__table td:nth-child(2) { text-align: left; }
.mcalc__table tbody tr:nth-child(even) { background: var(--mc-soft); }
.mcalc__table tfoot td { font-weight: 700; border-top: 2px solid var(--mc-blue); }

/* ---- Инфо-иконки ---- */
.mcalc__info { font-size: .82rem; opacity: .5; cursor: help; padding: .1em .2em; color: inherit; }
.mcalc__info:hover, .mcalc__info:focus { opacity: .9; outline: none; }
/* Иконка-подсказка на цветном бейдже (зелёная плашка): белая, чуть заметнее */
.mcalc__info--badge { opacity: .8; color: #fff; }
.mcalc-tooltip {
    position: fixed; z-index: 9999; max-width: 240px;
    background: var(--mc-ink); color: #fff; padding: .5rem .65rem; border-radius: 8px;
    font-size: .72rem; font-weight: 400; line-height: 1.4; text-align: left;
    box-shadow: 0 6px 18px rgba(16,38,73,.22);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
}
.mcalc-tooltip.is-on { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- Explore ---- */
.mcalc__explore { margin-top: 2rem; }
.mcalc__explore-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; }
.mcalc__explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mcalc__explore-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius); background: #fff; text-decoration: none; color: var(--mc-ink); transition: box-shadow .15s, transform .15s; }
.mcalc__explore-card:hover { box-shadow: var(--mc-shadow); transform: translateY(-2px); }
.mcalc__explore-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--mc-blue-soft); color: var(--mc-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.mcalc__explore-name { font-weight: 700; font-size: 1rem; }
.mcalc__explore-desc { font-size: .85rem; color: var(--mc-muted); flex: 1 1 auto; }
.mcalc__explore-link { font-size: .85rem; font-weight: 600; color: var(--mc-blue); }

/* ---- FAQ ---- */
/* В сетке остался один FAQ: «How it works» переехал в общий блок движка (templates/partials/tool_explain.php). */
.mcalc__info-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mc-card-br); }
.mcalc__info-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .85rem; }
.mcalc__faq-item { border-bottom: 1px solid var(--mc-card-br); padding: .15rem 0; }
.mcalc__faq-item summary { cursor: pointer; padding: .65rem 0; font-weight: 600; font-size: .92rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mcalc__faq-item summary::-webkit-details-marker { display: none; }
.mcalc__faq-item summary::after { content: '\203A'; transform: rotate(90deg); color: var(--mc-muted); transition: transform .15s; }
.mcalc__faq-item[open] summary::after { transform: rotate(-90deg); }
.mcalc__faq-item p { font-size: .88rem; color: var(--mc-muted); line-height: 1.55; margin: 0 0 .75rem; }

.mcalc__disclaimer { margin-top: 1.5rem; text-align: center; font-size: .78rem; color: var(--mc-muted); }

/* ---- Адаптив (мобайл) ---- */
@media (max-width: 860px) {
    .mcalc__grid:not(.mcalc__grid--bottom), .mcalc__info-grid, .mcalc__explore-grid { grid-template-columns: 1fr; gap: 1rem; }
    .mcalc__col { gap: 1rem; }
    .mcalc__grid--bottom { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .mcalc__share-row { flex-wrap: wrap; gap: .5rem; }
    /* Контентоёмкие кнопки в узкой колонке — на всю ширину, перенос разрешён (не распирать колонку). */
    .mcalc__grid--bottom .mcalc__btn-fill, .mcalc__grid--bottom .mcalc__btn-outline, .mcalc__view-full {
        white-space: normal; text-align: center; width: 100%; justify-content: center;
    }
    .mcalc__sched-actions { flex-direction: column; gap: .5rem; }

    /* === Мобильная форма по mobile-макету / proto.png: единая 2-колоночная сетка === */
    .mcalc__actions { display: flex; margin-top: .1rem; }
    /* Блок пошире: меньше боковых паддингов карточки на мобайле (по просьбе владельца). */
    .mcalc__card { padding: 1rem .85rem; }
    /* Карточка результата — БЕЗ паддинга: зелёная плашка идёт во всю ширину и до краёв («шапочка»). */
    .mcalc__result { padding: 0; }
    /* Мобайл: кнопка ссылки — ТОЛЬКО иконка (компактнее), надпись прячем */
    .mcalc__save--band { padding: .34rem .5rem; gap: 0; }
    .mcalc__save--band span { display: none; }
    .mcalc__save--band .bi { font-size: 1rem; }
    .mcalc__pay-cap { padding-right: 2.6rem; }
    /* Плашка в столбик: бар «тело vs проценты» уходит под сумму, во всю ширину, уменьшенный */
    .mcalc__pay-band { flex-direction: column; align-items: stretch; gap: .85rem; }
    .mcalc__pay-left { flex: 1 1 auto; }
    .mcalc__pi-bar { max-width: none; margin-left: 0; margin-top: 0; align-self: stretch; padding: .7rem .8rem; }
    .mcalc__pi-bar-track { height: 22px; }
    .mcalc__pi-seg { font-size: .76rem; }
    .mcalc__pi-bar-legend { font-size: .8rem; }
    /* БЕЗ серой подложки (убрана по просьбе владельца): больше места по горизонтали → подписи
       помещаются в ОДНУ строку, как в proto.png. ОБЩАЯ сетка столбца на КОНТЕЙНЕРЕ (строки — subgrid)
       → колонки общие у всех строк, левый и правый край полей строго совпадают. */
    .mcalc__fields, .mcalc__cost-list {
        --mc-field-h: 50px;   /* единая высота ВСЕХ полей (инпуты, селекты единиц, селекты дат) */
        display: grid; grid-template-columns: max-content minmax(150px, 1fr);
        column-gap: .6rem; row-gap: 0;
    }

    /* === МОНОЛИТНЫЙ столбик полей (как proto.png) ===
       2 колонки: подпись (по содержимому, справа) | ПОЛЕ-КОЛОНКА (одна и та же у всех строк).
       Поле-колонка — flex: одиночный инпут заполняет её ЦЕЛИКОМ; инпут+единица делят её,
       единица по содержимому прижата ВПРАВО → левая и правая границы полей совпадают у всех строк. */
    .mcalc__field, .mcalc__cost {
        display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
        align-items: center; column-gap: .4rem; padding: .13rem 0; border-bottom: 0;
    }
    .mcalc__field:first-of-type { padding-top: 0; }
    /* подпись — колонка 1, справа, в ОДНУ строку (как proto.png); крупнее — чтобы названия читались */
    .mcalc__label, .mcalc__cost-label { grid-column: 1; text-align: right; white-space: nowrap; line-height: 1.2; font-size: 1rem; color: var(--mc-label); }
    .mcalc__label .mcalc__info, .mcalc__cost-label .mcalc__info { font-size: .72rem; padding: .05em .1em; }
    /* поле-колонка (col 2) — flex: инпут тянется, селект единицы по содержимому справа */
    .mcalc__control-row, .mcalc__cost-field { grid-column: 2; display: flex; align-items: center; gap: .4rem; min-width: 0; }
    /* ВСЕ поля одной высоты (--mc-field-h); vertical padding убран — высоту держит height */
    .mcalc__control, .mcalc__cost-control { flex: 1 1 auto; min-width: 0; height: var(--mc-field-h); padding: 0 .7rem; border-radius: 12px; }
    .mcalc__input, .mcalc__cost-control .mcalc__input { font-size: 1.25rem; padding-top: 0; padding-bottom: 0; }
    .mcalc__cost-control .mcalc__input { font-size: 1.2rem; }
    .mcalc__control--money .mcalc__money-sign { font-size: 1.2rem; }
    .mcalc__suffix { font-size: 1rem; }
    /* Селекты единиц — ОДИНАКОВАЯ фикс-ширина (%, $, /yr, /mo) И единая высота с инпутами. */
    .mcalc__unit { flex: 0 0 var(--mc-unit-w, 58px); width: var(--mc-unit-w, 58px); min-width: 0; height: var(--mc-field-h); padding: 0 .3rem; border-radius: 12px; font-size: .95rem; text-align: center; text-align-last: center; }
    /* Start date — два селекта делят колонку поровну, год достаёт до ПРАВОГО края, высота единая */
    .mcalc__date-row { display: flex; align-items: center; gap: .4rem; }
    .mcalc__date-row .mcalc__select { flex: 1 1 0; width: auto; min-width: 0; height: var(--mc-field-h); padding: 0 .5rem; border-radius: 12px; font-size: 1.05rem; }
    /* Подсказка под полем относится к СВОЕМУ (верхнему) полю — притянута к нему, отделена от следующего */
    .mcalc__subnote { grid-column: 2; text-align: right; margin: -.35rem 0 .35rem; line-height: 1.2; }
    .mcalc__cost-mo { display: none; }

    /* Сводка — 3 отдельные карточки в РЯД (как в макете), иконка сверху, по центру */
    .mcalc__summary { grid-template-columns: repeat(3, 1fr); gap: .55rem; background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .mcalc__sum-tile { flex-direction: column; text-align: center; gap: .3rem; padding: .75rem .35rem; background: var(--mc-card-bg); border: 1px solid var(--mc-card-br); border-radius: var(--mc-radius-sm); box-shadow: var(--mc-shadow); }
    .mcalc__sum-tile + .mcalc__sum-tile { border-left: 1px solid var(--mc-card-br); border-top: 0; }
    .mcalc__sum-icon { margin: 0 auto; }
    .mcalc__lbl-full { display: none; }
    .mcalc__lbl-short { display: inline; }

    /* Extra payments — чистая раскладка: поле на всю ширину, ниже «from/in» + месяц + год в ряд */
    .mcalc__extra-row { gap: .4rem .5rem; }
    .mcalc__extra-row .mcalc__control { flex: 1 1 100%; }
    .mcalc__extra-prep { flex: 0 0 auto; }
    .mcalc__extra-row .mcalc__select--sm { flex: 1 1 0; min-width: 0; }

    /* Синий блок ставок — чуть компактнее */
    .mcalc__rates { gap: .75rem; padding: .9rem 1rem; }
}
@media (max-width: 560px) {
    /* Узкие экраны — тот же монолитный столбик (колонки на контейнере), поле-колонка чуть уже */
    .mcalc__fields, .mcalc__cost-list { --mc-field-h: 48px; grid-template-columns: max-content minmax(140px, 1fr); column-gap: .45rem; }
    .mcalc__label, .mcalc__cost-label { font-size: .92rem; }
    .mcalc__input, .mcalc__cost-control .mcalc__input { font-size: 1.18rem; }
    .mcalc__cost-control .mcalc__input { font-size: 1.12rem; }
    .mcalc__unit { --mc-unit-w: 54px; font-size: .9rem; padding: 0 .25rem; }
    .mcalc__pay-row { flex-wrap: wrap; gap: .5rem; }
    .mcalc__pay-amount { font-size: 2.1rem; }
    .mcalc__pocket-totals { margin-left: 0; }
    .mcalc__pocket-body { flex-direction: column; align-items: stretch; gap: .8rem; }
    .mcalc__pie { align-self: center; }
    .mcalc__summary { gap: .4rem; }
    .mcalc__sum-tile { padding: .65rem .25rem; }
    .mcalc__sum-val { font-size: .9rem; }
    .mcalc__adv-row { grid-template-columns: 1fr 110px; }
    .mcalc__calc { font-size: 1rem; padding: .85rem .8rem; }
    .mcalc__clear { padding: .85rem 1.1rem; font-size: 1rem; }
}


/* ---- Печать ---- */
@media print {
    .mcalc__share-row, .mcalc__above, .mcalc__advanced, .mcalc__toggle,
    .mcalc__sched-actions, .mcalc__share, .mcalc__explore, .mcalc__faq, .mcalc__error { display: none !important; }
    .mcalc__table-wrap.is-hidden { display: block !important; }
}