/* «Здоровье связок B2B» run screen (dashboard/views-b2b-health*.mjs), ported from docs/mockups/b2b-health/mockup.css
   minus the mockup-only banner and sample marks. Prefix hx-. Tokens of app.css / b2b-links.css only.
   The one bold place is the phase track of a step (.hx-phases); the accent (green) is the primary button and the passed path. */

.content:has(> .hx-page) { max-width: 1440px; }
.hx-page { display: block; }
.hx-cta { display: grid; justify-items: end; gap: 6px; }
.hx-cta .muted { font-size: 13px; }
.hx-count { cursor: default; }
.hx-count b { font-size: 26px; }
/* REQ-H21: CRM products touched, grey next to the card count (tile, step toolbar, run total table) */
.hx-prod { color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-count .hx-prod, td > .hx-prod { display: block; }
.hx-count .hx-cards { display: block; color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.hx-toolbar .hx-prod { margin-left: 6px; }
.j-counts { color: var(--ink-2); }
/* «Нечего делать»: the long confirm button wraps instead of pushing the page sideways at 390 (REQ-H23) */
.hx-empty > div { min-width: 0; }
.hx-empty .btn { white-space: normal; text-align: left; line-height: 1.25; padding-block: 8px; }
.st-a.is-locked { color: var(--muted); background: var(--tint); border-style: dashed; }
.st-a.is-locked .st-n { color: var(--muted); border-style: dashed; }

/* ---- the bold place: phases of the step ---------------------------------------------------------------------------- */
.hx-track { margin: 0 0 20px; padding: 18px 8px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.hx-track-now { display: none; }
.hx-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.hx-ph { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 10px; text-align: center; }
.hx-ph:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: #d6dfdb; }
.hx-ph.is-done:not(:last-child)::after { background: var(--green-btn); }
.hx-ph-n { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); background: var(--paper); border: 2px solid #c9d4cf; border-radius: 50%; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-ph-n svg.lucide { width: 20px; height: 20px; }
.hx-ph.is-done .hx-ph-n { color: var(--green); background: var(--green-soft); border-color: var(--green-btn); }
.hx-ph.is-now .hx-ph-n { color: #fff; background: var(--green-btn); border-color: var(--green-btn); box-shadow: 0 0 0 5px var(--green-soft); }
.hx-ph-t { margin-top: 6px; font-size: 15px; line-height: 1.3; font-weight: 650; }
.hx-ph:not(.is-done):not(.is-now) .hx-ph-t { color: var(--ink-2); font-weight: 600; }
.hx-ph-s { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hx-ph.is-now .hx-ph-s { color: var(--ink-2); }
.hx-ph .mini-rail i { width: auto; min-width: 24px; padding: 0 5px; border-radius: 11px; font-size: 11px; }

/* ---- rows: supplier card LEFT, CRM RIGHT ----------------------------------------------------------------------------- */
.hx-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; font-size: 14px; }
.hx-toolbar .muted { font-size: 13px; }
.hx-toolbar .bl-fchip { min-height: 32px; }
.hx-rows-h { font-size: 16px; line-height: 1.35; font-weight: 600; }
.hx-rows-h b { font-weight: 700; }
.hx-toolbar .bl-fchip .muted { margin-left: 2px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.hx-list-head, .hx-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.15fr) 196px; gap: 0 18px; }
.hx-list-head { padding: 0 12px 8px; color: var(--ink-2); font-size: 12.5px; font-weight: 650; border-bottom: 1px solid var(--line); }
.hx-list-head span { display: inline-flex; align-items: center; gap: 6px; }
.hx-list-head svg.lucide { width: 15px; height: 15px; color: var(--muted); }
.hx-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
/* Pager of the step list: rows come from the server page by page (views-b2b-health-rows.mjs::pager). */
.hx-pager { justify-content: flex-start; }
.hx-pager .bl-pages { margin-left: auto; }
.hx-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hx-pages .btn { min-width: 36px; padding: 0 8px; }
.hx-pages .btn[aria-current="page"] { color: var(--ink); border-color: var(--ink-2); background: #e9efec; }
.hx-pager span.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.hx-gap { padding: 0 2px; color: var(--muted); }
/* Rows off screen skip style and layout: a step opened down to 2000 rows stays responsive to a click. */
.hx-row { content-visibility: auto; contain-intrinsic-block-size: auto 260px; align-items: start; padding: 16px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.hx-row[class*=" is-"] { border-color: #bfcac5; }
.hx-col { min-width: 0; display: grid; gap: 6px; align-content: start; }
.hx-lbl { display: none; color: var(--muted); font-size: 12px; font-weight: 650; }
.hx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; }
.hx-top .bl-chip svg.lucide, .hx-cand-top svg.lucide { width: 13px; height: 13px; margin-right: 4px; }
.hx-name { font-size: 15px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; text-wrap: pretty; }
.hx-crm .bl-sku { margin-top: -4px; }
.hx-sup .bl-facts, .hx-crm .bl-facts { max-width: 420px; }
.hx-risk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-2); }

/* the arrow says what happens to the link */
.hx-arrow { position: relative; display: grid; justify-items: center; gap: 4px; padding-top: 30px; color: var(--muted); text-align: center; }
.hx-arrow::before { content: ""; position: absolute; top: 47px; left: 0; right: 0; height: 2px; background: currentColor; opacity: .35; }
.hx-arrow span { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; background: var(--paper); border: 1.5px solid currentColor; border-radius: 50%; }
.hx-arrow svg.lucide { width: 17px; height: 17px; }
.hx-arrow small { font-size: 11.5px; font-weight: 650; line-height: 1.25; }
.hx-arrow-amber { color: var(--amber); }
.hx-arrow-red { color: var(--red); }
.hx-arrow-green { color: var(--green); }
.hx-arrow-ink { color: var(--graphite); }
.hx-arrow-red::before { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); opacity: .6; }
.hx-arrow-muted::before { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); }

/* replacement card / similar product / new product preview on the CRM side */
.hx-swap, .hx-new { display: grid; gap: 4px; margin-top: 6px; padding: 10px 12px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.hx-swap.is-chosen, .hx-new.is-chosen { background: var(--paper); border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.hx-swap-t { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.hx-swap-t svg.lucide { width: 14px; height: 14px; color: var(--muted); }
.hx-swap-n { font-size: 14px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.hx-cat { margin-top: 4px; }
.hx-cat select { width: 100%; max-width: 320px; min-height: 38px; }
.hx-hint { font-size: 12.5px; color: var(--muted); }

/* step 2 candidates: one is picked */
.hx-cands { display: grid; gap: 8px; }
/* the box picks on a click anywhere but its copy buttons (REQ-H29); the keyboard picks with «Выбрать» */
.hx-cand { display: grid; gap: 4px; padding: 10px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.hx-cand:not(.is-locked):hover { border-color: #bfcac5; }
.hx-cand.is-chosen { background: var(--tint); border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.hx-cand.is-locked { cursor: default; }
.hx-cand-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.hx-cand-n { font-size: 14px; }
.hx-cand-why { color: var(--ink-2); font-size: 13px; }
.hx-cand-pick { justify-self: start; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; margin: -2px -8px -6px; padding: 0 8px; color: var(--ink-2); background: none; border: 0; border-radius: var(--radius); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.hx-cand-pick:disabled { cursor: default; }
.hx-cand-pick svg.lucide { width: 15px; height: 15px; }
.hx-cand.is-chosen .hx-cand-pick { color: var(--ink); }

/* the decision: one column of segment buttons */
.hx-dec { min-width: 0; }
.hx-seg { grid-template-columns: 1fr; width: 100%; margin-top: 0; }
.hx-seg .bl-segbtn { justify-content: flex-start; padding: 0 12px; }
.hx-seg > .bl-segbtn:nth-child(odd):last-child { grid-column: auto; }

/* ---- send bar, waits, results -------------------------------------------------------------------------------------- */
.hx-page .bl-send-note { display: flex; }
.hx-wait { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding: 16px 18px; background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: var(--radius); }
.hx-wait > div { flex: 1; display: grid; gap: 6px; }
.hx-wait strong { font-size: 15px; }
.hx-wait p { color: var(--ink-2); font-size: 13.5px; }
.hx-wait .spin { margin-top: 2px; }
.hx-row:has(.bl-segbtn:disabled[aria-pressed]) { opacity: 1; }
.hx-wait ~ .hx-list .hx-row { background: var(--tint); }
.hx-result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.hx-result p { flex: 1 1 360px; min-width: 0; font-size: 14px; }
.hx-result.is-ok { background: var(--green-soft); border-color: var(--green-line); }
.hx-result.is-bad { background: var(--red-soft); border-color: var(--red-line); }
.hx-result-act { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-tbl-wrap { overflow-x: auto; }
.hx-check tbody th, .hx-steps-t tbody th { font-weight: 400; }
.hx-check .bl-sku, .hx-check .hx-tname { display: block; }
.hx-check tr.is-bad td, .hx-check tr.is-bad th { background: var(--red-soft); }
.hx-runs td, .hx-runs th, .hx-steps-t td { vertical-align: middle; }
.hx-runs td:nth-child(n+4):not(:last-child), .hx-steps-t td { text-align: right; }
/* the cards of the next run: one column on phones, up to three on wide screens */
.hx-def { columns: 300px 3; column-gap: 40px; padding-left: 18px; list-style: disc; font-size: 14px; }
.hx-def li { break-inside: avoid; padding-bottom: 4px; }
.hx-done { display: flex; }
.jrow.is-key { background: var(--green-soft); }
.j-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.j-chips .bl-chip { background: var(--paper); }
/* REQ-H31: the send dialog's kinds — a disclosure each, rows card → CRM; a long list scrolls inside, the footer stays */
.hx-kinds { margin: 10px 0; }
.hx-kind .more-body { padding: 0 12px 12px; }
.hx-plan { max-height: min(300px, 40dvh); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.hx-plan:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.hx-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 2px; border-bottom: 1px solid var(--line-2); font-size: 14px; line-height: 1.4; }
.hx-plan-row:last-child { border-bottom: 0; }
.hx-plan-side { min-width: 0; display: grid; gap: 2px; justify-items: start; overflow-wrap: anywhere; }
.hx-plan-lbl { color: var(--muted); font-size: 12px; }
.hx-plan-name { color: var(--ink); font-weight: 600; }
.hx-plan-item { display: grid; gap: 1px; }
.hx-plan-item + .hx-plan-item { margin-top: 4px; }
.hx-plan-meta, .hx-plan-swap { color: var(--ink-2); font-size: 13px; }
.hx-plan-meta .mark { margin-left: 4px; vertical-align: middle; }
.hx-plan-swap { margin-top: 2px; font-weight: 600; }
.hx-plan-arrow { padding-top: 18px; color: var(--muted); }
.hx-plan-arrow svg.lucide, .hx-plan-arrow .ic { width: 18px; height: 18px; }
.hx-plan-note { margin: 8px 0 0; font-size: 14px; }
@media (max-width: 600px) {
  .hx-kind summary { min-height: 44px; }
  .hx-plan-row { grid-template-columns: minmax(0, 1fr); }
  .hx-plan-arrow { padding: 0; }
}
.dlg-body .hx-risk { margin-top: 10px; }
/* the send dialog's side-effect checkbox: a 24 px box beside its words at every width (not the segmented .choice) */
.field .hx-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.field .hx-ack input[type="checkbox"] { flex: none; width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--graphite); }

/* ---- narrow: the row stacks supplier → CRM → decision ------------------------------------------------------------------ */
@media (max-width: 1099px) {
  .hx-list-head { display: none; }
  .hx-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hx-lbl { display: block; }
  .hx-arrow { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 8px; padding: 0; }
  .hx-arrow::before { display: none; }
  .hx-arrow span { width: 30px; height: 30px; }
  .hx-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the phase track in one line: five small markers + the phase in effect in words (design panel 2026-10-12, item 1) */
  .hx-track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 14px; }
  .hx-phases { display: flex; gap: 14px; }
  .hx-ph { display: block; padding: 0; }
  .hx-ph:not(:last-child)::after { top: 13px; left: 30px; right: auto; width: 10px; }
  .hx-ph-n { width: 28px; height: 28px; font-size: 13px; border-width: 1.5px; }
  .hx-ph-n svg.lucide { width: 15px; height: 15px; }
  .hx-ph.is-now .hx-ph-n { box-shadow: 0 0 0 3px var(--green-soft); }
  .hx-ph > .hx-ph-t, .hx-ph > .hx-ph-s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hx-track-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1 1 240px; min-width: 0; font-size: 15px; line-height: 1.35; }
  .hx-track-n { color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .hx-track-now b { font-weight: 650; }
  .hx-track-now .hx-ph-s { color: var(--ink-2); justify-content: flex-start; }
  .hx-cta { justify-items: start; }
  /* step tabs in one line: the state words stay for screen readers, the marker icons carry them */
  .hx-page .step-tabs .st-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hx-page .st-skipnote { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 6px; color: var(--ink-2); background: #eef1f0; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
  .hx-page .st-skipnote svg.lucide { width: 12px; height: 12px; }
  /* the run total by steps: name and state on top, the six numbers in one row with their labels (no side scroll at 768) */
  .hx-steps-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hx-steps-t, .hx-steps-t tbody, .hx-steps-t th, .hx-steps-t td { display: block; }
  .hx-steps-t tbody tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 6px 12px; padding: 12px 14px; }
  .hx-steps-t tbody tr + tr { border-top: 1px solid var(--line); }
  .hx-steps-t tbody th { grid-column: 1 / 5; align-self: center; font-weight: 650; }
  .hx-steps-t .hx-state { grid-column: 5 / -1; justify-self: end; }
  .hx-steps-t th, .hx-steps-t td, .hx-steps-t td:nth-child(n) { padding: 0; border-top: 0; text-align: left; }
  .hx-steps-t td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
}
@media (max-width: 600px) {
  .hx-seg { grid-template-columns: 1fr; }
  .bl-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) and (max-width: 1499px) { .bl-counts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hx-page .step-tabs .st-count { display: block; margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
/* phones: the breadcrumb right above already names the run, the count stays one line «Шаг 3 из 3» beside the four tabs */
@media (max-width: 600px) {
  .hx-page .step-tabs .st-run { display: none; }
  .hx-page .step-tabs .st-count::first-letter { text-transform: uppercase; }
}

/* ---- «Пропустить шаг» (REQ-H24): neutral, never red; quieter than the step's main action --------------------------- */
.hx-head-act, .page-head > div.hx-head-act { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-head-act .btn[aria-disabled="true"] { opacity: .55; cursor: progress; } /* «Пропустить шаг» waits for the saves */
.st-skip { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 2px; padding: 0 6px; color: var(--ink-2); background: #eef1f0; border: 1px solid var(--line); border-radius: 4px; font-weight: 650; }
.st-skip svg.lucide { width: 12px; height: 12px; }
.st-a.is-skipped .st-n { color: var(--ink-2); background: #eef1f0; border-color: var(--ink-2); }
.st-a.is-skipped.is-here .st-n { color: #fff; background: var(--graphite); border-color: var(--graphite); }
.st-skipnote { display: none; }
.hx-ph.is-skip .hx-ph-n { color: var(--ink); background: #eef1f0; border-color: var(--ink-2); }
.hx-result.is-skip { background: var(--tint); border-color: var(--field); }
.hx-snap { display: flex; align-items: flex-start; gap: 8px; margin: -12px 0 14px; color: var(--ink-2); font-size: 13.5px; }
.hx-snap svg.lucide { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--muted); }
.hx-snap + .hx-hidden { margin-top: -6px; }
/* Several managers in one run: who else is here (step head), who decided a row, who decided rows of the send. */
.hx-present, .hx-by, .hx-others { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.hx-present { margin: 6px 0 0; }
.hx-by { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.hx-others { margin: 10px 0 0; }
.hx-present svg.lucide, .hx-by svg.lucide, .hx-others svg.lucide { flex: none; width: 14px; height: 14px; color: var(--muted); }
.hx-wait.is-paused { background: var(--tint); border-color: var(--field); }
.hx-wait.is-paused > svg.lucide { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.hx-wait-act { margin-top: 4px; }
.hx-skip-list { display: grid; gap: 8px; margin: 12px 0; }
.hx-skip-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); }
.hx-skip-list li > svg.lucide { width: 17px; height: 17px; margin-top: 2px; color: var(--ink-2); }
.hx-skip-list li > span { display: grid; gap: 2px; min-width: 0; }
.hx-skip-list b { font-weight: 650; }
.hx-skip-list .muted { font-size: 13px; }
.hx-skipped { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px 16px; background: var(--tint); border: 1px solid var(--field); border-radius: var(--radius); }
.hx-skipped h2 { font-size: 16px; line-height: 1.3; }
.hx-skipped.is-all h2 { font-size: 20px; }
.hx-skipped ul { display: grid; gap: 8px; }
.hx-skipped li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; font-size: 14px; }
.hx-skip-n { display: block; color: var(--ink-2); font-size: 13.5px; }

/* ---- A-8: dimensions of a product to create (CRM needs all four > 0) --------------------------------------------------- */
.hx-new { container-type: inline-size; }
.hx-dims { min-width: 0; margin: 8px 0 2px; padding: 0; border: 0; }
.hx-dims legend { margin-bottom: 6px; padding: 0; color: var(--ink); font-size: 13px; font-weight: 650; }
.hx-dims-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.hx-dim { gap: 4px; }
.field.hx-dim label { color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.field.hx-dim input:not([type="radio"]) { min-height: 36px; padding: 0 8px; font-size: 14px; font-variant-numeric: tabular-nums; }

.hx-dims-from { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; overflow-wrap: anywhere; }
.hx-dims-from svg.lucide { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.hx-dims .field-error { margin-top: 6px; }
@container (max-width: 340px) { .hx-dims-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hx-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.hx-pick input { width: 24px; height: 24px; margin: 0; accent-color: var(--graphite); }
.hx-row.is-picked { border-color: var(--graphite); }
.hx-bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.hx-why { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: 6px; }
.hx-why b { padding: 0 6px; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 4px; font-weight: 650; white-space: nowrap; }
@media (max-width: 767px) {
  .st-skipnote { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 6px; color: var(--ink-2); background: #eef1f0; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
  .st-skipnote svg.lucide { width: 12px; height: 12px; }
  .hx-bulk { margin-left: 0; }
  .hx-page .bl-sendbar:has(.btn[aria-disabled="true"]) .bl-send-note.is-blocked { display: flex; grid-column: 1 / -1; grid-row: auto; padding-top: 4px; font-size: 13px; }
  /* «Пропустить шаг» and «Прервать прогон» in one quiet row, text aligned with the lede */
  .page-head:has(.hx-head-act) { gap: 4px; }
  .hx-head-act, .page-head > div.hx-head-act { width: 100%; flex-wrap: nowrap; gap: 4px; margin-left: -10px; }
  .hx-head-act .btn { min-height: 44px; padding-inline: 10px; white-space: nowrap; }
}
/* Run and step tables as cards on phones: name and state on top, the numbers in a 3-column grid with their labels. */
@media (max-width: 767px) {
  .hx-cta, .hx-cta .btn { width: 100%; }
  .hx-cta .btn { white-space: normal; text-align: left; }
  .hx-runs tbody tr, .hx-steps-t tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
  .hx-runs tbody th, .hx-steps-t tbody th, .hx-runs .hx-open, .hx-steps-t .hx-state, .hx-runs td[data-label="Состояние"] { grid-column: 1 / -1; }
  .hx-runs td[data-label="Начат"] { grid-column: 1 / -1; }
  .hx-runs td:nth-child(n+4):not(:last-child), .hx-steps-t td { text-align: left; }
  .hx-runs td[data-label="Состояние"]::before { display: none; }
  .hx-steps-t .hx-state { justify-self: start; }
}

/* ---- design panel 2026-10-12 --------------------------------------------------------------------------------------------- */
/* step 1 reads no B2B stock or price: the missing facts are one muted line, not rows of «нет данных» */
.hx-nodata { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* send blocked (no category / sizes, no rights, nothing decided): visibly off, still focusable, the note says why */
.hx-page .bl-send .btn[aria-disabled="true"], .hx-page .bl-send .btn[aria-disabled="true"]:hover { color: #c3ccc8; background: transparent; border: 1px dashed rgba(233, 239, 236, .45); box-shadow: none; cursor: not-allowed; }
/* the sticky send bar never covers the focused field or the last card */
html:has(.hx-page .bl-sendbar) { scroll-padding-bottom: 140px; }

/* touch widths: no iOS zoom on focus (inputs ≥16 px), 44 px targets */
@media (max-width: 1099px), (pointer: coarse) {
  .field.hx-dim input:not([type="radio"]), .hx-cat select { min-height: 44px; font-size: 16px; }
  .hx-pick input, .field .hx-ack input[type="checkbox"] { font-size: 16px; }
  .hx-page .btn, .hx-pick, .hx-page .bl-fchip { min-height: 44px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .hx-page .step-tabs ol { flex-wrap: nowrap; overflow-x: auto; padding: 2px; margin: -2px; }
  .hx-page .step-tabs ol { gap: 4px; }
  .hx-page .st-a { gap: 6px; padding: 4px 10px 4px 6px; }
  .hx-page .st-name { font-size: 13px; }
}

/* «История прогонов» on the scenario page: the seven columns need ~1100 px, so below 1440 px (sidebar + main) each run
   is a card — number, state and «Отчёт» on top, the three steps and «Отложено» in a 4-column row with their labels
   (the markup keeps role="row|cell"). The wrap contains the absolutely placed caption of «Отчёт». */
.tbl-wrap:has(> .tbl-scen.hx-runs) { position: relative; }
@media (min-width: 768px) and (max-width: 1439px) {
  .tbl-scen.hx-runs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl-scen.hx-runs, .tbl-scen.hx-runs tbody { display: block; }
  .tbl-scen.hx-runs tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 8px 16px; padding: 12px 14px; }
  .tbl-scen.hx-runs tbody tr + tr { border-top: 1px solid var(--line); }
  .tbl-scen.hx-runs tbody th, .tbl-scen.hx-runs td, .tbl-scen.hx-runs td:nth-child(n+4):not(:last-child) { display: block; min-width: 0; padding: 0; border-top: 0; text-align: left; }
  .tbl-scen.hx-runs tbody th { grid-column: 1 / 3; grid-row: 1; }
  .tbl-scen.hx-runs td[data-label="Состояние"] { grid-column: 3; grid-row: 1; }
  .tbl-scen.hx-runs .col-open { grid-column: 4; grid-row: 1; justify-self: end; width: auto; }
  .tbl-scen.hx-runs td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
  .tbl-scen.hx-runs td[data-label="Состояние"]::before { display: none; }
}


/* ---- step 3: Claude creation proposals (spec b2b-claude-create-proposals, REQ-15..17) ------------------------------------ */
.hx-props { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.hx-props > div { flex: 1 1 360px; min-width: 0; display: grid; gap: 4px; }
.hx-props strong { font-size: 15px; }
.hx-props p { color: var(--ink-2); font-size: 13.5px; }
.hx-props > svg.lucide { flex: none; align-self: flex-start; width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); }
.hx-props.is-fail { background: var(--tint); border-color: var(--field); }
.hx-props.is-fail > .mark { align-self: flex-start; }
.hx-wait.hx-props { align-items: flex-start; flex-wrap: nowrap; background: var(--blue-soft); border-color: var(--blue-line); }
.hx-wait.hx-props .bl-meter-run { max-width: 420px; margin-top: 4px; }
.hx-new { gap: 8px; }
.hx-f { gap: 4px; }
.hx-flabel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
.hx-flabel label { color: var(--ink); font-size: 13px; font-weight: 650; }
.hx-flabel .mark { margin-left: auto; }
.hx-fstate { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.hx-fstate svg.lucide { width: 13px; height: 13px; }
.hx-flabel .hx-fstate:last-child { margin-left: auto; }
.hx-fstate.is-edit { color: var(--ink-2); }
.hx-flabel .hx-fstate.is-edit:last-child { margin-left: 0; }
.hx-dims legend .hx-fstate { margin-left: 8px; }
.field.hx-f input:not([type="radio"]) { min-height: 38px; padding: 0 10px; font-size: 14px; }
.hx-prop { display: grid; gap: 6px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.hx-prop.is-low { border-color: var(--amber-line); }
.hx-prop .mark { justify-self: start; }
.hx-prop.is-wait, .hx-prop.is-fail { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 13px; }
.hx-prop.is-wait { background: var(--blue-soft); border-color: var(--blue-line); }
.hx-prop.is-wait .spin { margin-top: 2px; }
.hx-prop.is-fail svg.lucide { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.hx-newcat-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.hx-newcat { display: block; min-width: 0; margin: 6px 0 0; padding: 10px 12px 12px; background: var(--paper); border: 1px solid var(--amber-line); border-radius: var(--radius); }
.hx-newcat legend { padding: 0 4px; color: var(--ink); font-size: 13px; font-weight: 650; }
.hx-newcat .field label { font-size: 12.5px; color: var(--ink-2); }
.hx-newcat-path { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.hx-newcat-path svg.lucide { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.hx-newcat-act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
  .field.hx-f input:not([type="radio"]), .hx-pk-btn { min-height: 44px; font-size: 16px; }
  .hx-props .btn, .hx-newcat-act .btn { min-height: 44px; }
}
/* step 3 rows carry a form: the CRM side gets the width the short supplier card does not need */
@media (min-width: 1100px) { .hx-list-head.hx-list-3, .hx-list-3 > .hx-row { grid-template-columns: minmax(0, .8fr) 76px minmax(0, 1.5fr) 196px; } }
.hx-f2 { display: grid; gap: 8px; }
@container (min-width: 480px) { .hx-f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: start; } }
.hx-f2:has(.hx-newcat) { grid-template-columns: minmax(0, 1fr); }
.hx-newcat > * + * { margin-top: 10px; }
.hx-newcat-act .btn { max-width: 100%; height: auto; white-space: normal; text-align: left; }
.hx-props-err { display: flex; align-items: flex-start; gap: 6px; color: var(--red); font-size: 13px; }
.hx-props-err svg.lucide { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* ---- the shared picker of step 3 (hx-picker.mjs): a row field is a button with the chosen value; one panel opens under it ---- */
.hx-pk-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 38px; padding: 6px 10px; background: var(--paper); border: 1px solid var(--field); border-radius: var(--radius); color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; }
.hx-pk-btn:hover:not(:disabled) { border-color: var(--muted); }
.hx-pk-btn:disabled { background: var(--tint); color: var(--muted); }
.hx-pk-btn[aria-invalid="true"] { border-color: var(--red); }
.hx-pk-btn.is-empty .hx-pk-val { color: var(--muted); }
.hx-pk-val { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.hx-pk-caret { flex: none; width: 8px; height: 8px; margin: 0 2px 3px 0; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hx-pk-btn[aria-expanded="true"] { border-color: var(--focus); }
.hx-pk-btn[aria-expanded="true"] .hx-pk-caret { margin: 3px 2px 0 0; transform: rotate(-135deg); }
.hx-picker { position: absolute; z-index: var(--z-nav); display: grid; max-width: calc(100vw - 16px); background: var(--paper); border: 1px solid var(--field); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(32,40,39,.18); }
.hx-pk-search { padding: 8px; border-bottom: 1px solid var(--line); }
.hx-pk-search input { width: 100%; min-height: 40px; padding: 0 10px; background: var(--paper); border: 1px solid var(--field); border-radius: var(--radius); font-size: 15px; }
.hx-pk-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.hx-pk-scroll { overflow: auto; overscroll-behavior: contain; }
.hx-pk-list { position: relative; }
.hx-pk-item { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 calc(8px + var(--lvl, 0) * 18px); color: var(--ink); font-size: 14px; cursor: pointer; white-space: nowrap; }
.hx-pk-item:hover { background: var(--tint); }
.hx-pk-item.is-active { background: var(--green-soft); box-shadow: inset 3px 0 var(--green); }
.hx-pk-item.is-current { font-weight: 650; }
.hx-pk-item.is-current::after { content: ""; flex: none; width: 5px; height: 10px; margin: 0 4px 3px auto; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hx-pk-item.is-context .hx-pk-t { color: var(--muted); }
.hx-pk-item.is-new { color: var(--green); font-weight: 650; }
.hx-pk-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hx-pk-t mark { padding: 0 1px; background: var(--amber-soft); color: inherit; border-radius: 2px; box-shadow: inset 0 -2px var(--amber-line); }
.hx-pk-tw { flex: none; display: grid; place-items: center; width: 28px; height: 32px; margin-left: -4px; border-radius: 4px; }
.hx-pk-tw:not(.is-leaf):hover { background: var(--line-2); }
.hx-pk-tw:not(.is-leaf)::before { content: ""; width: 7px; height: 7px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .12s; }
.hx-pk-tw.is-open::before { transform: rotate(45deg); }
.hx-pk-status { padding: 0 10px; color: var(--muted); font-size: 12.5px; }
.hx-pk-status:not(:empty) { padding: 6px 10px; border-top: 1px solid var(--line); }
.hx-pk-foot { padding: 8px; border-top: 1px solid var(--line); }
.hx-pk-foot .btn { width: 100%; justify-content: flex-start; }
@media (max-width: 767px) {
  .hx-pk-search input, .hx-pk-item { font-size: 16px; }
  .hx-pk-search input, .hx-pk-foot .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hx-pk-tw::before { transition: none; } }