/* price-radar · система компонентов v2 (docs/design-system-v2.md §3–§5). Только переменные из tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: var(--w-regular) var(--t-md) / var(--lh-text) var(--font-sans);
  color: var(--ink); background: var(--ground);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
svg.ic { flex: none; vertical-align: var(--icon-nudge); }
:focus-visible { outline: var(--bar) solid var(--line-strong); outline-offset: var(--bar); }
[hidden] { display: none !important; }

/* ---------- типографика ---------- */
.serif { font-family: var(--font-serif); font-weight: var(--w-regular); }
.h-day { font: var(--w-regular) var(--t-3xl) / 1.15 var(--font-serif); letter-spacing: var(--track-tight); margin: 0; }
.h-day em { font-style: italic; color: var(--ink-2); }
.h-section { font: var(--w-regular) var(--t-2xl) / 1.2 var(--font-serif); margin: 0; }
.h-card { font-size: var(--t-xl); font-weight: var(--w-medium); line-height: 1.25; margin: 0; }
.sub { font-size: var(--t-sm); color: var(--ink-3); }
.muted { color: var(--ink-3); }
.ink-2 { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price { font-size: var(--t-lg); font-weight: var(--w-medium); line-height: var(--lh-num); }
.unit { font-size: var(--t-xs); color: var(--ink-3); margin-left: var(--bar); font-weight: var(--w-regular); }
.microlabel { font-size: var(--t-2xs); font-weight: var(--w-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.empty { color: var(--ink-3); }
.hole { color: var(--ink-3); border-bottom: var(--hair) dashed var(--line-strong); }
.kbd { display: inline-block; min-width: var(--h-kbd); padding: 0 var(--s-1); border: var(--hair) solid var(--line); border-radius: var(--r-1); font-size: var(--t-2xs); line-height: var(--h-kbd); text-align: center; color: var(--ink-2); background: var(--card); }

/* светофор — единственный цвет данных */
.delta { font-weight: var(--w-medium); white-space: nowrap; }
.delta.red { color: var(--red); }
.delta.amber { color: var(--amber); }
.delta.quiet { color: var(--ink-2); }
.delta.none { color: var(--ink-3); font-weight: var(--w-regular); }
.delta.kpi { font-size: var(--t-kpi); line-height: 1; letter-spacing: var(--track-tighter); }

/* ---------- чипы, бейджи, кнопки ---------- */
.chip { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--h-chip); padding: 0 var(--s-2); border-radius: var(--r-1); background: var(--card-3); color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-medium); white-space: nowrap; vertical-align: middle; }
.chip.score { background: transparent; border: var(--hair) solid var(--line); color: var(--ink-2); }
.chip.score.bad { border-color: var(--red); color: var(--red); }
.badge { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--ink-3); flex: none; }
.badge.machine::before { background: var(--ink-3); }
.badge.human::before { background: var(--accent); }
.badge.removed::before { background: var(--red); }
.badge.moved::before { background: var(--amber); }
.badge.filled { padding: var(--bar) var(--s-2); border-radius: var(--r-1); background: var(--card-3); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--h-btn); padding: 0 var(--s-4); border-radius: var(--r-1); border: var(--hair) solid var(--line-strong); background: var(--card); color: var(--ink); font-size: var(--t-md); font-weight: var(--w-medium); white-space: nowrap; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.btn:hover { background: var(--card-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(.96); }
.btn.quiet { border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--card-2); color: var(--ink); }
.btn.sm { height: var(--h-btn-sm); padding: 0 var(--s-3); font-size: var(--t-sm); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn .kbd { margin-left: var(--s-1); }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: var(--bar-3); }
.link:hover { text-decoration-color: var(--ink); }
.link.ext::after { content: "↗"; font-size: var(--t-ext); margin-left: var(--s-1); color: var(--ink-3); }
.link.quiet { color: var(--ink-3); font-size: var(--t-sm); }

