/* GrainFlow 2, заход 3: «Сделка» пошагово, аватары, строки перевозчиков, общий стиль */

/* ---------- «Сделка» пошагово ---------- */
#loadForm.deal-steps { display: grid; gap: 10px; padding: 10px; background: transparent; border: 0; box-shadow: none; }
.tabbed > #loadForm.deal-steps { border-radius: 0 !important; }
.step { display: grid; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1); }
.step-head { display: flex; align-items: center; gap: 10px; list-style: none; cursor: default; }
.step-head::-webkit-details-marker { display: none; }
.step-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; transition: background .25s ease; }
.step-title { flex: 1; min-width: 0; display: grid; gap: 1px; }
.step-title b { font-size: var(--fs-m); font-weight: 800; letter-spacing: -.01em; }
.step-title small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-done { display: none; color: var(--positive); }
.step-done .icon { width: 20px; height: 20px; }
.step.is-done .step-num { background: var(--positive); }
.step.is-done .step-done { display: inline-flex; }
.step-body { display: grid; gap: 10px; }
.step-body > .field { margin: 0; }
.step-body .inline-list { margin: 0; }
.step-opt > summary { cursor: pointer; }
.step-opt:not([open]) { padding-bottom: 12px; }
.step-opt .step-num { background: color-mix(in srgb, var(--text) 35%, transparent); }
.step-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transform: rotate(90deg); transition: transform .4s var(--spring, ease); }
.step-opt[open] .step-chev { transform: rotate(-90deg); }
#loadForm.deal-steps > .calc-submit { margin-top: 4px; min-height: 54px; border-radius: 16px; font-size: 1.0625rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent); }

/* ---------- Аватары в списках ---------- */
.gf-avatar { --hue: 211; display: grid; place-items: center; background: hsl(var(--hue) 70% 94%); color: hsl(var(--hue) 55% 38%); font-weight: 800; font-size: 15px; letter-spacing: .02em; border: 0; }
html.dark .gf-avatar { background: hsl(var(--hue) 35% 22%); color: hsl(var(--hue) 75% 78%); }

/* ---------- Перевозчики: аватар, одна строка «где · тонн · рейсов», машины плашками ---------- */
.carrier-card.has-avatar { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
.carrier-card .gf-avatar { width: 44px; height: 44px; border-radius: 14px; }
.list-tray > .carrier-card.has-avatar + .carrier-card::before { left: 70px; }
.gf-carrier-sub { display: block; color: var(--muted); font-size: var(--fs-s); }
.gf-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.gf-pill { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--fs-xs); font-weight: 650; }
.gf-pill.is-miss { color: var(--warning); background: var(--warning-soft); }
.carrier-card .cc-rows { display: block; }

/* ---------- Общий стиль ---------- */
/* Цифры везде ровными столбиками и плотнее */
.num, .entity-price strong, .hero-name, .t-big b { font-variant-numeric: tabular-nums; }
.hero-name { letter-spacing: -.02em; }
/* Карточки результатов — мягче и крупнее радиус, как остальные блоки */
.result-card { border-radius: 22px !important; }
/* Плавающие элементы — одна тень */
.gf-compare-pill, .base-add { will-change: transform; }