/* Таблица подбора форсунок марки (см. apps/catalog/rangechart.py и
   static/catalog/range-chart.js). Шапка строк «липнет» при прокрутке —
   таблица бывает высокой, — сама прокрутка своя, горизонтальная, чтобы
   на телефоне не резать полотно страницы вбок. Ничего тёмного — та же
   светлая поверхность, что и у блока с характеристиками рядом (.blk). */
.rc-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md)}
.rc-table{border-collapse:collapse; width:100%; min-width:420px}
.rc-table th, .rc-table td{padding:9px 12px; text-align:center; white-space:nowrap;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
.rc-table th:last-child, .rc-table td:last-child{border-right:0}
.rc-table thead th{position:sticky; top:0; z-index:2; background:var(--panel);
  font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.rc-table thead th:first-child{text-align:left; z-index:3}
.rc-table tbody th{text-align:left; background:var(--page);
  font:600 12px/1.4 var(--mono); color:var(--ink); white-space:nowrap}
.rc-kgh{font:400 11.5px/1.4 var(--mono); color:var(--faint)}
.rc-letter{display:inline-block; margin:1px 3px; font:600 12.5px/1 var(--mono);
  color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.rc-letter:hover, .rc-letter:focus-visible{color:var(--ink); border-color:var(--ink)}
.rc-letter.cur{color:var(--dark-ink); background:var(--dark); border-radius:var(--r-sm);
  padding:1px 6px; border-color:transparent}

/* Карточка-подсказка: та же поверхность, что и всплывающий список
   помощника (spec-helper.css), — плавающая, не браузерный title. */
.rc-card{position:fixed; z-index:60; display:flex; gap:10px; width:216px; padding:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(10,12,14,.16); font:400 12px/1.4 var(--sans); color:var(--ink)}
.rc-shot, .rc-noimg{flex:none; width:52px; height:52px; border-radius:var(--r-sm); overflow:hidden; background:#fff}
.rc-noimg{background:#F4F3F0}
.rc-shot img{width:100%; height:100%; object-fit:contain; display:block}
.rc-body{display:flex; flex-direction:column; gap:4px; min-width:0}
.rc-body b{font:500 12px/1.35 var(--sans); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.rc-stock{font:500 9px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#22A06B}
.rc-price{font:600 12.5px/1 var(--mono); color:var(--ink)}
.rc-act{display:flex; align-items:center; gap:8px; margin-top:2px}
.rc-add{flex:1; min-height:26px; padding:0 8px; border:0; border-radius:var(--r-sm);
  background:var(--dark); color:var(--dark-ink); font:600 9.5px/1 var(--mono);
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.rc-add:hover{opacity:.85}
.rc-add[disabled]{opacity:.6; cursor:default}
.rc-go{font:500 10.5px/1 var(--mono); color:var(--muted); text-decoration:none; white-space:nowrap}
.rc-go:hover{color:var(--ink)}