/* ---------- оболочка ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--s-4) 0; gap: var(--s-1); border-right: var(--hair) solid var(--line-soft); background: var(--ground); }
.rail-logo { width: var(--w-logo); height: var(--w-logo); display: grid; place-items: center; margin-bottom: var(--s-3); color: var(--ink); }
.rail-item { position: relative; width: var(--w-rail-item); height: var(--w-rail-item); display: grid; place-items: center; border-radius: var(--r-1); color: var(--ink-3); transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.rail-item:hover { color: var(--ink); background: var(--card-2); }
.rail-item[aria-current] { color: var(--ink); background: var(--card-3); }
.rail-item[aria-current]::before { content: ""; position: absolute; left: calc(-1 * var(--s-3)); top: var(--s-3); bottom: var(--s-3); width: var(--bar); background: var(--select-bar); }
.rail-item .tip { position: absolute; left: var(--s-7); top: 50%; transform: translateY(-50%); padding: var(--bar-3) var(--s-2); border-radius: var(--r-1); background: var(--ink); color: var(--ground); font-size: var(--t-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease); }
.rail-item:hover .tip { opacity: 1; }
.rail-sp { flex: 1; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.top { height: var(--top-h); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-5); border-bottom: var(--hair) solid var(--line-soft); background: var(--ground); position: sticky; top: 0; z-index: 20; }
.find { position: relative; flex: 1; max-width: var(--w-find); }
.find > label { display: flex; align-items: center; gap: var(--s-3); height: var(--h-btn); padding: 0 var(--s-3); border: var(--hair) solid transparent; border-radius: var(--r-1); color: var(--ink-3); transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.find > label:focus-within { border-color: var(--line-strong); background: var(--card); }
.find input { flex: 1; border: 0; background: transparent; outline: 0; color: var(--ink); min-width: 0; }
.find input::placeholder { color: var(--ink-3); }
.top-r { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.top-r .stamp { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.avatar { width: var(--w-avatar); height: var(--w-avatar); border-radius: 50%; display: grid; place-items: center; background: var(--card-3); color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-medium); }
.icon-btn { width: var(--w-icon-btn); height: var(--w-icon-btn); display: grid; place-items: center; border-radius: var(--r-1); color: var(--ink-3); }
.icon-btn:hover { background: var(--card-2); color: var(--ink); }

/* поиск: выпадающий список */
.find-pop { background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-1); overflow: hidden; animation: pop var(--d-fast) var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(calc(-1 * var(--s-1))); } to { opacity: 1; transform: none; } }
.find-pop .grp { padding: var(--s-3) var(--s-3) var(--s-1); }
.find-pop .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); cursor: pointer; position: relative; }
.find-pop .row .t { display: flex; flex-direction: column; min-width: 0; }
.find-pop .row .t b { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-pop .row .t span { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-pop .row .type { font-size: var(--t-xs); color: var(--ink-3); }
.find-pop .row[aria-selected="true"] { background: var(--card-2); }
.find-pop .row[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: var(--bar); background: var(--select-bar); }
.find-pop .foot { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-top: var(--hair) solid var(--line-soft); font-size: var(--t-xs); color: var(--ink-3); }
.find-pop .foot .count { margin-left: auto; }
.find-pop .none { padding: var(--s-4) var(--s-3); color: var(--ink-3); font-size: var(--t-sm); }

/* ---------- страница ---------- */
.page { padding: var(--s-5) var(--s-5) var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.page-head { display: flex; flex-direction: column; gap: var(--s-1); }
.page-head .sub { font-size: var(--t-sm); }
.toolbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.toolbar .sub { margin-left: auto; }

/* сегменты фильтра */
.seg { display: inline-flex; border: var(--hair) solid var(--line); border-radius: var(--r-1); overflow: hidden; }
.seg button { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--h-ctl); padding: 0 var(--s-4); color: var(--ink-2); border-right: var(--hair) solid var(--line); transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--card-2); }
.seg button[aria-pressed="true"] { background: var(--card-3); color: var(--ink); }
.seg button b { font-weight: var(--w-medium); color: var(--ink); }
.seg button[aria-pressed="true"] b { color: var(--ink); }

/* ---------- таблица позиций ---------- */
.list { border: var(--hair) solid var(--line-soft); background: var(--card); border-radius: var(--r-0); }
.thead, .row { display: grid; grid-template-columns: minmax(var(--w-name), 2fr) 1fr 1.4fr .8fr; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); }
.thead { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--ink-3); border-bottom: var(--hair) solid var(--line-soft); }
.thead span:not(:first-child), .row > .c-num { text-align: right; }
.row { position: relative; border-top: var(--hair) solid var(--line-soft); cursor: pointer; transition: background var(--d-fast) var(--ease); }
.row:first-of-type { border-top: 0; }
.row:hover { background: var(--card-2); }
.row[aria-selected="true"] { background: var(--card-2); }
.row[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: var(--bar); background: var(--select-bar); }
.row .c-name { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.row .c-name .name { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .c-num { display: flex; flex-direction: column; align-items: flex-end; gap: var(--bar); }
.row .c-num .who { font-size: var(--t-sm); color: var(--ink-3); }
.row .c-num .reason { font-size: var(--t-sm); color: var(--ink-3); text-align: right; white-space: normal; }
.row .chev { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--ink-3); opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.row:hover .chev, .row[aria-selected="true"] .chev { opacity: 1; }
.list .empty-state { padding: var(--h-crit) var(--s-4); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--ink-3); text-align: center; }
.list .empty-state b { font-weight: var(--w-medium); color: var(--ink); }

/* ---------- панель справа ---------- */
.main[data-panel] { padding-right: var(--panel-w); transition: padding-right var(--d-panel) var(--ease); }
.main[data-panel="wide"] { padding-right: var(--panel-w-wide); }
.main[data-panel="full"] { padding-right: 0; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); background: var(--card); border-left: var(--hair) solid var(--line); display: flex; flex-direction: column; z-index: 25; transform: translateX(0); transition: transform var(--d-panel) var(--ease), width var(--d-panel) var(--ease); }
.panel[data-width="wide"] { width: var(--panel-w-wide); }
.panel[data-width="full"] { width: calc(100% - var(--rail-w)); }
.panel[hidden] { display: none; }
.panel.leaving { transform: translateX(100%); transition-duration: var(--d-close); }
.panel.entering { animation: slide-in var(--d-panel) var(--ease); }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.panel .grip { position: absolute; left: var(--grip-nudge); top: 0; bottom: 0; width: var(--grip-w); cursor: col-resize; }
.panel .grip::after { content: ""; position: absolute; left: var(--bar); top: 50%; height: var(--h-crit); width: var(--bar); margin-top: calc(-1 * var(--h-chip)); border-radius: var(--hair); background: var(--line-strong); opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.panel .grip:hover::after, .panel.resizing .grip::after { opacity: 1; }
.panel.resizing { transition: none; }
.panel.dimmed { transform: translateX(calc(-1 * var(--s-5))); opacity: .6; pointer-events: none; }

.panel-head { padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: var(--hair) solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s-3); }
.panel-head .ident { display: flex; align-items: flex-start; gap: var(--s-3); }
.panel-head .ident .t { display: flex; flex-direction: column; min-width: 0; }
.panel-head .ident .t b { font-weight: var(--w-medium); }
.panel-head .ident .t span { font-size: var(--t-sm); color: var(--ink-3); }
.panel-head .ident .close { margin-left: auto; }
.panel-head .kpi { display: flex; align-items: baseline; gap: var(--s-3); }
.panel-head .kpi .abs { font-size: var(--t-sm); color: var(--ink-3); }
.panel-head .triplet { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); }
.panel-head .triplet dt { color: var(--ink-3); margin: 0; }
.panel-head .triplet dd { margin: 0; text-align: right; }
.panel-head .triplet dd b { font-weight: var(--w-medium); }
.panel-body { flex: 1; overflow: auto; padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.panel-foot { border-top: var(--hair) solid var(--line-soft); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5); display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); background: var(--card); white-space: nowrap; }
.panel-foot .hint { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-2); }
.panel-foot .sp { flex: 1; }
.panel-foot .kbd { margin-right: var(--bar); }

