/* ============================================================
   Калькулятор вклада — оформление по правилам R (DEP_R_2026_10_12).
   Общие поля, кнопки, карточка итога, ряд показателей, строка итога на телефоне — css/calc-shell.css.
   Здесь — «Что остаётся от ставки», график «Как растёт вклад» (DEP_CHART_2026_10_13) и мелочи раскладки вклада.
   ============================================================ */
.dep-er{display:flex;flex-direction:column;gap:12px}
.dep-er-row{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 80px;align-items:center;gap:14px}
.dep-er-label{font:400 14px/1.3 var(--r-f);color:var(--r-t2)}
.dep-er-track{height:10px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.dep-er-bar{display:block;height:100%;border-radius:4px;background:#787b86;transition:width .32s cubic-bezier(.2,0,.38,.9)}
.dep-er-bar.pos{background:var(--r-g)}
.dep-er-bar.neg{background:var(--r-red)}
.dep-er-val{text-align:right;font:600 15px/1.2 var(--r-f);color:var(--r-t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.dep-er-val.pos{color:var(--r-g)}
.dep-er-val.neg{color:var(--r-red)}
.dep-cmp-note{margin-top:10px}
@media (max-width:599px){
  .dep-er-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .dep-er-track{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.dep-er-bar{transition:none}}
/* DEP_CHART_2026_10_13: график «Как растёт вклад» — оформление как у погашения долгов и сложного процента */
.dep-chart-frame{position:relative}
#dep-chart{display:block;width:100%;height:clamp(220px,32vh,300px);touch-action:pan-y}
#dep-chart .dep-ax{font:400 12px "IBM Plex Sans",Arial,sans-serif;fill:#b3b9c2;font-variant-numeric:tabular-nums}
.dep-tip{position:absolute;left:0;top:0;min-width:220px;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}
.dep-tip .t-head{margin-bottom:4px;color:var(--r-t2)}
.dep-tip .t-row{display:flex;justify-content:space-between;gap:16px}
.dep-tip .t-row span{color:var(--r-t2)}
.dep-tip .t-row b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dep-tip .t-row b.is-main{color:var(--r-g)}
.dep-tip .t-note{margin-top:6px;padding-top:6px;border-top:1px solid var(--r-line2);color:var(--r-t2)}
@media (prefers-reduced-motion:reduce){.dep-tip{transition:none}}

/* DEP_UX_2026_10_27 (владелец 27.10: «переработай все остальные инструменты из вкладки калькуляторы по такому же принципу:
   график на первом экране, цвета, верхняя панель из карточек, рациональное использование места»): ответ шире 1100
   (экран 2000 и шире) — полосой «сумма · показатели в ряд», как у кредитного и сложного процента; уже — как было */
@container (min-width:1100px){
  #dep-sum .bhc-sum-in{grid-template-columns:minmax(320px,.8fr) minmax(0,2fr);gap:0 40px;align-items:start}
  #dep-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 0;padding:0;border-left:0}
  #dep-metrics .bhc-metric,#dep-metrics .bhc-metric:nth-child(n){display:flex;flex-direction:column;gap:8px;padding:2px 0 0 24px;border-top:0;border-left:1px solid var(--r-line2)}
  #dep-metrics .bhc-metric dt{align-self:auto;font-size:14px}
  #dep-metrics .bhc-metric dd{margin:0;font-size:24px;text-align:left;white-space:nowrap}
  #dep-metrics .bhc-metric dd.bhc-metric-sub{margin:-2px 0 0;font-size:13px;white-space:normal}
}
/* ответ 600–879 (экран 1280–1440): четыре показателя одним рядом, а не 3 + 1 */
@container (min-width:600px) and (max-width:879px){
  #dep-metrics:has(> .bhc-metric:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
}

/* SPACE27_2026_10_27 (владелец 27.10: «еще раз проверь рациональность использования свободного места. например тут
   неэффективно использовано» — под показателями полосы ответа пустота: слева под суммой условия и оговорка в три-четыре
   строки, справа одна строка чисел). Ответ шире 1100: сумма и показатели на одной высоте, условия и оговорка — подвалом
   полосы под чертой во всю ширину (условия под суммой, оговорка под показателями). Уже 1100 — как было. */
@container (min-width:1100px){
  #dep-sum .bhc-sum-in{grid-template-rows:auto auto 1fr auto}
  #dep-sum .bhc-sum-main{display:contents}
  #dep-sum .bhc-hero-label{grid-area:1/1}
  #dep-sum .bhc-hero-value{grid-area:2/1}
  #dep-metrics{grid-area:1/2/4/3}
  #dep-sum .bhc-sum-in::before{content:"";grid-area:4/1/5/-1;margin-top:20px;border-top:1px solid var(--r-line2)}
  #dep-sum .bhc-hero-note{grid-area:4/1;margin:35px 0 0}
  #dep-sum .bhc-hero-caveat{grid-area:4/2;margin:35px 0 0;padding-left:24px}
  #dep-sum .bhc-hero-note:empty+.bhc-hero-caveat{grid-column:1/-1;padding-left:0}
}
/* SPACE27: показателей 6 и больше (налог, комиссия, инфляция, доллар) — два ряда; тогда условия и оговорка снова под суммой,
   иначе под суммой пустота высотой в ряд, а ряды ровные: 6 — по три, 7–8 — по четыре, 9–10 — по пять. Значения одного ряда на одной линии,
   даже если подпись в соседней ячейке в две строки. */
@container (min-width:1100px){
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(6)) .bhc-sum-main{display:block}
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(6))::before{content:none}
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(6)) .bhc-hero-note{margin:12px 0 0}
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(6)) .bhc-hero-caveat{margin:2px 0 0;padding-left:0}
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(6)) #dep-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(7)) #dep-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  #dep-sum .bhc-sum-in:has(.bhc-metric:nth-child(9)) #dep-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
  @supports (grid-template-rows:subgrid){
    #dep-metrics .bhc-metric,#dep-metrics .bhc-metric:nth-child(n){display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:8px;align-content:start}
    #dep-metrics .bhc-metric dt{grid-column:1;grid-row:1;align-self:end}
    #dep-metrics .bhc-metric dd{grid-column:1;grid-row:2}
    #dep-metrics .bhc-metric dd.bhc-metric-sub{grid-column:1;grid-row:3;margin-top:-2px}
  }
}

