/* ============================================================
   Калькуляторы метрик арбитража (.bcc), 30.09.2026.
   Работают и в статьях (шорткод [bc_calc]), и на странице
   /instrumenty/kalkulyator-arbitrazhnika/. Токены из bc2.css,
   у каждого запасное значение: стили статьи не должны их ломать.
   Поля не мельче 16px, иначе iPhone увеличивает страницу при фокусе.
   ============================================================ */

.bcc {
  --bcc-ink: var(--ink, #0B0F14);
  --bcc-ink2: var(--ink-2, #1A222C);
  --bcc-muted: var(--muted, #5C6875);
  --bcc-line: var(--line, #DCE3EB);
  --bcc-wash: var(--wash, #EFF2F6);
  --bcc-acc: var(--accent, #0FB5AE);
  --bcc-deep: var(--accent-deep, #068C86);
  --bcc-good: var(--money, #0E7C55);
  --bcc-bad: #C2412D;
  --bcc-tint: #F1FAF9;
  position: relative;
  margin: 30px 0;
  background: #fff;
  border: 1px solid var(--bcc-line);
  border-radius: 18px;
  color: var(--bcc-ink);
  font-family: var(--f-ui, "Onest", "Segoe UI", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(11, 15, 20, .04), 0 24px 48px -40px rgba(11, 15, 20, .35);
  overflow: hidden;
  scroll-margin-top: 96px;
}
.bcc *, .bcc *::before, .bcc *::after { box-sizing: border-box; }
.bcc p, .bcc dl, .bcc dd, .bcc dt { margin: 0; padding: 0; }
.bcc button { font: inherit; }
.bcc [hidden] { display: none !important; }

.bcc__boot { padding: 26px 20px; color: var(--bcc-muted); font-size: 15px; }
.bcc__nojs { padding: 0 20px 20px; color: var(--bcc-muted); font-size: 15px; }

/* шапка */
.bcc__head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--bcc-line);
}
.bcc__tag {
  flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 50px; height: 34px; padding: 0 9px;
  border-radius: 10px; background: var(--bcc-ink); color: #fff;
  font: 700 13px/1 var(--f-mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: .04em;
}
.bcc__ttl { flex: 1 1 auto; min-width: 0; }
.bcc__title { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.bcc__sub { margin-top: 2px; font-size: 14px; color: var(--bcc-muted); line-height: 1.35; }
.bcc__cur {
  flex: 0 0 auto; display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bcc-wash); border-radius: 11px;
}
.bcc__curb {
  width: 34px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--bcc-muted); font-weight: 600; font-size: 15px; line-height: 1;
  transition: background .15s, color .15s;
}
.bcc__curb:hover { color: var(--bcc-ink); }
.bcc__curb.is-on { background: #fff; color: var(--bcc-ink); box-shadow: 0 1px 2px rgba(11, 15, 20, .12); }

/* режимы */
.bcc__modes {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px 20px 0;
}
.bcc__mode {
  height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bcc-line); background: #fff; color: var(--bcc-ink2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.bcc__mode:hover { border-color: var(--bcc-acc); color: var(--bcc-deep); }
.bcc__mode.is-on { background: var(--bcc-ink); border-color: var(--bcc-ink); color: #fff; }

/* тело */
.bcc__body {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}
.bcc__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px;
  align-content: start; padding: 18px 20px 20px;
}
.bcc__fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bcc__fld--wide { grid-column: 1 / -1; }
.bcc__lbl { font-size: 13.5px; font-weight: 600; color: var(--bcc-ink); line-height: 1.3; }
.bcc__ctl {
  display: flex; align-items: center; height: 48px; min-width: 0;
  background: #fff; border: 1px solid #D3DBE4; border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.bcc__ctl:hover { border-color: #B9C5D1; }
.bcc__ctl:focus-within { border-color: var(--bcc-acc); box-shadow: 0 0 0 3px rgba(15, 181, 174, .16); }
.bcc__ctl.is-bad { border-color: var(--bcc-bad); }
.bcc__ctl--pre { flex-direction: row-reverse; }
.bcc .bcc__in {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 12px;
  border: 0; outline: none; background: none; box-shadow: none;
  font: 600 17px/1 var(--f-ui, "Onest", system-ui, sans-serif); color: var(--bcc-ink);
  font-variant-numeric: tabular-nums;
}
.bcc .bcc__in::placeholder { color: #9AA6B2; font-weight: 500; font-size: 15px; }
.bcc__unit {
  flex: 0 0 auto; padding: 0 13px 0 0; color: var(--bcc-muted); font-weight: 600; font-size: 15px;
}
.bcc__ctl--pre .bcc__unit { padding: 0 0 0 13px; }
.bcc__ctl--pre .bcc__in { padding-left: 5px; }
.bcc__hint { font-size: 12.5px; color: var(--bcc-muted); line-height: 1.35; }

.bcc__pre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.bcc__src { flex: 0 0 100%; font-size: 12.5px; color: var(--bcc-muted); }
.bcc__chip {
  height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bcc-line); background: var(--bcc-wash); color: var(--bcc-ink2);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.bcc__chip b { font-weight: 700; color: var(--bcc-ink); }
.bcc__chip:hover { border-color: var(--bcc-acc); background: #fff; }

/* результат */
.bcc__res {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 18px 20px 20px;
  background: var(--bcc-tint); border-left: 1px solid var(--bcc-line);
}
.bcc__bl { font-size: 13px; font-weight: 600; color: var(--bcc-deep); text-transform: uppercase; letter-spacing: .05em; }
.bcc__big {
  margin-top: -6px;
  font-size: clamp(34px, 4.2vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--bcc-ink); overflow-wrap: anywhere;
}
.bcc__res.is-good .bcc__big { color: var(--bcc-good); }
.bcc__res.is-bad .bcc__big { color: var(--bcc-bad); }
.bcc__res.is-empty .bcc__big { color: #A3AEB9; }

.bcc__rows { display: grid; gap: 0; }
.bcc__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-top: 1px solid rgba(6, 140, 134, .14);
}
.bcc__row:first-child { border-top: 0; padding-top: 0; }
.bcc__row dt { font-size: 14px; color: var(--bcc-ink2); }
.bcc__row dd { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.bcc__formula {
  padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px dashed #BFD9D6;
  font: 500 12.5px/1.55 var(--f-mono, "JetBrains Mono", ui-monospace, monospace); color: var(--bcc-ink2);
  overflow-wrap: anywhere;
}
.bcc__formula:empty { display: none; }
.bcc__formula div + div { margin-top: 4px; }
/* Стили статьи (.entry-content p) сильнее одиночного класса, поэтому двойной селектор. */
.bcc .bcc__note { margin: 0; font-size: 14px; color: var(--bcc-ink2); line-height: 1.45; }
.bcc .bcc__note:empty { display: none; }
.bcc .bcc__res.is-empty .bcc__note { color: var(--bcc-bad); }

/* шаги воронки: полоса сужается от показов к подтверждённым лидам */
.bcc__steps { display: grid; gap: 5px; }
.bcc__steps:empty { display: none; }
.bcc__step {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 40px; padding: 6px 10px; border-radius: 9px; overflow: hidden;
  background: #fff; border: 1px solid rgba(6, 140, 134, .16);
}
.bcc__step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 100%);
  background: rgba(15, 181, 174, .16); border-right: 2px solid var(--bcc-acc);
}
.bcc__sl, .bcc__sn { position: relative; }
.bcc__sl { font-size: 13.5px; color: var(--bcc-ink2); line-height: 1.2; }
.bcc__sl small { display: block; font-size: 11.5px; color: var(--bcc-deep); font-weight: 600; }
.bcc__sn { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* подвал */
.bcc__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 12px 20px; border-top: 1px solid var(--bcc-line); background: #fff;
}
.bcc__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bcc__btn {
  height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--bcc-ink); background: var(--bcc-ink); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.bcc__btn:hover { background: var(--bcc-ink2); }
.bcc__btn:disabled { opacity: .45; cursor: default; }
.bcc__btn.is-done { background: var(--bcc-good); border-color: var(--bcc-good); }
.bcc__btn--ghost { background: #fff; color: var(--bcc-ink); border-color: var(--bcc-line); }
.bcc__btn--ghost:hover { background: var(--bcc-wash); }
.bcc a.bcc__more {
  font-size: 14px; font-weight: 600; color: var(--bcc-deep); text-decoration: none;
}
.bcc a.bcc__more::after { content: " \2192"; }
.bcc a.bcc__more:hover { color: var(--bcc-ink); text-decoration: underline; }

/* широкий калькулятор: поля в три колонки */
.bcc--wide .bcc__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- страница инструмента ---------- */
.bct-app.bct-app--flat { background: none; border: 0; padding: 0; box-shadow: none; }
.bcc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.bcc-nav a {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px;
  border-radius: 999px; border: 1px solid var(--line, #DCE3EB); background: #fff;
  color: var(--ink-2, #1A222C); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.bcc-nav a:hover { border-color: var(--accent, #0FB5AE); color: var(--accent-deep, #068C86); }
.bcc-nav b {
  display: inline-grid; place-items: center; height: 26px; min-width: 38px; padding: 0 6px; border-radius: 999px;
  background: var(--wash, #EFF2F6); font: 700 11px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .03em;
  color: var(--ink, #0B0F14);
}
.bcc-tool .bcc { margin: 18px 0 0; }
.bcc-tool .bcc:first-of-type { margin-top: 16px; }

/* ---------- планшет и телефон ---------- */
@media (max-width: 760px) {
  .bcc__body { grid-template-columns: minmax(0, 1fr); }
  .bcc__res { border-left: 0; border-top: 1px solid var(--bcc-line); }
  .bcc--wide .bcc__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* На телефоне навигация одной прокручиваемой строкой, иначе съедает пол-экрана. */
  .bcc-nav { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .bcc-nav::-webkit-scrollbar { display: none; }
  .bcc-nav a { flex: 0 0 auto; }
}
@media (max-width: 460px) {
  .bcc { border-radius: 16px; margin: 24px 0; }
  .bcc__head { padding: 14px 14px; gap: 10px; flex-wrap: wrap; }
  .bcc__tag { min-width: 44px; height: 30px; font-size: 12px; }
  .bcc__ttl { flex-basis: calc(100% - 60px); }
  .bcc__cur { margin-left: 54px; }
  .bcc__modes { padding: 12px 14px 0; }
  .bcc__form, .bcc--wide .bcc__form { padding: 14px; gap: 12px 10px; }
  .bcc__res { padding: 14px; }
  .bcc__foot { padding: 12px 14px; }
  .bcc__acts { width: 100%; }
  .bcc__btn { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  .bcc__form, .bcc--wide .bcc__form { grid-template-columns: minmax(0, 1fr); }
}