/* вложенный уровень — критерии */
.sheet2 { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); background: var(--card); border-left: var(--hair) solid var(--line); display: flex; flex-direction: column; z-index: 26; animation: slide-in var(--d-panel) var(--ease); }
.sheet2[data-width="wide"] { width: var(--panel-w-wide); }
.sheet2[data-width="full"] { width: calc(100% - var(--rail-w)); }
.sheet2.leaving { transform: translateX(100%); transition: transform var(--d-close) var(--ease); }
.sheet2-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3) var(--s-3); border-bottom: var(--hair) solid var(--line-soft); }
.sheet2-head .title { font-weight: var(--w-medium); flex: 1; }
.progress { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-bottom: var(--hair) solid var(--line-soft); }
.progress .bar { height: var(--bar-3); background: var(--card-3); position: relative; }
.progress .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width var(--d-num) var(--ease-out); }
.progress .legend { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--ink-2); }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.matrix th { text-align: left; font-weight: var(--w-medium); font-size: var(--t-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); padding: var(--s-3) var(--s-2) var(--s-2) 0; border-bottom: var(--hair) solid var(--line); }
.matrix td { padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: var(--hair) solid var(--line-soft); vertical-align: top; }
.matrix td:first-child { color: var(--ink); font-weight: var(--w-medium); width: 34%; }
.matrix td.you { color: var(--ink-2); }
.matrix td.vd { white-space: nowrap; text-align: right; color: var(--ink-2); }
.matrix td.vd.ok::before { content: "✓ "; }
.matrix td.vd.bad { color: var(--red); }
.matrix td.vd.bad::before { content: "✗ "; }
.matrix td.vd.assumed { color: var(--amber); }
.matrix td.vd.assumed::before { content: "≈ "; }
.matrix td.vd.na { color: var(--ink-3); }