/* SPACE27_2026_10_27: на широком экране (окно от 1760) в «Что остаётся от дохода» две полосы рядом: слева инфляция с выводом,
   справа «Вложено, доход и налог»; во всю ширину каждая полоса — одна строка на 1300 px */
@media (min-width:1760px){
  .dep-er-card:has(> #dep-er:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .dep-er-card:has(> #dep-er:not([hidden]))>*{grid-column:1}
  .dep-er-card:has(> #dep-er:not([hidden]))>.bhc-compose{grid-column:2;grid-row:1/4;margin:0;padding:0 0 0 40px;border-top:0;border-left:1px solid var(--r-line)}
  .dep-er-card:has(> #dep-er:not([hidden]))>.bhc-insight{grid-column:1/-1}
}
/* DEP_BANK_2026_11_02: выбор банка и вклада; поле — как .bhc-input, стрелка своя, список системный: на телефоне открывается родным меню */
.dep-bank{display:contents}
.dep-r .dep-bank>.bhc-field:first-child{margin-top:16px}
.dep-r .bhc-select{position:relative;display:block}
.dep-r .bhc-select select{display:block;width:100%;height:42px;margin:0;padding:0 36px 0 14px;background:var(--r-bg);border:1px solid var(--r-line2);border-radius:6px;color:var(--r-t1);font:500 15px/1.2 var(--r-f);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;-webkit-appearance:none;appearance:none}
.dep-r .bhc-select select:hover:not(:focus){border-color:rgba(255,255,255,.24)}
.dep-r .bhc-select select:focus{outline:none;border-color:var(--r-g)}
.dep-r .bhc-select select:focus-visible{outline:2px solid var(--r-g);outline-offset:2px}
.dep-r .bhc-select select:disabled{color:var(--r-t3);cursor:default}
.dep-r .bhc-select select option,.dep-r .bhc-select select optgroup{background:#121820;color:#e6e9ee}
.dep-r .bhc-select::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--r-t2);border-bottom:1.5px solid var(--r-t2);transform:rotate(45deg);pointer-events:none}
.dep-r #dep-offer-note a{color:var(--r-t1);text-decoration:underline;text-underline-offset:2px}
.dep-r #dep-offer-note .neg{color:var(--r-red)}
@media (max-width:767px){.dep-r .bhc-select select{height:44px}}
/* зона касания 44 на телефоне и значок «новое» у подписи шрифтом инструмента (канон 0.2, 0.9.3) */
@media (max-width:767px){.dep-r .bhc-switch{min-height:44px}.dep-r .bhc-range+.bhc-chips{margin-top:12px}}
.dep-r .bhc-label .bh-wn-feature-badge{font:500 13px/1.2 var(--r-f)}
/* партнёр карточкой внутри инструмента: канон 1б, как .kp-fund */
.dep-fund{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.dep-fund-tx{flex:1 1 420px;min-width:0}
.dep-fund .bhc-card-title{margin:0 0 6px}
.dep-fund .bhc-note{margin:0}
.dep-fund .bhc-note a{color:var(--r-t1);text-decoration:underline;text-underline-offset:2px}
@media (max-width:767px){.dep-fund{flex-direction:column;align-items:stretch}.dep-fund-tx{flex:none}.dep-fund .bhc-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}