/* v8 (2026-10-31): "Suppliers · lots" in the sidebar (next-v8-side.js), drawn as the boards draw it: a quiet label, then rows the
   height of the nav items, each a supplier's colour dot, its name and its count of lots on file. */
#nav .navgroup.v8side { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v8-hair); }
@media (min-width: 700px) {
  #nav .navgroup.v8side { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .shell.mini #nav .navgroup.v8side { display: none; }
}
#nav .v8side-h { margin: 0 0 4px; padding: 0 10px; font: 500 12px/18px var(--v8-sans); color: var(--v8-t3); }
#nav a.v8side-r { display: flex; align-items: center; gap: 12px; height: 36px; margin: 0 0 2px; padding: 0 10px; border-radius: 9px; font: 400 14px/20px var(--v8-sans); color: var(--v8-t2); text-decoration: none; }
#nav a.v8side-r > i { flex: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
#nav a.v8side-r > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav a.v8side-r > em { flex: none; font: 400 12px/1 var(--v8-mono); font-style: normal; color: var(--v8-t3); }
#nav a.v8side-r:hover { background: var(--v8-raised); color: var(--v8-t1); }
#nav a.v8side-r[aria-current] { background: var(--v8-raised); color: var(--v8-t1); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); }
#nav a.v8side-r.more { color: var(--v8-t3); font-size: 13px; }
#nav a.v8side-r.more:hover { color: var(--v8-t1); }