/* ---------- предложения (аккордеон) ---------- */
.offers { display: flex; flex-direction: column; }
.offer { border-top: var(--hair) solid var(--line-soft); }
.offer:first-child { border-top: 0; }
.offer > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; padding: var(--s-3) var(--s-3); margin: 0 calc(-1 * var(--s-3)); cursor: pointer; border-radius: var(--r-1); transition: background var(--d-fast) var(--ease); }
.offer > summary::-webkit-details-marker { display: none; }
.offer > summary:hover { background: var(--card-2); }
.offer.best > summary { background: var(--card-2); }
.offer.best > summary .microlabel { display: block; margin-bottom: var(--s-1); }
.offer .t { display: flex; flex-direction: column; gap: var(--bar); min-width: 0; }
.offer .l1 { font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer .l2 { font-size: var(--t-sm); color: var(--ink-2); }
.offer .l3 { font-size: var(--t-sm); color: var(--ink-3); }
.offer .r { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.offer .r .chev { color: var(--ink-3); transition: transform var(--d-base) var(--ease); }
.offer[open] .r .chev { transform: rotate(180deg); }
.offer-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-1) 0 var(--s-4); }
.zone-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-5); align-items: center; background: var(--card-3); padding: var(--s-4) var(--s-4); border-radius: var(--r-1); }
.zone-summary .big { display: flex; flex-direction: column; gap: var(--bar); }
.zone-summary .big .abs { font-size: var(--t-2xl); font-weight: var(--w-medium); line-height: 1; }
.zone-summary .big span { font-size: var(--t-xs); color: var(--ink-3); }
.zone-summary .pairs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.zone-summary .pairs div { display: flex; flex-direction: column; font-size: var(--t-sm); }
.zone-summary .pairs div span { font-size: var(--t-xs); color: var(--ink-3); }
.zone-fields { display: flex; flex-direction: column; gap: var(--s-2); }
.dl { display: grid; grid-template-columns: var(--w-key) minmax(0, 1fr); gap: var(--s-2) var(--s-4); font-size: var(--t-sm); margin: 0; }
.dl dt { color: var(--ink-3); margin: 0; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-direction: column; gap: var(--s-2); }
.actions .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.actions .crit { display: flex; align-items: center; gap: var(--s-3); height: var(--h-crit); padding: 0 var(--s-3); border: var(--hair) solid var(--line); border-radius: var(--r-1); cursor: pointer; transition: background var(--d-fast) var(--ease); }
.actions .crit:hover { background: var(--card-2); }
.actions .crit .chip { margin-left: auto; }
.actions .crit .chev { color: var(--ink-3); }
.actions .foot { display: flex; justify-content: flex-end; padding-top: var(--s-1); }
.offers .more { align-self: flex-start; margin-top: var(--s-2); }
.removed-note { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3); border: var(--hair) dashed var(--line-strong); border-radius: var(--r-1); font-size: var(--t-sm); color: var(--ink-2); }
.removed-note .btn { margin-left: auto; }

/* ---------- график ---------- */
.chart { position: relative; margin-top: var(--s-1); }
.chart .head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-1); }
.chart .head .microlabel { flex: 1; }
.chart .legend { display: flex; gap: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); }
.chart .legend i { display: inline-block; width: var(--s-3); height: 0; border-top: var(--bar) solid var(--ink); vertical-align: middle; margin-right: var(--s-2); }
.chart .legend i.dash { border-top-style: dashed; border-color: var(--ink-3); }
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { fill: var(--ink-3); font-size: var(--t-3xs); font-family: var(--font-sans); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .ref { stroke: var(--ink-3); stroke-dasharray: 4 4; stroke-width: 1.2; }
.chart .ser { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.chart .pt { fill: var(--ink); }
.chart .tip { position: absolute; pointer-events: none; font-size: var(--t-xs); color: var(--ink-2); background: var(--card); padding: var(--bar) 0; opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.chart:hover .tip { opacity: 1; }
.chart .note { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-1); }

/* ---------- диалог репорта ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: grid; place-items: center; animation: pop var(--d-fast) var(--ease); }
.dialog { width: var(--w-dialog); max-width: calc(100% - var(--s-6)); background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-1); padding: var(--s-5) var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.dialog h3 { margin: 0; font-size: var(--t-lg); font-weight: var(--w-medium); }
.dialog .reasons { display: flex; flex-direction: column; }
.dialog .reason { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-top: var(--hair) solid var(--line-soft); cursor: pointer; }
.dialog .reason:first-child { border-top: 0; }
.dialog .reason b { font-weight: var(--w-medium); display: block; }
.dialog .reason span { font-size: var(--t-sm); color: var(--ink-3); }
.dialog .reason input { accent-color: var(--accent); width: var(--s-4); height: var(--s-4); margin: 0; }
.dialog textarea { font: inherit; color: var(--ink); background: var(--card-2); border: var(--hair) solid var(--line); border-radius: var(--r-1); padding: var(--s-2) var(--s-3); resize: vertical; min-height: var(--top-h); }
.dialog .btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

/* ---------- тост, полоса массовых действий ---------- */
.toast { position: fixed; left: calc(var(--rail-w) + var(--s-5)); bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--ground); border-radius: var(--r-1); font-size: var(--t-sm); z-index: 60; animation: toast-in var(--d-close) var(--ease); }
.toast .btn { height: var(--h-btn-xs); padding: 0 var(--s-2); background: transparent; color: inherit; border-color: transparent; text-decoration: underline; text-underline-offset: var(--bar-3); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }
.bulkbar { position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-1); z-index: 35; animation: toast-in var(--d-close) var(--ease); }
.bulkbar .cnt { font-weight: var(--w-medium); margin-right: var(--s-2); }
.bulkbar .hint { position: absolute; bottom: calc(100% + var(--s-2)); left: var(--s-3); padding: var(--s-1) var(--s-2); background: var(--ink); color: var(--ground); font-size: var(--t-xs); border-radius: var(--r-1); white-space: nowrap; }

