/* v89 DESIGN ROUND: page layer (suppliers), per DESIGN-V89.md section 7. Tokens only; components come from next-v89.css.
   Suppliers (table, cards, supply chain), the supplier profile (header, strip, four tabs, right rail) and Your pharmacy's
   file. The markup is next-v89-suppliers.js; every class here starts v89s- (suppliers) or v89n- (your pharmacy's file). */

/* ---------------- Suppliers: the list ---------------- */
.v89s-list > .tabs { margin-bottom: var(--s-4); }
.v89s-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-4); }
.v89s-chips { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.v89s-search { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; width: 280px; max-width: 100%; padding: 0 var(--s-3); border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); color: var(--gray-400); }
.v89s-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.v89s-search svg.i { width: 16px; height: 16px; flex: none; }
.v89s-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); }
.v89s-search input[type="search"]:focus { box-shadow: none; }
.v89s-search input::-webkit-search-cancel-button { display: none; }
/* the data table (next-table.js) carries the toolbar: the filter chips and the search first, its Columns menu last */
.v89s-dt .dt-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: nowrap; margin: 0 0 var(--s-4); padding: 0; border: 0; background: none; }
.v89s-dt .dt-bar > .sp { display: none; }
.v89s-dt .dt-bar > .v89s-tools { order: -1; flex: 1 1 auto; min-width: 0; margin: 0; }
.v89s-dt .dt-bar > .dm-wrap { order: 1; flex: none; }
.v89s-dt .dt-bar .btn.sm { height: 32px; }
.v89s-dt .dt-box { border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: none; background: var(--gray-0); overflow: hidden; }
.v89s-dt th.dt-act, .v89s-dt td.dt-act { width: 52px; text-align: right; }   /* v90: the 46px row menu overflowed a 44px column */
.v89s-dt .dt-sort { font: inherit; color: inherit; display: inline-flex; align-items: center; gap: var(--s-1); }
.v89s-table tbody tr { cursor: pointer; }
.v89s-table td:last-child .btn { min-width: 0; }
.v89s-sup { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.v89s-sup > span:last-child { min-width: 0; flex: 1 1 auto; }
.v89s-fig { display: flex; align-items: center; gap: var(--s-2); }
.v89s-fig .l1 { font-variant-numeric: tabular-nums; font-weight: var(--w-medium); }
.v89s-table .l1 { font-variant-numeric: tabular-nums; }
.v89s-crit { color: var(--critical-fg); }
.v89s-table td .l2.v89s-crit, .v89s-owed td .l2.v89s-crit { color: var(--critical-fg); }
/* the caveat, said once: the Qualification file column's help */
.v89s-help { display: inline-flex; vertical-align: middle; margin-left: var(--s-1); color: var(--gray-400); cursor: help; }
.v89s-help svg.i { width: 16px; height: 16px; }
.v89s-help:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--r-chip); }
/* a 40px bar beside "2 of 11": confirmed items. v90: neutral, and positive only when every item is confirmed (green on a
   mostly empty file read as done); never the accent, blue is never a status */
.v89s-bar { display: inline-block; flex: none; width: 40px; height: 4px; border-radius: var(--r-chip); background: var(--gray-100); overflow: hidden; vertical-align: middle; }
.v89s-bar > u { display: block; height: 100%; background: var(--neutral-dot); border-radius: var(--r-chip); text-decoration: none; }
.v89s-bar.full > u { background: var(--positive-dot); }
/* v90: a row's action is a ghost button that reads as one: accent text, a tint on hover (dark body text read as data) */
#view :is(.v89s-list, .v89s-prof) .btn.ghost.v89s-act { color: var(--accent); }
#view :is(.v89s-list, .v89s-prof) .btn.ghost.v89s-act:hover { background: var(--accent-tint); color: var(--accent-hover); }
/* the Next step column: the ghost button's text lines up with the column header */
.v89s-table td.v89s-stepc .btn { margin-left: calc(-1 * var(--s-3)); justify-content: flex-start; white-space: nowrap; }
.v89s-table td.v89s-stepc .v89-check, .v89s-table td.v89s-stepc .v89-muted { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
/* on a desk, Request documents is the header's secondary button; on a phone it is in the More menu */
.v89s-list .v89-head .v84menu .v89s-phone { display: none; }
.v89s-bar.wide { width: 100%; max-width: 160px; }
.v89s-foot { margin: var(--s-3) 0 0; max-width: 80ch; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* the Cards view */
.v89s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4); }
a.card.v89s-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); margin: 0; color: var(--gray-900); text-decoration: none; overflow: hidden; }
a.card.v89s-card:hover { border-color: var(--gray-300); background: var(--gray-0); }
a.card.v89s-card:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.v89s-card-h { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.v89s-card-h > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.v89s-card-h b { display: block; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89s-card-h > span:nth-child(2) > span { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89s-card-h .chip { flex: none; }
.v89s-card-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-3); margin: 0; }
.v89s-card-f div { min-width: 0; }
.v89s-card-f dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-500); margin: 0; }
.v89s-card-f dd { margin: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); font-variant-numeric: tabular-nums; }
.v89s-card-f dd .v89s-crit { font-weight: var(--w-regular); }
.v89s-card-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); margin-top: auto; border-top: 1px solid var(--gray-100); min-width: 0; }
/* the request link's state reads as a quiet line here; the decision is the card's one chip */
.v89s-card-b .v87chip { height: auto; min-height: 0; padding: 0; border: 0; background: none; color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); flex: 0 1 auto; min-width: 0; }
.v89s-card-b .v87chip::before { display: none; }

/* ---------------- the Supply chain view ---------------- */
.v89s-chaincard .card-b { padding-top: var(--s-2); }
.v89s-chain { position: relative; }
.v89s-cols { position: relative; height: 20px; margin: 0 0 var(--s-2); }
.v89s-cols span { position: absolute; top: 0; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); letter-spacing: 0; text-transform: none; }
.v89s-box { position: relative; }
.v89s-box > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v89s-box path.e { fill: none; stroke: var(--gray-400); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity var(--d-hover) var(--ease); }
.v89s-box path.e.missing { stroke-dasharray: 4 4; }
.v89s-box path.e.held { stroke: var(--attention-dot); }
.v89s-box path.e.recall { stroke: var(--critical-dot); }
.v89s-box .nn { position: absolute; transform: translateY(-50%); display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: var(--s-2) var(--s-3); background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: var(--r-ctl); box-shadow: none; box-sizing: border-box; min-width: 0; transition: opacity var(--d-hover) var(--ease); }
.v89s-box .nn.held { border-color: var(--attention-bd); }
.v89s-box .nn.recall { border-color: var(--critical-bd); }
.v89s-box .nn.none { border-style: dashed; background: var(--gray-25); }
.v89s-box .nn.me { border-color: var(--gray-300); }
.v89s-box .nn .v89-mono-gram, .v89s-box .nn .av { flex: none; }
.v89s-box .nn-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.v89s-box .nn-t b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89s-box .nn-t b a { color: inherit; text-decoration: none; }
.v89s-box .nn-t b a:hover { text-decoration: underline; }
.v89s-box .nn-t small { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-regular); color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89s-chain.dim .nn:not(.on), .v89s-chain.dim path.e:not(.on) { opacity: .3; }
/* the earlier diagram's corner dots and markers: the node's border says held or recall now */
.v89s-box .nn::before, .v89s-box .nn::after { display: none; }
.v89s-chain-t { display: none; }
.v89s-key { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--gray-100); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-key .k { display: inline-flex; align-items: center; gap: var(--s-2); }
.v89s-key .k::before { content: ""; width: 20px; height: 0; border-top: 2px solid var(--gray-400); }
.v89s-key .k.missing::before { border-top-style: dashed; }
.v89s-key .k.held::before { border-top-color: var(--attention-dot); }
.v89s-key .k.recall::before { border-top-color: var(--critical-dot); }
.v89s-key-n { margin-left: auto; }

/* ---------------- the supplier profile ---------------- */
.v89s-ohead .v89s-oid { display: flex; align-items: flex-start; gap: var(--s-4); min-width: 0; flex: 1 1 auto; }
.v89s-ohead .v89s-oid > div { min-width: 0; }
.v89s-meta { display: block; margin: var(--s-1) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; }
.v89s-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.v89s-rail { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
#view .v89s-detail .card + .card, #view .v89s-detail section + section { margin-top: 0; }
/* what is owed: a checklist, so its words wrap rather than being cut */
.v89s-owed td { vertical-align: middle; white-space: normal; overflow: hidden; }
.v89s-owed td .l1 { white-space: normal; overflow: visible; }
.v89s-owed td .l2 { white-space: normal; overflow: visible; }
.v89s-why { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
.v89s-owed tr.v89s-done td .l1 { font-weight: var(--w-regular); color: var(--gray-700); }
.v89s-owed .v89s-own { max-width: 100%; padding: 0 var(--s-2); margin-left: calc(-1 * var(--s-2)); overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
.v89s-due { font-variant-numeric: tabular-nums; }
/* v90: the owed list grouped by status: one chip and its count per group, not one chip per row */
.v89s-owed tr.v89s-grp td { padding: var(--s-2) var(--s-4); height: 40px; background: var(--gray-25); border-bottom: 1px solid var(--gray-100); }
.v89s-owed tr.v89s-grp td > .chip { vertical-align: middle; }
.v89s-grp-n { margin-left: var(--s-2); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); font-variant-numeric: tabular-nums; vertical-align: middle; }
.v89s-owed td.r .btn { margin-right: calc(-1 * var(--s-3)); }
.v89s-owed td .l2 .v89-id { white-space: nowrap; font-weight: var(--w-regular); color: inherit; }
/* what the rail does not have yet: one quiet line */
.v89s-lack { margin: var(--s-3) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-props .card-b > .v89s-lack:first-child { margin-top: 0; }
/* the request link card: what it asks for is already the Requested rows of What is owed, so its own list is not repeated */
.v89s-main [data-v87ch] h4.v87h:has(+ ul.v87own-list), .v89s-main [data-v87ch] ul.v87own-list { display: none; }
.v89s-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v89s-start { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.v89s-start p { max-width: 64ch; color: var(--gray-700); }
.v89s-start .btn { flex: none; }
.v89s-dec .qdec { margin: 0; padding: 0; border: 0; background: none; }
.v89s-dec .qdec-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: 0; }
.v89s-dec .qdec-h > span:not(.chip) { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-dec .qdec p { margin: var(--s-3) 0 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); max-width: 80ch; }
.v89s-dec .qdec p b { font-weight: var(--w-medium); color: var(--gray-900); }
.v89s-bound { margin: var(--s-3) 0 0; max-width: 80ch; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-cardnote { margin: 0; padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--gray-100); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-items .card-h .btn { margin-left: auto; }
.v89s-vfile .vfile { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; }
.v89s-vfile .vfile > * { margin: 0; }
.v89s-trace .card-h .link.sp { margin-left: auto; }
/* the trace: no hyphenated breaks ("pass-port", "certifi-cate"); status words in the tone tokens, blue is never a status */
.v89s-trace .rstep, .v89s-trace .rstep * { hyphens: manual; -webkit-hyphens: manual; }
.v89s-trace .rstep .rword { color: var(--gray-500); }
.v89s-trace .rstep.g .rword { color: var(--positive-fg); }
.v89s-trace .rstep.a .rword { color: var(--attention-fg); }
.v89s-trace .rstep.r .rword { color: var(--critical-fg); }
/* the file, item by item: its bars neutral like the list's (never the accent) */
.v89s-vfile .vs-bar u, .v89s-vfile .vs-g i u { background: var(--neutral-dot); }
/* long detail wraps on the profile's tables rather than being cut */
.v89s-prof .v89-table td { white-space: normal; }
.v89s-prof .v89-table td .l1 { white-space: nowrap; }
/* the right rail: properties as label and value, dates and activity as quiet rows */
.v89s-props dl { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.v89s-props dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.v89s-props dt { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89s-props .v89s-lackrow dd { color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v89s-props dd { margin: 0; min-width: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); overflow-wrap: anywhere; }
.v89s-props dd .v89-id { overflow-wrap: anywhere; }
.v89s-sub { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89s-props .card-h .btn { margin-left: auto; }
.v89s-feed { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-2); }
.v89s-feed > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--gray-100); }
.v89s-feed > li:last-child { border-bottom: 0; }
.v89s-feed.tight { padding: 0; }
.v89s-feed.tight > li { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-2) 0; }
.v89s-feed.tight > li:first-child { padding-top: 0; }
.v89s-when { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v89s-what { min-width: 0; }
.v89s-what b { display: block; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89s-what b.v89s-crit { color: var(--critical-fg); }
.v89s-what > span { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); overflow-wrap: anywhere; }
.v89s-rail .card-h .link.sp { margin-left: auto; }

/* ---------------- the supply map (#/map): no coloured icon tiles ---------------- */
.smap .smlist .li-ic { background: var(--gray-100); color: var(--gray-700); }

/* ---------------- Your pharmacy's file ---------------- */
.v89n-id { display: flex; align-items: flex-start; gap: var(--s-4); min-width: 0; }
.v89n-id > div { min-width: 0; }
.v89n-id .av.v89n-av { width: 40px; height: 40px; min-width: 40px; border-radius: var(--r-ctl); background: var(--gray-100); color: var(--gray-700); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold); display: inline-grid; place-items: center; overflow: hidden; box-shadow: none; border: 0; }
.v89n-id .av.v89n-av img { width: 100%; height: 100%; object-fit: cover; }
.v89n-id b { display: block; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); color: var(--gray-900); }
.v89n-id p { margin: var(--s-1) 0 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89n-id p.v89-muted { color: var(--gray-500); }
.v89n-about { margin: var(--s-4) 0 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89n-file td { font-variant-numeric: tabular-nums; }

/* ---------------- phone (up to 699px) ---------------- */
@media (max-width: 699px) {
  .v89s-tools { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }   /* a wrapping column sizes each line to its widest content; single-line lets the chips stretch and scroll */
  .v89s-dt .dt-bar { flex-wrap: wrap; }
  .v89s-dt .dt-bar > .v89s-tools { flex-basis: 100%; }
  .v89s-dt .dt-bar > .dm-wrap { display: none; }
  /* a stacked row keeps its ⋯ menu in its top right corner */
  #view .v89s-dt .dtab tbody tr { position: relative; }
  #view .v89s-dt .dtab td.dt-act { position: absolute; top: var(--s-2); right: var(--s-2); width: auto; padding: 0; }
  #view .v89s-dt .dt-kebab { width: 32px; height: 32px; display: inline-grid; place-items: center; }
  .v89s-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); align-self: stretch; }   /* stretch: in the phone column it sized to its content (670px) and pushed the page sideways */
  .v89s-chips::-webkit-scrollbar { display: none; }
  .v89s-search { width: 100%; height: 40px; }
  .v89s-search input[type="search"] { height: 38px; font-size: 16px; }
  .v89s-cards { grid-template-columns: minmax(0, 1fr); }
  .v89s-detail { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .v89s-chain { display: none; }
  .v89s-chain-t { display: block; }
  .v89s-chaincard .card-b { padding: 0; }
  .v89s-chain-t .v89s-foot { padding: 0 var(--s-4); }
  .v89s-key { margin: var(--s-4); }
  .v89s-key-n { margin-left: 0; }
  .v89s-start { flex-direction: column; align-items: flex-start; }
  .v89s-feed > li { grid-template-columns: 72px minmax(0, 1fr); }
  .v89s-sup .v89-mono-gram { display: none; }
  /* stacked rows: a cell's two lines stay together beside its label, and the first cell's lines stack */
  #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table td:first-child { flex-direction: column; align-items: stretch; gap: 0; }
  #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table td[data-label]:not(:first-child) > * { grid-column: 2; }
  #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table td[data-label]:not(:first-child) { row-gap: 0; }
  /* a stacked row shows only the cells that say something, and a ghost button lines up with the values beside it */
  #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table td:empty, #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table:not(.v84q):not(.vx-rt) td[data-label]:not(:first-child):empty { display: none; }
  #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table td[data-label] > .btn.ghost { margin-left: calc(-1 * var(--s-3)); }
  #view :is(.v89s-list, .v89s-prof, .v89n) .tablewrap > table td[data-label] > .btn.ghost.v89s-own { margin-left: calc(-1 * var(--s-2)); }
  #view .v89s-detail td[data-label] > .chip, #view .v89s-detail td[data-label] > .btn, #view .v89s-detail td[data-label] > .v89-check, #view .v89s-list td[data-label] > .chip, #view .v89s-list td[data-label] > .btn { justify-self: start; }
  .v89s-ohead .acts { width: 100%; }
  /* v90: one primary and the More menu on one line (three buttons took 150px before the content); the menu opens leftward
     from the right edge, so More sits last */
  .v89s-list .v89-head .acts { width: 100%; flex-wrap: nowrap; justify-content: flex-start; }
  .v89s-list .v89-head .acts > .v89s-desk { display: none; }
  .v89s-list .v89-head .acts > .btn.primary { flex: 1 1 auto; width: auto; }
  .v89s-list .v89-head .acts > details.v84more { order: 2; flex: none; }
  .v89s-list .v89-head .v84menu .v89s-phone { display: inline-flex; }
  /* the chip row scrolls sideways under an edge fade, which lifts once the last chip is in view */
  .v89s-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .v89s-chips[data-end] { -webkit-mask-image: none; mask-image: none; }
  /* the owed list's status groups read as a band across the stacked rows */
  #view .v89s-prof .tablewrap > table.v89s-owed tr.v89s-grp { padding: var(--s-2) var(--s-4); background: var(--gray-25); }
  #view .v89s-prof .tablewrap > table.v89s-owed tr.v89s-grp td { padding: 0; height: auto; background: none; align-items: center; flex-direction: row; }
  .v89s-table td.v89s-stepc .btn { max-width: 100%; }
  /* the decision card's button goes under its title and line on a phone (beside them it covered the line) */
  .v89s-prof .v89s-dec .card-h { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .v89s-prof .v89s-dec .card-h > .btn { order: 11; margin: var(--s-3) 0 0; }
}


/* v90: the 320px rail left the main column 136px wide at 768 and 392px at 1024, crushing labels into slivers (proof/run.cjs red).
   Below 1181px the rail drops under the main column on every page that uses .v89s-detail. */
@media (max-width: 1180px) { #view .v89s-detail { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================== v92 FIX ROUND (G2) */
/* the toolbar: the chips on their own row; the search and Columns on the second, the search 32px like every control */
@media (min-width: 700px) {
  .v89s-dt .dt-bar { flex-wrap: wrap; row-gap: var(--s-3); }
  .v89s-dt .dt-bar > .v89s-tools { display: contents; }
  .v89s-dt .dt-bar .v89s-chips { order: -2; flex: 1 1 100%; }
  .v89s-dt .dt-bar .v89s-search { order: -1; }
  .v89s-dt .dt-bar > .dm-wrap { order: 0; margin-left: auto; }
  .v89s-list > .v89s-tools { margin: 0 0 var(--s-4); }
}
.v89s-search { box-sizing: border-box; height: 32px; }
.v89s-search input[type="search"] { height: 100%; }
/* a right-aligned header keeps its sort icon after its label, as every other header does */
.v89s-dt th.r .dt-sort, .v89s-dt th.num .dt-sort { flex-direction: row; justify-content: flex-end; width: 100%; }
/* the file column's help sits after its own label with a gap, never against the next header */
.v89s-dt th .v89s-help { margin-left: var(--s-1); margin-right: var(--s-2); }
/* v93 (fix round, H2; D3): the supplier's name on one line, what it is as one muted line under it, each cut with an ellipsis
   only past the column's width (names wrapped to three and four lines) */
.v89s-table .v89s-sup .l1, .v89s-table .v89s-sup .l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* v93 (decision 13): the grey override that undid the accent on row actions is gone; row actions are accent ghost buttons
   (the system rule, and lines 43 and 44 above) */
/* the owner is a value: the name, or "Unassigned" in grey; pressing it sets who closes the item and by when */
.v89s-owed button.v89s-own { display: inline; height: auto; min-height: 0; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v89s-owed button.v89s-own.v89s-unowned { color: var(--gray-500); }
.v89s-owed button.v89s-own:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.v89s-owed button.v89s-own:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: 4px; }
/* group headings are plain text with their count, as on Today */
.v89s-owed tr.v89s-grp td { background: none; }
.v89s-grp-t { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-700); vertical-align: middle; }
.v89s-ref { white-space: nowrap; }
.v89s-dt .dt-sort svg { flex: none; }
.v89s-owed td .l1, .v89s-owed td .l2 { white-space: normal; overflow: visible; text-overflow: clip; }

/* =============================================================== v93 FIX ROUND (H2) */
/* the sort glyph shows on the column the table is sorted by, and on the header pointed at (seven glyphs read as noise) */
.v89s-dt .dt-sort:not(.on) svg { width: 0; opacity: 0; }
.v89s-dt th:hover .dt-sort svg, .v89s-dt .dt-sort:focus-visible svg { width: 16px; opacity: 1; }
/* a dense table: 12px at the cells' sides, so the name, the missing line and the next step fit whole at a desk */
@media (min-width: 700px) {
  .v89s-table th, .v89s-table td { padding-left: var(--s-3); padding-right: var(--s-3); }
  .v89s-table td.v89s-stepc .btn { margin-left: calc(-1 * var(--s-2)); padding-left: var(--s-2); padding-right: var(--s-2); }
  .v89s-table td .l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* =============================================================== r96 (F-INTAKE): makers under the seller */
.r96mk-note .card-h { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.r96mk-note .card-h .sub { flex: 1 1 100%; }
.r96mk-list { display: grid; gap: 0; }
.r96mk-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--gray-200); }
.r96mk-row > div { min-width: 0; display: grid; }
.r96mk-row .l1 { font-weight: var(--w-medium); }
.r96mk-row .l2 { color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); overflow-wrap: anywhere; }
.r96mk-rel { margin: 0; padding: var(--s-3) var(--s-5); color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.r96mk td .l1, .r96mk td .l2, .r96mk .v89-table td .l1, .r96mk .v89-table td .l2 { display: block; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .r96mk-row { flex-direction: column; align-items: flex-start; }
  .r96mk .tablewrap { overflow-x: auto; }
}
/* r96 (F-INTAKE): the lot page's "another record holds this lot" card (next-r96-merge.js), kept here so it needs no stylesheet of its own */
.r96m .card-h { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.r96m .card-h .sub { flex: 1 1 100%; }
.r96m-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--gray-200); }
.r96m-row > div:first-child { min-width: 0; display: grid; }
.r96m-row .l1 { font-weight: var(--w-medium); overflow-wrap: anywhere; }
.r96m-row .l2 { color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); overflow-wrap: anywhere; }
.r96m-why { color: var(--gray-900); }
.r96m-acts { display: flex; gap: var(--s-2); flex: none; }
@media (max-width: 699px) { .r96m-row { flex-direction: column; align-items: flex-start; } .r96m-acts { flex-wrap: wrap; } }
/* r96 (W2-SUPPLY, owner decision 7): who makes what this seller sells: asked, named or refused, with the date, who asked and the
   supplier's words. Private to the workspace. */
.r96md .card-h { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.r96md .card-h .sub { flex: 1 1 100%; }
.r96md-rows { display: grid; }
.r96md-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--gray-200); }
.r96md-row > div { min-width: 0; display: grid; gap: 2px; }
.r96md-row .l1 { font-weight: var(--w-medium); color: var(--gray-900); overflow-wrap: anywhere; }
.r96md-row .l2 { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); overflow-wrap: anywhere; }
.r96md-row .l3 { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); overflow-wrap: anywhere; }
.r96md-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--gray-200); }
.r96md-empty { margin: 0; padding: var(--s-3) var(--s-5); color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
@media (max-width: 699px) {
  .r96md-row { grid-template-columns: minmax(0, 1fr); padding: var(--s-3) var(--s-4); }
  .r96md-acts { padding: var(--s-3) var(--s-4); }
}