/* Калькулятор юнит-экономики (/kalkulyator и SEO-страницы). Только токены --mzone-*.
   Таблица «параметр × сценарии»: первая колонка прилипает, сценарии листаются
   внутри карточки, страница вбок не едет (UI-STYLEGUIDE п. 9–10). */

.uc { --uc-lab: 250px; --uc-col: 250px; min-width: 0; }
.uc-tabs { margin-bottom: var(--mzone-space-4); }
.uc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--mzone-space-3); margin-bottom: var(--mzone-space-3); }
.uc-lead { margin: 0; max-width: 46rem; }
.uc-actions, .uc-add-mp { display: flex; flex-wrap: wrap; gap: var(--mzone-space-2); }

.uc-card { padding: 0; overflow: hidden; }
.uc-scroll { width: 100%; overflow-x: auto; scrollbar-width: thin; }
.uc-table { border-collapse: separate; border-spacing: 0; table-layout: fixed;
  width: calc(var(--uc-lab) + var(--uc-col) * var(--uc-n, 1)); min-width: 100%;
  font-size: var(--mzone-font-size-md); color: var(--mzone-text); }
.uc-table th, .uc-table td { border-bottom: 1px solid var(--mzone-border-soft); vertical-align: middle; }
.uc-table col.uc-col-lab { width: var(--uc-lab); }
.uc-table col.uc-col-scn { width: var(--uc-col); }

/* колонка подписей прилипает слева */
.uc-lab { position: sticky; left: 0; z-index: 2; padding: .5rem .75rem .5rem 1rem;
  background: var(--mzone-surface); border-right: 1px solid var(--mzone-border-soft);
  font-weight: 500; text-align: left; line-height: 1.3; }
.uc-lab .uc-q { margin-left: .35rem; }

.uc-head-cell { padding: .6rem .75rem; background: var(--mzone-surface-soft); text-align: left; }
.uc-head-lab { z-index: 3; background: var(--mzone-surface-soft); color: var(--mzone-text-muted);
  font-size: var(--mzone-font-size-sm); font-weight: 600; }
.uc-name-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.uc-name { flex: 1; min-width: 0; padding: .3rem .5rem; border: 1px solid transparent; border-radius: .5rem;
  background: transparent; color: var(--mzone-text); font: inherit; font-weight: 650; }
.uc-name:hover, .uc-name:focus { border-color: var(--mzone-border); background: var(--mzone-surface); outline: none; }
.uc-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: .5rem; background: transparent;
  color: var(--mzone-text-muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.uc-x:hover:not(:disabled) { background: var(--mzone-danger-bg); color: var(--mzone-danger); }
.uc-x:disabled { opacity: .35; cursor: default; }

.uc-sect td { padding: .9rem 1rem .45rem; background: var(--mzone-surface-muted);
  color: var(--mzone-text-muted); font-size: var(--mzone-font-size-sm); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.uc-sect .uc-lab { background: var(--mzone-surface-muted); }
.uc-sect-res td, .uc-sect-res .uc-lab { background: var(--mzone-navy-950); color: var(--mzone-text-inverse); }

.uc-cell { padding: .4rem .75rem; min-width: 0; }
.uc-cell.uc-auto { box-shadow: inset 3px 0 0 var(--mzone-cyan-400); }
.uc-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.uc-in { flex: 1 1 auto; min-width: 0; }
.uc-out { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
.uc-rub { white-space: nowrap; font-weight: 600; }
.uc-pp { color: var(--mzone-text-muted); font-size: var(--mzone-font-size-sm); white-space: nowrap; }
.uc-only { color: var(--mzone-text-soft); font-size: var(--mzone-font-size-sm); }

.uc-field { display: flex; align-items: center; min-width: 0; border: 1px solid var(--mzone-border);
  border-radius: .5rem; background: var(--mzone-surface); }
.uc-field:focus-within { border-color: var(--mzone-teal-500); box-shadow: 0 0 0 3px var(--mzone-cyan-200); }
.uc-field input { width: 100%; min-width: 0; padding: .35rem .5rem; border: 0; border-radius: .5rem;
  background: transparent; color: var(--mzone-text); font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.uc-field .uc-unit { flex: none; padding-right: .5rem; color: var(--mzone-text-muted); font-size: var(--mzone-font-size-sm); }
.uc-text, .uc-select { width: 100%; min-width: 0; padding: .35rem .5rem; border: 1px solid var(--mzone-border);
  border-radius: .5rem; background: var(--mzone-surface); color: var(--mzone-text); font: inherit; }
.uc-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.uc-vol { margin-top: .2rem; color: var(--mzone-text-muted); font-size: var(--mzone-font-size-sm); }
.uc-seg { display: flex; flex-wrap: wrap; gap: .25rem; }
.uc-seg button { flex: 1 0 auto; min-height: 30px; padding: 0 .5rem; border: 1px solid var(--mzone-border);
  border-radius: .45rem; background: var(--mzone-surface); color: var(--mzone-text-muted);
  font: inherit; font-size: var(--mzone-font-size-sm); font-weight: 600; cursor: pointer; }
.uc-seg button.on { border-color: transparent; background: var(--mzone-solid); color: var(--mzone-solid-ink); }
.uc-note-inline { margin-top: .3rem; padding: .35rem .5rem; border-radius: .45rem;
  background: var(--mzone-warning-bg); color: var(--mzone-text); font-size: var(--mzone-font-size-sm); line-height: 1.35; }

.uc-res .uc-rub { font-size: var(--mzone-font-size-base); }
.uc-big .uc-lab { font-size: var(--mzone-font-size-base); font-weight: 700; }
.uc-big .uc-rub { font-size: 1.25rem; font-weight: 750; }
.uc-pos .uc-rub { color: var(--mzone-success); }
.uc-neg .uc-rub { color: var(--mzone-danger); }
.uc-client .uc-rub { color: var(--mzone-teal-700); }

.uc-q { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
  border: 1px solid var(--mzone-border); border-radius: 50%; background: var(--mzone-surface);
  color: var(--mzone-text-muted); font-size: 11px; font-weight: 700; cursor: help; vertical-align: 1px; }
.uc-q:hover, .uc-q:focus { border-color: var(--mzone-teal-500); color: var(--mzone-teal-700); outline: none; }
.uc-tip { position: fixed; z-index: 1000; max-width: 300px; padding: .6rem .75rem; border-radius: .6rem;
  background: var(--mzone-navy-950); color: var(--mzone-text-inverse); box-shadow: var(--mzone-shadow-card);
  font-size: var(--mzone-font-size-sm); line-height: 1.4; white-space: pre-line; pointer-events: none; }
.uc-loading { padding: 2rem 1rem; color: var(--mzone-text-muted); }
.uc-note { margin-top: var(--mzone-space-3); }
.uc-mp { display: inline-flex; margin-right: .35rem; }

@media (max-width: 767px) {
  .uc { --uc-lab: 132px; --uc-col: 190px; }
  .uc-lab { padding-left: .6rem; font-size: var(--mzone-font-size-sm); }
  .uc-row { flex-direction: column; align-items: stretch; gap: .2rem; }
  .uc-out { align-items: flex-start; text-align: left; min-width: 0; }
  /* 16 px в поле: иначе Safari на iPhone приближает страницу (UI-STYLEGUIDE п. 12) */
  .uc .uc-field input, .uc .uc-text, .uc .uc-select, .uc .uc-name { font-size: 16px; }
  .uc-x, .uc-seg button { min-height: 44px; }
  .uc-x { width: 44px; }
}