/* ---------- каталог ---------- */
.cat { display: grid; grid-template-columns: var(--w-groups) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.groups { display: flex; flex-direction: column; gap: var(--bar); position: sticky; top: calc(var(--top-h) + var(--s-5)); }
.groups a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); color: var(--ink-2); }
.groups a.planned { flex-direction: column; gap: 0; }
.groups a.planned b { font-size: var(--t-xs); }
.groups a:hover { background: var(--card-2); }
.groups a[aria-current] { background: var(--card-3); color: var(--ink); }
.groups a b { font-weight: var(--w-regular); color: var(--ink-3); }
.groups .microlabel { padding: var(--s-2) var(--s-3) var(--s-2); }
.units .thead, .units .row { grid-template-columns: minmax(var(--w-name-sm), 2fr) .8fr 1fr 1.2fr 1fr 1.2fr; }
.units .row .c-num { align-items: flex-end; }
.fields { display: flex; flex-direction: column; }
.field { display: grid; grid-template-columns: var(--w-key) minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-top: var(--hair) solid var(--line-soft); font-size: var(--t-sm); align-items: start; }
.field:first-child { border-top: 0; }
.field .k { color: var(--ink-3); display: flex; align-items: center; gap: var(--s-2); }
.field .k .ok { color: var(--ink-2); font-size: var(--t-xs); }
.field .v { display: flex; flex-direction: column; gap: var(--bar); }
.field .v .n { font-size: var(--t-xs); color: var(--ink-3); }
.field .v.suggest { color: var(--ink-3); font-style: italic; }
.field .v.suggest label { display: flex; align-items: center; gap: var(--s-2); font-style: normal; color: var(--ink-2); }
.field .v input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.field .v input[type="text"] { height: var(--h-btn-sm); padding: 0 var(--s-2); border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--card); width: 100%; }
.suppliers { display: flex; flex-direction: column; }
.sup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--hair) solid var(--line-soft); align-items: start; }
.sup-row:first-child { border-top: 0; }
.sup-row .t { display: flex; flex-direction: column; gap: var(--bar); min-width: 0; }
.sup-row .t .who { font-size: var(--t-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--s-2); }
.sup-row .t .who .badge { font-size: var(--t-xs); }
.sup-row .t .lnk { font-size: var(--t-sm); overflow-wrap: anywhere; }
.sup-row .r { display: flex; flex-direction: column; align-items: flex-end; gap: var(--bar); }
.sup-row .r .when { font-size: var(--t-xs); color: var(--ink-3); }
.changelog { border-top: var(--hair) solid var(--line-soft); padding-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.changelog summary { cursor: pointer; list-style: none; }
.changelog summary::-webkit-details-marker { display: none; }
.changelog ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); color: var(--ink-3); }

