/* Scenario step «Связки B2B» (dashboard/views-b2b-links.mjs, b2b-links-rows.mjs): products with supplier cards and the
   owner's local decisions. The one bold place is the match score of a card (big number + meter); the accent (green) is the send
   button only: a decision or a chosen card is a neutral graphite fill with a word, colours (blue run, amber, red with icon + word, green) mark statuses only. Tokens from app.css. */

.b2b-status { margin: 0 0 24px; }
.b2b-status-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.b2b-status-head h2 { font-size: 17px; line-height: 1.35; font-weight: 700; }
.b2b-status-n, .b2b-status-by { color: var(--muted); font-weight: 500; }
.b2b-status-by { margin-bottom: 12px; font-size: 13px; }
.b2b-hist { margin-top: 32px; }
.b2b-hist-t { font-size: 15px; font-weight: 700; }
.b2b-hist-open { margin-left: auto; padding-left: 12px; color: var(--amber); font-size: 13px; font-weight: 600; }
.b2b-row.is-current { background: var(--green-soft); }


/* ---- page head and the status strip: Claude, data, submissions in two lines ---------------------------------------- */
.bl-head { margin-bottom: 14px; }
.bl-head > div:first-child { flex: 1 1 520px; min-width: 0; }
.bl-head .lede { max-width: 78ch; margin-top: 4px; font-size: 14px; }
.bl-head .h1-stage { display: inline; margin: 0 0 0 10px; font-size: 17px; vertical-align: 2px; }
.bl-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 1.25fr) auto; margin: 0 0 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.bl-cell { min-width: 0; display: grid; gap: 2px; align-content: center; padding: 9px 16px; border-right: 1px solid var(--line-2); }
.bl-k { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
.bl-v { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; line-height: 1.4; }
.bl-v > svg.lucide { width: 15px; height: 15px; flex: none; color: var(--muted); }
.bl-v > span { min-width: 0; }
.bl-v > svg.lucide + span { flex: 0 1 auto; }
.bl-run-narrow { display: none; }
.bl-v-note { color: var(--muted); font-size: 13px; font-weight: 400; }
.bl-v .mark, .bl-meta .mark, .bl-state .mark { max-width: 100%; white-space: normal; text-align: left; }
.bl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.bl-pend { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.bl-pend-go { color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bl-strip-act { display: grid; justify-items: end; align-content: center; gap: 0; padding: 6px 12px; }
.bl-strip-more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.bl-strip-more > summary::-webkit-details-marker { display: none; }
.bl-strip-more > summary svg.lucide { width: 15px; height: 15px; transition: transform .14s ease; }
.bl-strip-more[open] > summary svg.lucide { transform: rotate(180deg); }
.bl-more-body { position: absolute; z-index: var(--z-sticky); left: -1px; right: -1px; top: calc(100% + 4px); display: grid; gap: 6px; padding: 14px 16px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 32px rgba(32, 40, 39, .14); font-size: 13.5px; }
.bl-strip .bl-meter-run { grid-column: 1 / -1; margin: 0 16px 12px; }
.bl-run-error { display: flex; gap: 8px; color: var(--red); font-size: 13.5px; font-weight: 600; }
.bl-strip-err { grid-column: 1 / -1; margin: 0 16px 10px; }
.bl-stale { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--amber-line); border-radius: var(--radius); background: var(--amber-soft); }
.bl-stale > svg.lucide { margin-top: 2px; color: var(--amber); }
.bl-stale strong { display: block; font-size: 14px; }
.bl-stale p { margin-top: 2px; color: #5e4209; font-size: 13.5px; }
.bl-meter-run { position: relative; height: 12px; background: var(--paper); border: 1px solid var(--blue-line); border-radius: 4px; overflow: hidden; }
.bl-meter-run > i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--blue); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.bl-meter-run.is-segmented::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--segs) - 2px), var(--blue-soft) calc(100% / var(--segs) - 2px), var(--blue-soft) calc(100% / var(--segs))); }

