/* next-r96-bench.css (r96 phase 2, wave 1, W1-BENCH): the bench card at the top of the lot page, and the header's line of
   decisions owed (next-v84.js). On the v89 system (DESIGN-V89.md): its type tokens, grey ramp, tones and spacing only. */

/* the header: the decisions owed, under the supplier and receipt line */
#view .lhero .r96b-owed { margin: var(--s-1) 0 0; color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .lhero .r96b-owed[data-tone="a"] { color: var(--attention-fg); }

/* the card */
#view .card.r96b { display: grid; gap: var(--s-4); padding: var(--s-5); margin: 0 0 var(--s-4); }
.r96b-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.r96b-ans { display: grid; gap: 2px; min-width: 132px; padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--neutral-bg); color: var(--neutral-fg); }
.r96b-ans small { font-size: var(--t-label-size); line-height: var(--t-label-lh); color: inherit; opacity: .85; }
.r96b-ans b { font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-title-track); }
.r96b-ans[data-tone="positive"] { background: var(--positive-bg); color: var(--positive-fg); }
.r96b-ans[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-fg); }
.r96b-ans[data-tone="neutral"] b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); letter-spacing: 0; }
.r96b-why { display: grid; gap: var(--s-2); align-self: center; min-width: 0; color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); overflow-wrap: anywhere; }
.r96b-why p { margin: 0; }
.r96b-why b { color: var(--gray-900); font-weight: var(--w-semibold); }
.r96b-more summary { cursor: pointer; color: var(--gray-500); }
.r96b-more ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); display: grid; gap: var(--s-1); }

.r96b-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.r96b-facts > div { display: grid; gap: var(--s-1); align-content: start; min-width: 0; }
.r96b-facts dt { color: var(--gray-500); font-size: var(--t-label-size); line-height: var(--t-label-lh); }
.r96b-facts dd { margin: 0; display: grid; gap: 2px; min-width: 0; color: var(--gray-900); font-size: var(--t-small-size); line-height: var(--t-small-lh); overflow-wrap: anywhere; }
.r96b-v { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.r96b-facts dd em { font-style: normal; color: var(--gray-500); font-size: var(--t-label-size); }
.r96b-sub { color: var(--gray-700); }
.r96b-note { margin-top: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-ctl); background: var(--neutral-bg); color: var(--gray-700); }
.r96b-confirm { color: var(--attention-fg); font-weight: var(--w-medium); }
.r96b-miss { color: var(--gray-500); }
.r96b-file { justify-self: start; }

.r96b-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.r96b-act .btn.primary { min-height: 44px; }
.r96b-in { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--positive-fg); font-weight: var(--w-medium); font-size: var(--t-small-size); }
.r96b-in svg { width: 16px; height: 16px; }
.r96b-an { flex-basis: 100%; margin: 0; color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.r96b-batch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--neutral-bg); }
.r96b-batch > div { display: grid; gap: 2px; min-width: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.r96b-batch > div span { color: var(--gray-700); overflow-wrap: anywhere; }
.r96b-batch .btn.primary { min-height: 44px; }
.r96b-foot { margin: 0; color: var(--gray-500); font-size: var(--t-label-size); line-height: var(--t-label-lh); }

/* the phone: one column, the answer across the top, buttons the width of a thumb */
@media (max-width: 699px) {
  #view .card.r96b { padding: var(--s-4); gap: var(--s-3); }
  .r96b-top { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .r96b-ans { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; }
  .r96b-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .r96b-facts > div { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); column-gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--gray-100); }
  .r96b-facts > div:first-child { border-top: 0; padding-top: 0; }
  .r96b-act .btn, .r96b-batch .btn { flex: 1 1 100%; justify-content: center; }

}