/* ---------- линковка ---------- */
.link3 { display: grid; grid-template-columns: var(--w-queue) minmax(0, 1fr) var(--w-unitpanel); gap: var(--s-5); align-items: start; }
.queue { position: sticky; top: calc(var(--top-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-2); max-height: calc(100vh - var(--top-h) - var(--s-7)); }
.queue .tabs { display: flex; flex-direction: column; gap: var(--bar); }
.queue .tabs a { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); color: var(--ink-2); cursor: pointer; }
.queue .tabs a:hover { background: var(--card-2); }
.queue .tabs a[aria-current] { background: var(--card-3); color: var(--ink); }
.queue .tabs a b { font-weight: var(--w-regular); color: var(--ink-3); }
.queue .items { border: var(--hair) solid var(--line-soft); background: var(--card); overflow: auto; flex: 1; }
.qitem { position: relative; display: grid; grid-template-columns: var(--s-5) minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-3); border-top: var(--hair) solid var(--line-soft); cursor: pointer; transition: background var(--d-fast) var(--ease); }
.qitem:first-child { border-top: 0; }
.qitem:hover { background: var(--card-2); }
.qitem[aria-selected="true"] { background: var(--card-2); }
.qitem[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: var(--bar); background: var(--select-bar); }
.qitem input { accent-color: var(--accent); margin: var(--bar-3) 0 0; }
.qitem .t { display: flex; flex-direction: column; min-width: 0; }
.qitem .t b { font-weight: var(--w-medium); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qitem .t span { font-size: var(--t-xs); color: var(--ink-3); }
.qitem .p { font-size: var(--t-sm); white-space: nowrap; }
.qitem.done .t b { text-decoration: line-through; color: var(--ink-3); }
.queue .more { padding: var(--s-3) var(--s-3); font-size: var(--t-xs); color: var(--ink-3); border-top: var(--hair) solid var(--line-soft); }
.card { border: var(--hair) solid var(--line-soft); background: var(--card); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.card-head { display: flex; align-items: center; gap: var(--s-3); }
.card-head .pos { font-size: var(--t-sm); color: var(--ink-3); display: flex; align-items: center; gap: var(--s-2); }
.card-head .sp { flex: 1; }
.card-title { display: flex; flex-direction: column; gap: var(--bar); }
.card-title .l1 { font-size: var(--t-lg); font-weight: var(--w-medium); overflow-wrap: anywhere; }
.card-title .l2 { font-size: var(--t-sm); color: var(--ink-3); }
.decide { display: flex; flex-direction: column; gap: var(--s-2); }
.decide .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.unitpanel { position: sticky; top: calc(var(--top-h) + var(--s-5)); }
.unitpanel .star { color: var(--ink-3); font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s-2); }
.unitpanel .star .link { margin-left: auto; }
.quality { display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-sm); color: var(--ink-2); }
.quality .bar { width: var(--w-bar); height: var(--bar-3); background: var(--card-3); position: relative; }
.quality .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.empty-queue { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-4); color: var(--ink-3); text-align: center; }
.empty-queue b { color: var(--ink); font-weight: var(--w-medium); }

/* ---------- сетка проверяется на одной вертикали ---------- */
.page > * { margin-left: 0; }
@media (max-width: 1100px) {
  .main[data-panel] { padding-right: 0; }
  .panel, .sheet2 { width: 100% !important; }
  .link3 { grid-template-columns: 1fr; }
  .cat { grid-template-columns: 1fr; }
}

/* утилиты вместо inline-стилей */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.inline { display: inline-block; }
.toast { max-width: var(--w-toast); }
.toast > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.lifted { bottom: calc(var(--s-5) + var(--h-btn) + var(--s-4)); }

/* ---------- телефон: ширина до --bp-phone (tokens.css). Десктопные правила выше не трогаются ---------- */
.rowk { display: none; }

@media (max-width: 640px) {
  /* оболочка: рельса уезжает вниз горизонтальной панелью, сетка в одну колонку */
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 22;
    height: auto; min-height: var(--top-h); flex-direction: row; justify-content: space-around; align-items: center;
    gap: 0; padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
    border-right: 0; border-top: var(--hair) solid var(--line);
  }
  .rail-logo, .rail-sp, .rail-item .tip { display: none; }
  .rail-item { width: var(--h-crit); height: var(--h-crit); }
  .rail-item[aria-current]::before { left: var(--s-3); right: var(--s-3); top: 0; bottom: auto; width: auto; height: var(--bar); }

  /* верхняя строка: поиск во всю ширину, штамп обхода уезжает (он есть в шапке страницы) */
  .top { padding: 0 var(--s-3); gap: var(--s-2); }
  .find { max-width: none; }
  .top-r .stamp { display: none; }
  .find-pop .foot { display: none; }

  /* страница */
  .page { padding: var(--s-4) var(--s-4) calc(var(--top-h) + var(--s-6)); gap: var(--s-4); }
  .h-day { font-size: var(--t-2xl); }
  .toolbar { gap: var(--s-3); }
  .toolbar .sub { margin-left: 0; flex: 1 0 100%; }
  .seg { width: 100%; overflow-x: auto; }
  .seg button { flex: none; height: var(--h-crit); padding: 0 var(--s-3); white-space: nowrap; }

  /* строки списка: шапка таблицы не нужна, строка становится карточкой в две линии */
  .list .thead { display: none; }
  .list .row { padding: var(--s-3) var(--s-4); gap: var(--s-1) var(--s-3); }
  .list .row .chev { display: none; }
  .list .row .c-name { flex-wrap: wrap; gap: var(--s-2); }
  .list:not(.units) .row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name delta" "ours best";
    align-items: start;
  }
  .list:not(.units) .row > .c-name { grid-area: name; }
  .list:not(.units) .row > .c-num:nth-child(2) { grid-area: ours; align-items: flex-start; text-align: left; }
  .list:not(.units) .row > .c-num:nth-child(3) { grid-area: best; }
  .list:not(.units) .row > .c-num:nth-child(4) { grid-area: delta; }
  .list .row .rowk { display: block; font-size: var(--t-2xs); font-weight: var(--w-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
  .list .row .reason { text-align: right; }

  /* каталог: юниты в одну колонку, зоны кухни — лентой */
  .cat { gap: var(--s-3); }
  .groups { position: static; flex-direction: row; overflow-x: auto; gap: var(--s-2); padding-bottom: var(--s-1); }
  .groups .microlabel { display: none; }
  .groups a { flex: none; white-space: nowrap; border: var(--hair) solid var(--line-soft); }
  .groups a.planned { flex-direction: row; gap: var(--s-2); align-items: baseline; }
  .groups a.planned b { font-size: var(--t-xs); }
  .units .row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "name name name name" "unit price sup status";
    align-items: baseline; gap: var(--s-1) var(--s-3);
  }
  .units .row > .c-name { grid-area: name; }
  .units .row > .c-num { flex-direction: row; align-items: baseline; gap: var(--s-2); text-align: left; }
  .units .row > .c-num:nth-child(2) { grid-area: unit; }
  .units .row > .c-num:nth-child(3) { grid-area: price; }
  .units .row > .c-num:nth-child(4) { grid-area: sup; }
  .units .row > .c-num:nth-child(5) { display: none; }
  .units .row .c-num .who { display: none; }
  .units .row > .c-num { min-width: 0; white-space: nowrap; }
  .units .row > .c-num:nth-child(6) { grid-area: status; justify-content: flex-end; }

  /* линковка: три панели друг под другом, ничего не липнет */
  .link3 { gap: var(--s-4); }
  .queue, .unitpanel { position: static; max-height: none; }
  .queue .tabs { flex-direction: row; overflow-x: auto; gap: var(--s-2); }
  .queue .tabs a { flex: none; white-space: nowrap; border: var(--hair) solid var(--line-soft); }
  .queue .items { max-height: 50vh; }
  .quality { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  .quality .bar { width: var(--w-bar-sm); }

  /* панель: во весь экран, без ручки ширины и клавиатурных подсказок */
  .panel, .sheet2 { z-index: 45; padding-bottom: env(safe-area-inset-bottom); }
  .panel .grip { display: none; }
  .panel-foot { display: none; }
  .panel-head { padding: var(--s-4) var(--s-4) var(--s-3); }
  .panel-body { padding: var(--s-3) var(--s-4) var(--s-5); }
  .panel-head .kpi { flex-wrap: wrap; gap: var(--s-2); }
  .delta.kpi { font-size: var(--t-3xl); }
  .zone-summary { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .dl { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); }
  .field { grid-template-columns: minmax(0, 1fr); gap: var(--bar) 0; }
  .dl dd, .field .v { text-align: left; }
  .matrix { font-size: var(--t-xs); }
  .matrix td:first-child { width: 40%; }
  .progress { padding: var(--s-3) var(--s-4); }

  /* всплывающее над нижней панелью */
  .toast { left: var(--s-4); right: var(--s-4); bottom: calc(var(--top-h) + var(--s-3)); max-width: none; }
  .toast.lifted { bottom: calc(var(--top-h) + var(--h-btn) + var(--s-4)); }
  .bulkbar { left: var(--s-4); right: var(--s-4); transform: none; bottom: calc(var(--top-h) + var(--s-3)); flex-wrap: wrap; justify-content: center; }
  .dialog { max-width: calc(100% - var(--s-4)); }
}