/* ---- groups, toolbar, selection ---------------------------------------------------------------------------------------- */
.bl-groups { margin-bottom: 10px; }
.bl-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bl-count { display: grid; gap: 1px; align-content: start; min-height: 58px; padding: 8px 12px; color: var(--ink); text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font: inherit; }
.bl-count b { font-size: 24px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-count span { color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.bl-count[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); }
.bl-count[aria-pressed="true"] b, .bl-count[aria-pressed="true"] span { color: #fff; }
.bl-count:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bl-sub { margin-top: 8px; max-width: 110ch; font-size: 13px; }

.bl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 6px; }
.bl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-left: auto; }
.bl-search { display: flex; flex: 1 1 200px; max-width: 280px; gap: 8px; }
/* Narrow screens fold the brief and the extra filters; a wide one shows them as plain content (the summaries are for the narrow). */
.bl-brief > summary, .bl-fold > summary { display: none; }
.bl-fold { display: flex; }
.bl-fold-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
@media (min-width: 769px) { .bl-brief::details-content, .bl-fold::details-content { content-visibility: visible; display: contents; } }
.bl-search-box { position: relative; flex: 1; display: flex; align-items: center; }
.bl-search-box svg.lucide { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.bl-search-box input { width: 100%; min-height: 36px; padding: 0 10px 0 32px; border: 1px solid var(--field); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 14px; }
.bl-select-input { max-width: 170px; min-height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--field); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; }
.bl-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.bl-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; color: var(--ink); background: var(--tint); border: 1px solid var(--field); border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1; }
button.bl-fchip { cursor: pointer; }
.bl-fchip svg.lucide { width: 14px; height: 14px; }
.bl-found { font-size: 13px; font-variant-numeric: tabular-nums; }

.bl-select { order: -1; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 44px; padding: 4px 4px; }
.bl-select.is-active { margin: 0 0 6px; position: sticky; top: calc(var(--top) + 8px); z-index: var(--z-sticky); padding: 6px 14px; color: #e9efec; background: var(--graphite); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(32, 40, 39, .22); }
.bl-selall { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bl-selall input, .bl-pick input { width: 24px; height: 24px; font-size: 16px; accent-color: var(--graphite); }
.bl-decided { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bl-decided b { color: var(--ink); }
.bl-selcount { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-left: auto; }
.bl-select.is-active .btn-ghost { color: #e9efec; }
.bl-select.is-active .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.bl-select.is-active .btn:not(.btn-ghost):not(.btn-primary) { color: var(--ink); }
.bl-thr { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #c3ccc8; }
.bl-note { display: flex; gap: 8px; margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }
.bl-note svg.lucide { flex: none; margin-top: 2px; color: var(--blue); }

/* ---- rows ------------------------------------------------------------------------------------------------------------ */
.bl-list { container-type: inline-size; display: grid; margin-top: 8px; border-top: 1px solid var(--line); }
.bl-item { display: grid; gap: 14px 28px; padding: 18px 8px; border-bottom: 1px solid var(--line); }
.bl-item.is-picked { background: var(--tint); }
.bl-item.is-skip, .bl-item.is-defer, .bl-item.is-link, .bl-item.is-relink, .bl-item.is-unlink { background: var(--tint); }
.bl-prod { display: flex; gap: 12px; min-width: 0; }
.bl-pick { display: grid; place-items: center; width: 36px; height: 36px; flex: none; margin: -6px 0 0 -8px; cursor: pointer; }
.bl-prod-body { min-width: 0; display: grid; gap: 2px; align-content: start; }
.bl-name { font-size: 16px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; text-wrap: balance; }
.bl-sku { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bl-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px; color: var(--ink-2); background: #eef1f0; border-radius: 4px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-chip.is-muted { color: var(--muted); font-weight: 500; }
.bl-state { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
a.bl-state { text-decoration: none; min-height: 24px; }
.bl-expand { display: none; width: 100%; margin-top: 8px; }

/* The decision control: the chosen segment is a neutral graphite fill with its word and a check. */
.bl-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: min(100%, 300px); margin-top: 10px; overflow: hidden; background: var(--field); border: 1px solid var(--field); border-radius: var(--radius); }
.bl-seg > .bl-segbtn:nth-child(odd):last-child { grid-column: 1 / -1; }
.bl-segbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 8px; color: var(--ink-2); background: var(--paper); border: 0; font: 600 13px/1.2 inherit; white-space: nowrap; cursor: pointer; }
.bl-segbtn svg.lucide { width: 15px; height: 15px; }
.bl-segbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bl-segbtn:disabled { color: var(--muted); background: var(--tint); cursor: not-allowed; }
.bl-segbtn.is-on { color: #fff; background: var(--graphite); }
@media (hover: hover) and (pointer: fine) { .bl-segbtn:not(.is-on):not(:disabled):hover { background: var(--line-2); } }

.bl-mapping { display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; background: var(--tint); border: 1px solid var(--line-2); border-radius: var(--radius); }
.bl-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.bl-block-t { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.bl-side { min-width: 0; display: grid; gap: 12px 20px; align-content: start; }
.bl-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 380px)); }
.bl-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.bl-card.is-chosen { background: var(--tint); border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.bl-card.is-taken { background: var(--tint); }
.bl-card.is-unsure { border-style: dashed; border-color: var(--field); }
.bl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bl-card-top .bl-score { flex: 1; min-width: 0; }
.bl-source-tag { flex: none; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bl-verdict { display: flex; }
.bl-why { display: flex; gap: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.bl-notice { display: flex; gap: 6px; margin: 6px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.bl-notice svg.lucide { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--amber, var(--muted)); }
.bl-why svg.lucide { flex: none; width: 13px; height: 13px; margin-top: 3px; color: var(--muted); }
.bl-linked, .bl-linked.tone-green, .bl-linked.tone-red, .bl-linked.tone-amber, .bl-linked.tone-muted { color: var(--ink); }
.bl-linked.tone-red { border-color: var(--red-line); }
.bl-linked.tone-amber { border-color: var(--amber-line); }

.bl-score { display: grid; gap: 6px; }
.bl-score b { font-size: 30px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.bl-score small { margin-left: 1px; font-size: 16px; font-weight: 600; color: var(--muted); }
.bl-meter { display: block; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bl-meter i { display: block; height: 100%; background: var(--graphite); border-radius: 3px; }
/* A picked card button: the same neutral fill as the chosen segment, never the accent. */
.btn.is-picked, .btn.is-picked:hover { color: #fff; background: var(--graphite); border-color: var(--graphite); }
.bl-card.is-taken .bl-score b { color: var(--muted); }
.bl-card-name { font-size: 14px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.bl-brand { color: var(--ink-2); font-size: 13px; }
.bl-facts { display: grid; gap: 2px; margin: 2px 0; align-content: start; }
.bl-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.bl-fact dt { color: var(--muted); }
.bl-fact dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bl-warn { display: flex; gap: 7px; align-items: flex-start; padding: 7px 9px; background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 4px; color: #5e4209; font-size: 12.5px; }
.bl-warn svg.lucide { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--amber); }
.bl-pickcard { width: 100%; margin-top: auto; }
.bl-warn + .bl-pickcard, .bl-facts + .bl-pickcard { margin-top: 8px; }
.bl-facts { flex: 1; }
.bl-nocards { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; color: var(--ink-2); border: 1px dashed var(--field); border-radius: var(--radius); font-size: 13.5px; }
.bl-nocards svg.lucide { flex: none; margin-top: 2px; color: var(--muted); }

.bl-manual-wrap > summary { display: flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.bl-manual-wrap > summary::-webkit-details-marker { display: none; }
.bl-manual-wrap[open] > summary .more-chev { transform: rotate(90deg); }
.bl-manual { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 4px 0 2px 22px; }
.bl-manual .field { flex: 1 1 220px; max-width: 320px; }
.bl-manual .field input { font-variant-numeric: tabular-nums; }
.bl-manual .btn { margin-top: calc(13.5px * 1.5 + 6px); }


.bl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 14px 0 6px; }
.bl-pages, .bl-total { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.bl-total { margin-top: 12px; }
.bl-skel li { height: 190px; border-bottom: 1px solid var(--line); }
.bl-skel li span { display: block; width: 38%; height: 14px; margin: 24px 4px; background: var(--line-2); border-radius: 3px; }
.bl-empty .btn, .bl-error .btn { min-height: 44px; }

/* ---- the send bar: 64 px with the whole sentence on the button; 56 px (48 px on the narrowest) with count and button ---------- */
:root { --bl-bar-h: 64px; }
.content:has(.bl-sendbar) { padding-bottom: var(--bl-bar-h); }
html:has(.bl-sendbar) { scroll-padding-bottom: calc(var(--bl-bar-h) + 16px); }
.bl-sendbar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 20px; min-height: var(--bl-bar-h); margin: 18px -4px 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); color: #e9efec; background: var(--graphite); border-radius: var(--radius) var(--radius) 0 0; }
.bl-sumbtn { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 0; color: #fff; background: none; border: 0; font: 500 14px/1 inherit; cursor: pointer; }
.bl-sumbtn b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bl-sumbtn svg.lucide { width: 16px; height: 16px; color: #a4afaa; }
.bl-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.bl-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bl-sum .muted { color: #a4afaa; }
.bl-send .btn { min-height: 44px; }
.bl-sum { grid-column: 1; }
.bl-send { grid-column: 2; grid-row: 1 / span 2; }
.bl-sendbar:not(:has(.bl-send-note:not([hidden]))) .bl-send { grid-row: 1; }
.bl-lbl-short { display: none; }
.bl-send-note { display: none; grid-column: 1; grid-row: 2; align-items: center; gap: 6px; color: #dfe6e3; font-size: 14px; line-height: 1.3; }
.bl-send-note svg.lucide { flex: none; width: 16px; height: 16px; }
.bl-sendbar:has(.btn[disabled]) .bl-send-note { display: flex; }
.bl-sendbar:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.bl-sheet-list { display: grid; gap: 2px; }
.bl-sheet-list li { display: flex; align-items: baseline; gap: 10px; min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.bl-sheet-list b { min-width: 28px; font-size: 18px; font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
  .bl-card:not(.is-chosen):not(.is-taken):hover { border-color: #bfcac5; }
}
@container (min-width: 760px) {
  .bl-item { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); align-items: start; }
}
@container (min-width: 1040px) {
  .bl-side:has(> .bl-block ~ .bl-block) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-side > .bl-manual-wrap, .bl-side > .bl-nocards { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .bl-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .bl-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bl-strip-act { grid-column: 1 / -1; grid-row: 2; grid-auto-flow: column; justify-content: space-between; justify-items: start; border-top: 1px solid var(--line-2); }
  .bl-cell:nth-child(3) { border-right: 0; }
  .bl-filters { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 768px) {
  :root { --bl-bar-h: 56px; }
  .bl-sendbar { grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); margin: 14px -16px 0; }
  .bl-sumbtn { display: inline-flex; }
  .bl-sum, .bl-sendbar:has(.btn[disabled]) .bl-send-note, .bl-send-note { display: none; }
  .bl-send, .bl-sendbar:not(:has(.bl-send-note:not([hidden]))) .bl-send { grid-column: auto; grid-row: auto; justify-self: end; min-width: 0; }
  .bl-send .btn { max-width: 100%; padding: 0 14px; }
  .bl-lbl-full { display: none; }
  .bl-lbl-short { display: inline; }
}
@media (max-width: 768px) {
  .bl-head .lede { display: none; }
  .bl-head { flex-wrap: nowrap; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
  .bl-head > div:first-child { flex: 1 1 0; }
  .bl-head .h1-stage { display: block; margin: 2px 0 0; }
  .bl-head .head-acts { flex: none; width: auto; }
  .bl-head .rf-btn { flex: none; width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .bl-head .rf-btn .rf-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bl-brief { margin: 0 0 10px; }
  .bl-brief > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
  .bl-brief > summary::-webkit-details-marker { display: none; }
  .bl-brief[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .bl-brief-line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; line-height: 1.35; }
  .bl-brief-k { color: var(--muted); font-size: 13px; }
  .bl-brief-line .mark { max-width: 100%; white-space: normal; text-align: left; }
  .bl-brief-line .bl-meter-run { flex: 1 1 100%; }
  .bl-sub { display: none; }
  .bl-brief-go { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
  .bl-brief-go svg.lucide { width: 15px; height: 15px; transition: transform .14s ease; }
  .bl-brief[open] .bl-brief-go svg.lucide { transform: rotate(180deg); }
  .bl-brief-body { padding: 10px 0 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }
  .bl-brief-body > .bl-strip, .bl-brief-body > .b2b-status, .bl-brief-body > .bl-stale { margin: 0 8px 10px; }
  .bl-brief-body > .b2b-gate { margin: 0 8px 10px; }
  .bl-strip-more > summary { display: none; }
  .bl-strip { grid-template-columns: 1fr; }
  .bl-cell { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .bl-k { padding-top: 3px; }
  .bl-strip-act { grid-row: auto; grid-auto-flow: row; justify-items: stretch; gap: 4px; padding: 2px 10px; border-top: 0; }
  .bl-run-wide { display: none; }
  .bl-run-narrow { display: block; }
  .bl-run-narrow .btn { width: 100%; min-height: 44px; background: transparent; }
  .bl-more-body { position: static; margin-top: 4px; padding: 8px 4px; border: 0; box-shadow: none; }
  .bl-pend, .bl-pend-go { min-height: 44px; }
  .bl-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bl-count { min-height: 56px; }
  .bl-toolbar { gap: 4px; }
  .bl-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; width: 100%; }
  .bl-search { max-width: none; min-width: 0; }
  .bl-search .btn { display: none; }
  .bl-search-box input { min-height: 44px; font-size: 16px; }
  .bl-fold > summary { display: inline-flex; }
  .bl-fold > summary { align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; list-style: none; cursor: pointer; }
  .bl-fold > summary::-webkit-details-marker { display: none; }
  .bl-fold[open] > summary { background: var(--tint); }
  .bl-fcount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: #fff; background: var(--graphite); border-radius: 10px; font-size: 12px; }
  .bl-fold-body { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; }
  .bl-fold { display: contents; }
  .bl-fold > summary { grid-column: 2; grid-row: 1; }
  .bl-fold-body { grid-row: 2; }
  .bl-filters .bl-select-input { width: 100%; max-width: none; min-height: 44px; font-size: 16px; text-overflow: ellipsis; }
  .bl-select { padding: 2px 0; }
  /* Bulk actions: a bottom sheet above the send bar (two columns, never clipped), the filters and the heading stay free. */
  .bl-select.is-active { position: fixed; inset: auto 0 var(--bl-bar-h) 0; z-index: var(--z-sticky); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; max-height: 46svh; margin: 0; padding: 8px 12px 10px; overflow-y: auto; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 28px rgba(32, 40, 39, .24); }
  .bl-select.is-active .bl-selcount { justify-self: end; }
  .bl-bulk { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-left: 0; width: 100%; }
  .bl-bulk .btn { width: 100%; min-height: 44px; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
  .bl-bulk > .btn:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .bl-select.is-active .bl-bulk .btn, .bl-select.is-active .bl-bulk .btn:not(.btn-ghost):not(.btn-primary) { color: #e9efec; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
  .bl-thr { grid-column: 1 / -1; width: 100%; }
  .bl-thr .bl-select-input { flex: 1; min-height: 44px; font-size: 16px; }
  .content:has(.bl-select.is-active) { padding-bottom: calc(var(--bl-bar-h) + 260px); }
  .bl-pick { width: 44px; height: 44px; margin: -10px 0 0 -12px; }
  .bl-selall { min-height: 44px; }
  a.bl-state { min-height: 44px; }
  .bl-item { padding: 14px 4px; }
  .bl-seg { width: 100%; }
  .bl-segbtn { min-height: 44px; white-space: normal; }
  .bl-expand { display: inline-flex; min-height: 44px; }
  .bl-item:not(.is-open) :is(.bl-brand, .bl-why, .bl-facts, .bl-source-tag) { display: none; }
  .bl-item:not(.is-open) .bl-card { gap: 4px; padding: 10px 12px; }
  .bl-item:not(.is-open) .bl-score b { font-size: 22px; }
  .bl-pickcard, .bl-manual .btn, .bl-manual-wrap > summary { min-height: 44px; }
  .bl-manual .field input { min-height: 44px; font-size: 16px; }
  .bl-manual .btn { margin-top: 0; }
  .bl-manual { padding-left: 0; }
  .bl-pager .btn { min-height: 44px; }
  .bl-hist-open { display: none; }
}
@media (max-width: 360px) {
  :root { --bl-bar-h: 48px; }
  .bl-sendbar { gap: 0 6px; padding: 2px 8px calc(2px + env(safe-area-inset-bottom)); margin-inline: -16px; }
  .bl-sumbtn span { display: none; }
  .bl-send .btn { padding: 0 10px; font-size: 13px; }
}
@media (forced-colors: active) {
  .bl-card, .bl-select, .bl-sendbar, .bl-warn, .bl-strip, .bl-count, .bl-seg { border: 1px solid CanvasText; }
  .bl-card.is-chosen, .bl-count[aria-pressed="true"], .bl-segbtn.is-on { border-width: 3px; }
}
.bl-card h5, .bl-card p { margin: 0; }
.bl-item h3, .bl-item p, .bl-block h4 { margin: 0; }

/* Desktop: the work list starts in the first screen — one-line head, slim strip, slim banner, one-line tabs, hint in a tooltip. */
@media (min-width: 1101px) {
  .bl-head { margin-bottom: 8px; }
  .bl-head .lede, .bl-sub { display: none; }
  .bl-strip { margin-bottom: 8px; }
  .bl-cell { padding: 5px 16px; }
  .bl-strip-act { grid-auto-flow: column; justify-content: end; align-items: center; gap: 8px; }
  .b2b-status { margin-bottom: 8px; }
  .b2b-status .b2b-now { padding: 8px 16px; }
  .b2b-status .b2b-now-body h2 { font-size: 17px; }
  .b2b-status .b2b-now-body { gap: 2px 14px; }
  .b2b-status .b2b-now-acts { margin-top: 0; }
  .b2b-status .b2b-stale { margin-top: 0; padding: 0; border: 0; background: none; }
  .bl-cell { gap: 0; }
  .bl-groups { margin-bottom: 4px; }
  .bl-count { min-height: 0; padding: 6px 10px; gap: 0; }
  .bl-count b { font-size: 20px; }
  .bl-count span { font-size: 12.5px; overflow-wrap: break-word; hyphens: auto; }
  .bl-toolbar { margin-bottom: 0; }
  .bl-select { min-height: 36px; padding-block: 0; }
  .bl-list { margin-top: 2px; }
  .bl-strip, .b2b-status, .bl-head { margin-bottom: 6px; }
}

#bl-send { flex: none; }
.bl-sum { min-width: 0; }

/* The summary wraps to three lines between 769 and 1280 px: the bar reserves its real height so it never covers a focused control. */
@media (min-width: 769px) and (max-width: 1280px) { :root { --bl-bar-h: 104px; } }
@media (min-width: 769px) and (max-height: 500px) { :root { --bl-bar-h: 68px; } .bl-sum { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } }